linwenxin 1 год назад
Родитель
Сommit
f2b71864c3
1 измененных файлов с 65 добавлено и 22 удалено
  1. 65 22
      src/views/bigViews/dataView1/components/mapdata.vue

+ 65 - 22
src/views/bigViews/dataView1/components/mapdata.vue

@@ -100,16 +100,18 @@ export default {
       cIndex: 0,
       oldcIndex: 0,
       myChart: null,
+      getLarge9: []
     };
   },
   mounted() {
     this.getbigGetLarge9();
-    this.echart_7();
+    
   },
   methods: {
     getbigGetLarge9(){
       bigGetLarge9().then(res=>{
-        console.log(res)
+        this.getLarge9 = res.data
+        this.echart_7();
       })
     },
     echart_7(pam={
@@ -134,14 +136,10 @@ export default {
         ];
         echarts.registerMap('china', geoJsonData);
         // 指定城市和颜色
-        var cityColors = {
-          '北京市': '#ff7f50',
-          '上海市': '#87cefa',
-          '广州市': '#da70d6',
-          '深圳市': '#32cd32',
-          '成都市': '#6495ed',
-          '白云区': 'red'
-        };
+        var cityColors = {}
+        this.getLarge9.map(name=>{
+          cityColors[name] = "#009eff"
+        });
         // 构建 series 数据
         var seriesData = Object.keys(cityColors).map(function (city) {
           return {
@@ -175,11 +173,11 @@ export default {
                 // 默认背景色
                 areaColor: 'rgba(0,0,0,0)',
                 // 边框颜色
-                borderColor: '#111'
+                borderColor: '#096DF3'
               },
               emphasis: {
                 // 默认背景色
-                areaColor: 'red'
+                areaColor: '#7024fb'
               }
             },
             regions: [
@@ -211,17 +209,62 @@ export default {
         that.myChart.on('click', function (params) {
           var cityName = params.name;
           if (cityColors[cityName]) {
-            seriesData.forEach(function (city) {
-              if (city.name === cityName) {
-                city.itemStyle.normal.areaColor = '#ffcc33'; // 设置点击后的颜色
-              }
-            });
-            that.myChart.setOption({
-              series: [{
-                data: seriesData
-              }]
-            });
+            var seriesData =  Object.keys(cityColors).map(function (city) {
+              return {
+                name: city,
+                itemStyle: {
+                  areaColor: cityName === city ? "#7024fb" : null,
+                  normal: {
+                    areaColor: cityName === city ? "#7024fb" : cityColors[city],
+                    borderColor: 'rgba(0,0,0,0)'
+                  },
+                  emphasis: {
+                    areaColor: cityName === city ? "#7024fb" : cityColors[city],
+                    borderColor: 'rgba(0,0,0,0)'
+                  }
+                }
+              };
+            })
+          }else{
+            var seriesData = Object.keys({...cityColors, [cityName]:"#7024fb"}).map(function (city) {
+              return {
+                name: city,
+                itemStyle: {
+                  areaColor: cityName === city ? "#7024fb" : null,
+                  normal: {
+                    areaColor: cityName === city ? "#7024fb" : cityColors[city],
+                    borderColor: 'rgba(0,0,0,0)'
+                  },
+                  emphasis: {
+                    areaColor: cityName === city ? "#7024fb" : cityColors[city],
+                    borderColor: 'rgba(0,0,0,0)'
+                  }
+                }
+              };
+            })
           }
+          that.myChart.setOption({
+            geo: {
+              regions: [
+                ...seriesData,
+                {
+                  name: "南海诸岛",
+                  itemStyle: {
+                    // 隐藏地图
+                    normal: {
+                      opacity: 0, // 为 0 时不绘制该图形
+                    }
+                  },
+                  label: {
+                    show: false // 隐藏文字
+                  }
+                }
+              ]
+            },
+            series: [{
+              data: seriesData
+            }]
+          });
         });
       })
     },