地图区域颜色

src/views/zdsz/bigscreen/index.vue

@@ -436,6 +436,16 @@
               //   { value: 484, name: 'Union Ads' },
               //   { value: 300, name: 'Video Ads' }
               // ],
+              itemStyle: {
+                normal: {
+                  color: function(params) {
+                    // 预定义颜色数组
+                    let colors = ['#35cdee', '#a2eac7', '#ffe07c', '#fc93ba', '#fc83a8'];
+                    // 返回每个饼图项的颜色，可以按照索引或其他逻辑来分配颜色
+                    return colors[params.dataIndex % colors.length];
+                  }
+                }
+              },
               emphasis: {
                 itemStyle: {
                   shadowBlur: 10,
@@ -464,15 +474,14 @@
           return;
         }
         this.intervalArr.push("施工进度统计");
+        //自动切换顺序
         let dataLength = option.series[0].data.length;
         let currentIndex = -1;
         setInterval(function () {
           currentIndex = (currentIndex + 1) % dataLength;
-          myChart.dispatchAction({
-            type: 'showTip',
-            seriesIndex: 0,
-            dataIndex: currentIndex
-          });
+          myChart.dispatchAction({ type: 'downplay', seriesIndex: 0 });
+          myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: currentIndex });
+          myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: currentIndex });
         }, 2000); // 每隔 2000 毫秒切换一次
       },
       echartsLeft_2(){
@@ -1185,9 +1194,6 @@
         ];
 
         let myOption = { // 进行相关配置
-          // grid: {
-          //   top:'5%',
-          // },
           tooltip: {// 鼠标移到图里面的浮动提示框
             show: true
           },
@@ -1196,12 +1202,26 @@
             min: 0,
             max: 200,
             calculable: true,
-            seriesIndex: [1],
+            // seriesIndex: [1],
             inRange: {
-              color: ['#01073f', '#000960'] // 深蓝到淡蓝 地图背景色
+              // color: ['#01073f', '#000960'] // 深蓝到淡蓝 地图背景色
+              color: ['red', '#fff'] // 深蓝到淡蓝 地图背景色
             }
           },
           geo: {// 这个是重点配置区
+            regions:[
+              { name: '农安县', itemStyle: { normal: { areaColor: '#FD9A9A' } } },
+              { name: '德惠市', itemStyle: { normal: { areaColor: '#FFDC63' } } },
+              { name: '榆树市', itemStyle: { normal: { areaColor: '#54E6AB' } } },
+              { name: '九台区', itemStyle: { normal: { areaColor: '#489EFF' } } },
+              { name: '宽城区', itemStyle: { normal: { areaColor: '#54E6AB' } } },
+              { name: '公主岭市', itemStyle: { normal: { areaColor: '#fd755a' } } },
+              { name: '绿园区', itemStyle: { normal: { areaColor: '#FFDC63' } } },
+              { name: '二道区', itemStyle: { normal: { areaColor: '#68ff8b' } } },
+              { name: '南关区', itemStyle: { normal: { areaColor: '#3afff3' } } },
+              { name: '朝阳区', itemStyle: { normal: { areaColor: '#ff2bb7' } } },
+              { name: '双阳区', itemStyle: { normal: { areaColor: '#ffee43' } } },
+            ],
             // map: "china",// 表示中国地图
             map: "changchun",// 表示长春地图
             roam: false, //关闭鼠标缩放和漫游
@@ -1224,6 +1244,14 @@
               normal: {
                 //静态的时候显示的默认样式
                 areaColor: '#010742',//地图区域背景色
+                // areaColor: function(params) {
+                //   alert(66)
+                //   console.log("params=",params)
+                  // 预定义颜色数组
+                  // let colors = ['#35cdee', '#a2eac7', '#ffe07c', '#fc93ba', '#fc83a8'];
+                  // 返回每个饼图项的颜色，可以按照索引或其他逻辑来分配颜色
+                  // return colors[params.dataIndex % colors.length];
+                // },
                 borderColor: '#0847f5',//地图边框颜色
               },
               emphasis: {
@@ -1313,17 +1341,21 @@
                 }
               },
               itemStyle: {
-                color: '#0ff',
-                color: '#f40 ',
+                // color: '#0ff',
+                // color: '#f40 ',
                 color: '#feae21',
               }
             },
           ]
         }
-        if (myOption && typeof myOption === "object") {
-          // myChart.setOption(myOption);
-          myChart.setOption(myOption, true);
+        if(myOption){
+          myChart.clear();
+          myChart.setOption(myOption);
         }
+        // if (myOption && typeof myOption === "object") {
+        //   // myChart.setOption(myOption);
+        //   myChart.setOption(myOption, true);
+        // }
 
         function getTel() {
           var n = 2, telstr = '1';