<script>import echarts from 'echarts'export default {data() {return {chartBar1:null,chartBar2:null,chartBar3:null,chartBar4:null,tableData: [{province: '吉林',watch: '664',rate: '52.37%'}, {province: '吉林',watch: '664',rate: '52.37%'}, {province: '吉林',watch: '664',rate: '52.37%'}, {province: '吉林',watch: '664',rate: '52.37%'},{province: '吉林',watch: '664',rate: '52.37%'},{province: '吉林',watch: '664',rate: '52.37%'},{province: '吉林',watch: '664',rate: '52.37%'},{province: '吉林',watch: '664',rate: '52.37%'},{province: '吉林',watch: '664',rate: '52.37%'},{province: '吉林',watch: '664',rate: '52.37%'}],options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],value: '',options2: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],value2: '',areaName:'',data:[{name: "东北地区",value:9,rate:'东北地区:5%'},{name: "西北地区",value:90,rate:'西北地区:6%'},{name: "华北地区",value:900,rate:'华北地区:15%'},{name: "华东地区",value:9000,rate:'华东地区:26%'},{name: "华中地区",value:9,rate:'华中地区:16%'},{name: "华南地区",value:90,rate:'华南地区:18%'},{name: "西南地区",value: 900,rate:'西南地区:14%'},{name: "港澳地区",value:9,rate:'港澳地区:0.05%'}                      ],geoCoordMap:{'东北地区':[126.63,45.75],'西北地区':[90.68,38.77],'华北地区':[112.46,40.92],'华东地区':[121.48,31.22],'华中地区':[111.15,33.38],'华南地区':[110.3,24.08],'西南地区':[98.06,30.67],'港澳地区':[123.06,23.67]},       }},methods: {        convertData(data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = this.geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value)});}}return res;},//地图drawMap(){var _this = this;var chart = echarts.init(document.getElementById('map'),"macarons");chart.setOption({  backgroundColor: '#F6F2EE',title: {text: '用户分布',left: 'center'},toolbox: {show : true,feature : {                        saveAsImage : {show: true,title:'导出'},}},tooltip : {show:true,trigger: 'item',
//                  triggerOn: 'click',                   formatter:function(params,ticket,callback){                     var res = '';for(var i = 0 ; i < _this.data.length; i++){if(params.name==_this.data[i].name){res = _this.data[i].rate;  _this.areaName = params.name;break;}}
//                      console.log(_this.areaName)return res;                      }},visualMap: {min: 0,max: 1600,left: 'left',top: 'bottom',text: ['High','Low'],seriesIndex: [1],inRange: {color: ['#55c5c7', '#93a5ff','#5ab1ef','#ff916a','#d87a80','#8d98b3','#e5cf0d','#97b552']},calculable : true},legend: {orient: 'vertical',y: 'bottom',x:'right',data:['pm2.5'],textStyle: {color: '#fff'}},    geo: {map: 'china',roam: false,//禁止缩放label: {normal: {show: false,textStyle: {color: 'rgba(0,0,0,0.4)'}}},                 //背景色itemStyle: {//正常的颜色normal: {areaColor: '#d6d6d6',borderColor: '#fff',},//鼠标划上去的颜色emphasis: {areaColor: null,shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}},series : [                   //区域打点{name: '',type: 'effectScatter',coordinateSystem: 'geo',data: this.convertData(this.data),symbolSize: function (val) {return 20;},showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,label: {normal: {formatter: '{b}',position: 'right',show: true}},itemStyle: {normal: {color: '#ff6633',//点点的颜色shadowBlur: 10,shadowColor: '#fff',}},zlevel: 1},//地图数据的配置{name: 'categoryA',type: 'map',geoIndex: 0,// tooltip: {show: false},data:[{name: '北京', value: 200},{name: '天津', value: 200},{name: '上海', value: 0},{name: '重庆', value: 400},{name: '河北', value: 200},{name: '河南', value: 800},{name: '云南', value: 400},{name: '辽宁', value: 1600},{name: '黑龙江', value:1600},{name: '湖南', value: 800},{name: '安徽', value: 0},{name: '山东', value: 0},{name: '新疆', value: 1400},{name: '江苏', value: 0},{name: '浙江', value: 0},{name: '江西', value: 800},{name: '湖北', value: 800},{name: '广西', value: 1000},{name: '甘肃', value: 1400},{name: '山西', value: 200},{name: '内蒙古',value:200},{name: '陕西', value: 1400},{name: '吉林', value: 1600},{name: '福建', value: 0},{name: '贵州', value: 400},{name: '广东', value: 1000},{name: '青海', value: 1400},{name: '西藏', value: 400},{name: '四川', value: 400},{name: '宁夏', value: 1400},{name: '海南', value: 1000},{name: '台湾', value: 600},{name: '香港', value: 600},{name: '澳门', value: 600}]}    ]});return chart},exportExcel(){},
//      柱形图性别比例drawChartBar1() {            this.chartBar1 = echarts.init(document.getElementById('chartBar1'),"macarons");var that =  this.chartBar1;this.chartBar1.setOption({title : {text: '性别比例',subtext: ''},tooltip : {trigger: 'axis'},legend: {orient: 'horizontal',y: 'bottom',data:['蒸发量','降水量']},toolbox: {show : true,feature : {                         saveAsImage : {show: true,title:'导出'},}},calculable : true,xAxis : [{type : 'category',data : ['1月','2月','3月','4月','5月','6月']}],yAxis : [{type : 'value'}],series : [{name:'蒸发量',type:'bar',data:[2.0, 4.9, 7.0, 23.2, 25.6, 70.7],markPoint : {data : [{type : 'max', name: '最大值'},{type : 'min', name: '最小值'}]},markLine : {data : [{type : 'average', name: '平均值'}]}},{name:'降水量',type:'bar',data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7],markPoint : {data : [{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}]},markLine : {data : [{type : 'average', name : '平均值'}]}}]});return this.chartBar1;},
//          柱形图年龄分布drawChartBar2() {            this.chartBar2 = echarts.init(document.getElementById('chartBar2'),"macarons");var that =  this.chartBar2;this.chartBar2.setOption({title : {text: '年龄分布',subtext: ''},tooltip : {trigger: 'axis'},legend: {orient: 'horizontal',y: 'bottom',data:['蒸发量','降水量']},toolbox: {show : true,feature : {saveAsImage : {show: true,title:'导出'},}},calculable : true,xAxis : [{type : 'category',data : ['1月','2月','3月','4月','5月','6月']}],yAxis : [{type : 'value'}],series : [{name:'蒸发量',type:'bar',data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7],markPoint : {data : [{type : 'max', name: '最大值'},{type : 'min', name: '最小值'}]},markLine : {data : [{type : 'average', name: '平均值'}]}},{name:'降水量',type:'bar',data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7],markPoint : {data : [{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}]},markLine : {data : [{type : 'average', name : '平均值'}]}}]});return this.chartBar2;},
//          学历分布drawChartBar3() {               this.chartBar3 = echarts.init(document.getElementById('chartBar3'),"macarons");var that =  this.chartBar3;this.chartBar3.setOption({title : {text: '学历分布',subtext: ''},tooltip : {trigger: 'axis'},legend: {orient: 'horizontal',y: 'bottom',data:['蒸发量','降水量']},toolbox: {show : true,feature : {saveAsImage : {show: true,title:'导出'},}},calculable : true,xAxis : [{type : 'category',data : ['1月','2月','3月','4月','5月','6月']}],yAxis : [{type : 'value'}],series : [{name:'蒸发量',type:'bar',data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7],markPoint : {data : [{type : 'max', name: '最大值'},{type : 'min', name: '最小值'}]},markLine : {data : [{type : 'average', name: '平均值'}]}},{name:'降水量',type:'bar',data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],markPoint : {data : [{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}]},markLine : {data : [{type : 'average', name : '平均值'}]}}]});return this.chartBar3;},drawBarChart4() {this.chartBar4 = echarts.init(document.getElementById('chartBar4'),"macarons");this.chartBar4.setOption({title : {text: '职业分布',subtext: ''},tooltip : {trigger: 'axis'},legend: {orient: 'horizontal',y: 'bottom',data:['蒸发量','降水量']},toolbox: {show : true,feature : {saveAsImage : {show: true,title:'导出'},}},calculable : true,xAxis : [{type : 'category',data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}],yAxis : [{type : 'value'}],series : [{name:'蒸发量',type:'bar',data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],markPoint : {data : [{type : 'max', name: '最大值'},{type : 'min', name: '最小值'}]},markLine : {data : [{type : 'average', name: '平均值'}]}},{name:'降水量',type:'bar',data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],markPoint : {data : [{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}]},markLine : {data : [{type : 'average', name : '平均值'}]}}]});return this.chartBar4;},},mounted() {this.drawMap();this.drawChartBar1();this.drawChartBar2();this.drawChartBar3();this.drawBarChart4();var that = this;var that = this;this.drawMap().on('click', function (params) {                var province = params.name;if(province=="东北地区"||province=="华北地区"||province=="西北地区"||province=="华中地区"||province=="西南地区"||province=="华东地区"||province=="华南地区"||province=="港澳地区"){console.log(province)}else{that.$notify({title: '警告',message: '请点击热点区域',type: 'warning',offset:70});}});   window.onresize = function() {that.drawMap().resize();                                             that.drawChartBar1().resize();that.drawChartBar2().resize();that.drawChartBar3().resize();that.drawBarChart4().resize();}},}
</script>核心：

visualMap: {min: 0,max: 1600,left: 'left',top: 'bottom',text: ['High','Low'],seriesIndex: [1],inRange: {color: ['#55c5c7', '#93a5ff','#5ab1ef','#ff916a','#d87a80','#8d98b3','#e5cf0d','#97b552']},calculable : true},

//地图数据的配置{name: 'categoryA',type: 'map',geoIndex: 0,// tooltip: {show: false},data:[{name: '北京', value: 200},{name: '天津', value: 200},{name: '上海', value: 0},{name: '重庆', value: 400},{name: '河北', value: 200},{name: '河南', value: 800},{name: '云南', value: 400},{name: '辽宁', value: 1600},{name: '黑龙江', value:1600},{name: '湖南', value: 800},{name: '安徽', value: 0},{name: '山东', value: 0},{name: '新疆', value: 1400},{name: '江苏', value: 0},{name: '浙江', value: 0},{name: '江西', value: 800},{name: '湖北', value: 800},{name: '广西', value: 1000},{name: '甘肃', value: 1400},{name: '山西', value: 200},{name: '内蒙古',value:200},{name: '陕西', value: 1400},{name: '吉林', value: 1600},{name: '福建', value: 0},{name: '贵州', value: 400},{name: '广东', value: 1000},{name: '青海', value: 1400},{name: '西藏', value: 400},{name: '四川', value: 400},{name: '宁夏', value: 1400},{name: '海南', value: 1000},{name: '台湾', value: 600},{name: '香港', value: 600},{name: '澳门', value: 600}]}