<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: '',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}]}

　　

轉載于:https://www.cnblogs.com/jessical626/p/7269671.html

總結

以上是生活随笔為你收集整理的省份、区域（华南，华北...）自定义颜色的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。