|
|
@@ -0,0 +1,339 @@
|
|
|
+<template>
|
|
|
+ <div class="content">
|
|
|
+ <div class="map">
|
|
|
+ <div id="myChart" :style="{width: '700px', height: '700px'}"></div>
|
|
|
+ </div>
|
|
|
+ <div class="chart">
|
|
|
+ <div id="Chart" :style="{width: '500px', height: '700px'}"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import echarts from 'echarts'
|
|
|
+ import '../../static/china.js' // 引入中国地图数据
|
|
|
+ // import 'echarts/map/js/china.js';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ chart: null,
|
|
|
+ data: [],
|
|
|
+ total: 0,
|
|
|
+ model1:'',
|
|
|
+ periodList: [
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ label: '学前'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ label: '小学'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 3,
|
|
|
+ label: '初中'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 4,
|
|
|
+ label: '高中'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 5,
|
|
|
+ label: '中职'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ subjectList: [
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ label: '语文'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ label: '数学'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 3,
|
|
|
+ label: '英语'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 4,
|
|
|
+ label: '生物'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:5,
|
|
|
+ label: '化学'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ teacherList: [
|
|
|
+ { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500'},
|
|
|
+ { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
|
|
|
+ { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
|
|
|
+ { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
|
|
|
+ { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
|
|
|
+ { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
|
|
|
+ { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
|
|
|
+ { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
|
|
|
+ { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
|
|
|
+ { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
|
|
|
+ { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
|
|
|
+ { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
|
|
|
+ { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
|
|
|
+ { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
|
|
|
+ { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
|
|
|
+
|
|
|
+ ],
|
|
|
+ geoCoordMap: {
|
|
|
+ "四川省": [104.06, 30.67],
|
|
|
+ "陕西省": [108.78, 34.40],
|
|
|
+ "浙江省": [120.04, 30.35],
|
|
|
+ "广东省": [113.23, 23.22],
|
|
|
+ "湖北省": [114.12, 30.76],
|
|
|
+ "宁夏回族自治区": [106.09, 38.62],
|
|
|
+ "河南省": [113.45, 34.90],
|
|
|
+ "黑龙江省": [126.48, 45.99],
|
|
|
+ "甘肃省": [103.67, 36.22],
|
|
|
+ "河北省": [114.34, 38.22],
|
|
|
+ "北京市": [116.40, 39.94],
|
|
|
+ "江苏省": [118.72, 32.24],
|
|
|
+ "辽宁省": [123.24, 41.95],
|
|
|
+ "吉林省": [125.23, 43.90],
|
|
|
+ "安徽省": [117.17, 31.99],
|
|
|
+ "福建省": [119.16, 26.18],
|
|
|
+ "江西省": [115.80, 28.77],
|
|
|
+ "山东省": [116.91, 36.81],
|
|
|
+ "湖南省": [112.80, 28.47],
|
|
|
+ "海南省": [110.18, 19.92],
|
|
|
+ "贵州省": [106.49, 26.84],
|
|
|
+ "云南省": [102.59, 25.25],
|
|
|
+ "青海省": [101.60, 36.75],
|
|
|
+ "西藏自治区": [90.97, 29.84],
|
|
|
+ },
|
|
|
+ dataIndex: "",
|
|
|
+ teacherData:[
|
|
|
+ {
|
|
|
+ "name": "高新区",
|
|
|
+ "value": 80
|
|
|
+ }, {
|
|
|
+ "name": "青羊区",
|
|
|
+ "value": 87
|
|
|
+ }, {
|
|
|
+ "name": "天府新区",
|
|
|
+ "value": 60
|
|
|
+ }, {
|
|
|
+ "name": "锦江区",
|
|
|
+ "value": 40
|
|
|
+ }, {
|
|
|
+ "name": "金牛区",
|
|
|
+ "value": 50
|
|
|
+ }, {
|
|
|
+ "name": "郫都区",
|
|
|
+ "value": 30
|
|
|
+ }, {
|
|
|
+ "name": "温江区",
|
|
|
+ "value": 40
|
|
|
+ }
|
|
|
+ ]
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.drawLine();
|
|
|
+ this.drawChart();
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ drawLine() {
|
|
|
+ var mapChart = echarts.init(document.getElementById('myChart'));
|
|
|
+ // mapChart的配置
|
|
|
+ var option = {
|
|
|
+ series: [{
|
|
|
+ type: 'map',
|
|
|
+ mapType: 'china',
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: false,//显示省份标签
|
|
|
+ textStyle: { color: "#141414" }//省份标签字体颜色
|
|
|
+ },
|
|
|
+ emphasis: {//对应的鼠标悬浮效果
|
|
|
+ show: true,
|
|
|
+ textStyle: { color: "#666" }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0, color: '#58B3CC'
|
|
|
+ }, {
|
|
|
+ offset: 1, color: '#F58158'
|
|
|
+ }], false),
|
|
|
+ width: 1,
|
|
|
+ opacity: 0.2,
|
|
|
+ curveness: 0.1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderWidth: .5,//区域边框宽度
|
|
|
+ borderColor: '#666',//区域边框颜色
|
|
|
+ areaColor: "#fff",//区域颜色
|
|
|
+ //background-image: linear-gradient(135deg, #f5f7fa 0 %, #c3cfe2 100 %);
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ borderWidth: .5,
|
|
|
+ borderColor: '#4b0082',
|
|
|
+ areaColor: "#008DFF",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { name: '四川', selected: true },//福建为选中状态
|
|
|
+ { name: '广东', selected: true },//福建为选中状态
|
|
|
+ { name: '湖北', selected: true },//福建为选中状态
|
|
|
+ ]
|
|
|
+ }],
|
|
|
+ }
|
|
|
+ mapChart.setOption(option);
|
|
|
+ mapChart.on('click', function (params) {
|
|
|
+ this.dataIndex = params.dataIndex;
|
|
|
+ console.log(params);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ drawChart() {
|
|
|
+ var myChart = echarts.init(document.getElementById('Chart'));
|
|
|
+ var xData = [],
|
|
|
+ yData = [];
|
|
|
+ var min = 50; // 最小值的定义
|
|
|
+ this.teacherData.map(function (a, b) {
|
|
|
+ xData.push(a.name);
|
|
|
+ if (a.value === 0) {
|
|
|
+ yData.push(a.value + min);
|
|
|
+ } else {
|
|
|
+ yData.push(a.value);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ var option = {
|
|
|
+ //color: ['#3398DB'],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'line',
|
|
|
+ lineStyle: {
|
|
|
+ opacity: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formatter: function (prams) {
|
|
|
+ return "名师数：" + prams[0].data
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '0%',
|
|
|
+ right: '0%',
|
|
|
+ bottom: '5%',
|
|
|
+ top: '5%',
|
|
|
+ height: '50%',
|
|
|
+ containLabel: true,
|
|
|
+ z: 22
|
|
|
+ },
|
|
|
+ xAxis: [{
|
|
|
+ type: 'category',
|
|
|
+ gridIndex: 0,
|
|
|
+ data: xData,
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#0c3b71'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ color: 'rgb(170,170,170)',
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ yAxis: [{
|
|
|
+ type: 'value',
|
|
|
+ gridIndex: 0,
|
|
|
+ splitLine: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ max: 150,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#0c3b71'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: 'rgb(170,170,170)',
|
|
|
+ formatter: '{value} '
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ gridIndex: 0,
|
|
|
+ max: 200,
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [{
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '20',
|
|
|
+ xAxisIndex: 0,
|
|
|
+ yAxisIndex: 0,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ //barBorderRadius: [30, 30, 0, 0],
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0, 0, 0, 1, [
|
|
|
+ // {
|
|
|
+ // offset: 0,
|
|
|
+ // color: '#00feff'
|
|
|
+ //},
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: '#4da1ff'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#4da1ff'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: yData,
|
|
|
+ zlevel: 11
|
|
|
+
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+ .content{
|
|
|
+ display:flex;
|
|
|
+
|
|
|
+ }
|
|
|
+ .map {
|
|
|
+ width: 50%;
|
|
|
+ height: 600px;
|
|
|
+ /*margin-left:150px;*/
|
|
|
+ padding-left: 250px;
|
|
|
+ /*background: url("../../assets/image/resource/title-bg.jpg") center 120% no-repeat;*/
|
|
|
+ /*background-color:aliceblue;*/
|
|
|
+ }
|
|
|
+ .chart {
|
|
|
+ width: 600px;
|
|
|
+ height: 700px;
|
|
|
+ /*border: 1px solid red;*/
|
|
|
+ margin-left: 10px;
|
|
|
+ /*background-color: aliceblue;*/
|
|
|
+ }
|
|
|
+</style>
|
luoxiaoli@foxmail.com
