no message

src/views/bigViews/dataView1/components/mapdata.vue

@@ -119,154 +119,146 @@ export default {
         // province:"广东省",
         // city: "广州市"
       }) {
-      var that = this
-      if (that.myChart) {
-        that.myChart.dispose();
-      }
-      bigGetRegion(pam).then(res => {
-        // 初始化 ECharts 实例
-        that.myChart = echarts.init(document.getElementById('chart_7'));
-        const geoJsonData = JSON.parse(res.data)
-        // 计算边界框
-        const boundingBox = calculateBoundingBox(geoJsonData);
-        // 计算中心点
-        const center = [
+        var that = this;
+        if (that.myChart) {
+          that.myChart.dispose();
+        }
+        bigGetRegion(pam).then(res => {
+          // 初始化 ECharts 实例
+          that.myChart = echarts.init(document.getElementById('chart_7'));
+          const geoJsonData = JSON.parse(res.data);
+          // 计算边界框
+          const boundingBox = calculateBoundingBox(geoJsonData);
+          // 计算中心点
+          const center = [
             (boundingBox.minX + boundingBox.maxX) / 2,
             (boundingBox.minY + boundingBox.maxY) / 2
-        ];
-        echarts.registerMap('china', geoJsonData);
-        // 指定城市和颜色
-        var cityColors = {}
-        this.getLarge9.map(name=>{
-          cityColors[name] = "#009eff"
-        });
-        // 构建 series 数据
-        var seriesData = Object.keys(cityColors).map(function (city) {
-          return {
-            name: city,
-            itemStyle: {
-              normal: {
-                areaColor: cityColors[city],
-                borderColor: 'rgba(0,0,0,0)'
-              },
-              emphasis: {
-                // 悬浮颜色
-                areaColor: cityColors[city],
-                borderColor: 'rgba(0,0,0,0)'
-              }
-            }
-          };
-        });
-        // 配置项
-        var option = {
-          tooltip: {
-            trigger: 'item',
-            formatter: '{b}'
-          },
-          geo: {
-            map: 'china',
-            roam: true,
-            zoom: pam.country ? 1.3 : pam.city ? 4.5 : pam.province ? 1.7 : 2, // 设置缩放比例
-            center: center,
-            itemStyle: {
-              normal: {
-                // 默认背景色
-                areaColor: 'rgba(0,0,0,0)',
-                // 边框颜色
-                borderColor: '#096DF3'
-              },
-              emphasis: {
-                // 默认背景色
-                areaColor: '#7024fb'
-              }
-            },
-            regions: [
-              ...seriesData,
-              {
-                name: "南海诸岛",
-                itemStyle: {
-                  // 隐藏地图
-                  normal: {
-                    opacity: 0, // 为 0 时不绘制该图形
-                  }
+          ];
+          echarts.registerMap('china', geoJsonData);
+          // 指定城市和颜色
+          var cityColors = {};
+          this.getLarge9.map(name => {
+            cityColors[name] = "#009eff";
+          });
+          // 构建 series 数据
+          var seriesData = Object.keys(cityColors).map(function (city) {
+            return {
+              name: city,
+              itemStyle: {
+                normal: {
+                  areaColor: cityColors[city],
+                  borderColor: 'rgba(0,0,0,0)'
                 },
-                label: {
-                  show: false // 隐藏文字
+                emphasis: {
+                  areaColor: cityColors[city],
+                  borderColor: 'rgba(0,0,0,0)'
                 }
               }
-            ]
-          },
-          series: [{
-            type: 'map',
-            map: 'china',
-            geoIndex: 0,
-            data: seriesData
-          }]
-        };
-        // 使用配置项生成图表
-        that.myChart.setOption(option);
-        // 鼠标点击事件
-        that.myChart.on('click', function (params) {
-          var cityName = params.name;
-          if (cityColors[cityName]) {
-            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({
+            };
+          });
+          // 配置项
+          var option = {
+            tooltip: {
+              trigger: 'item',
+              formatter: '{b}'
+            },
             geo: {
+              map: 'china',
+              roam: true,
+              zoom: pam.country ? 1.3 : pam.city ? 4.5 : pam.province ? 1.7 : 2, // 设置缩放比例
+              center: center,
+              itemStyle: {
+                normal: {
+                  areaColor: 'rgba(0,0,0,0)',
+                  borderColor: '#096DF3'
+                },
+                emphasis: {
+                  areaColor: '#7024fb'
+                }
+              },
               regions: [
                 ...seriesData,
                 {
                   name: "南海诸岛",
                   itemStyle: {
-                    // 隐藏地图
                     normal: {
-                      opacity: 0, // 为 0 时不绘制该图形
+                      opacity: 0,
                     }
                   },
                   label: {
-                    show: false // 隐藏文字
+                    show: false
                   }
                 }
               ]
             },
             series: [{
+              type: 'map',
+              map: 'china',
+              geoIndex: 0,
               data: seriesData
             }]
+          };
+          // 使用配置项生成图表
+          that.myChart.setOption(option);
+
+          // 监听点击事件
+          that.myChart.on('click', function (params) {
+            // 更新地区颜色
+            var updatedSeriesData = seriesData.map(function (item) {
+              if (item.name === params.name) {
+                return {
+                  name: item.name,
+                  itemStyle: {
+                    normal: {
+                      areaColor: 'red',
+                      borderColor: 'rgba(0,0,0,0)'
+                    },
+                    emphasis: {
+                      areaColor: 'none',
+                    }
+                  }
+                };
+              } else {
+                return {
+                  name: item.name,
+                  itemStyle: {
+                    normal: {
+                      areaColor: cityColors[item.name] || 'rgba(0,0,0,0)',
+                      borderColor: 'rgba(0,0,0,0)'
+                    },
+                    emphasis: {
+                      areaColor: 'none',
+                    }
+                  }
+                };
+              }
+            });
+
+            // 更新图表
+            that.myChart.setOption({
+              geo: {
+                regions: [
+                  ...updatedSeriesData,
+                  {
+                    name: "南海诸岛",
+                    itemStyle: {
+                      normal: {
+                        opacity: 0,
+                      }
+                    },
+                    label: {
+                      show: false
+                    }
+                  }
+                ]
+              },
+              series: [{
+                data: updatedSeriesData
+              }]
+            });
           });
         });
-      })
+
     },
   },
 };