地图数据颜色

ui/dv/AiDvMap.vue

@@ -18,7 +18,6 @@ export default {
   data() {
     return {
       chart: null,
-      geo: null
     }
   },
   directives: {
@@ -52,15 +51,6 @@ export default {
   mounted() {
     this.$load(this.$refs.dvMap).then(() => this.initChart())
   },
-  watch: {
-    data: {
-      deep: true, handler(v) {
-        this.chart.setOption({
-          geo: [{data: v}]
-        })
-      }
-    }
-  },
   methods: {
     onDomResize() {
       this.$nextTick(() => {
@@ -74,12 +64,9 @@ export default {
         text: "数据加载中...", textColor: "#fff",
         maskColor: 'rgba(0, 0, 0, 0.2)'
       })
-      Promise.all([
-        this.getData(this.geoJson).then(res => this.geo = res?.data),
-        // waitFor(this.data)
-      ]).then(() => {
-        if (!!this.geo) {
-          echarts.registerMap('customMap', this.geo)
+      this.getData(this.geoJson).then(res => {
+        if (!!res?.data) {
+          echarts.registerMap('customMap', res.data)
           const option = {
             geo: [
               // 重影
@@ -107,48 +94,49 @@ export default {
                   },
                 }
               }),
-              {
-                map: "customMap",
-                aspectScale: 1,
-                zoom: 0.65,
-                layoutCenter: ["50%", "50%"],
-                layoutSize: "180%",
+            ],
+            series: {
+              type: "map",
+              map: "customMap",
+              aspectScale: 1,
+              zoom: 0.65,
+              layoutCenter: ["50%", "50%"],
+              layoutSize: "180%",
+              show: true,
+              roam: false,
+              selectedMode: 'single',
+              emphasis: {
                 show: true,
-                roam: false,
-                selectedMode: 'single',
-                emphasis: {
-                  show: true,
-                  label: {
-                    textStyle: {
-                      color: "#FFFFFF"
-                    },
-                  },
-                  itemStyle: {
-                    areaColor: '#02C6DC'
-                  }
-                },
-                select: {
-                  label: {
-                    color: "#fff"
-                  },
-                  itemStyle: {
-                    areaColor: '#02bcff29'
-                  }
-                },
                 label: {
-                  show: true,
-                  color: '#fff',
-                  fontSize: 22
+                  textStyle: {
+                    color: "#FFFFFF"
+                  },
                 },
                 itemStyle: {
-                  borderColor: "rgba(2, 198, 220, 1)",
-                  borderWidth: 2,
-                  areaColor: "#02bcff29",
-                  shadowBlur: 120,
-                },
-                data: this.data
+                  areaColor: '#02C6DC'
+                }
               },
-            ],
+              select: {
+                label: {
+                  color: "#fff"
+                },
+                itemStyle: {
+                  areaColor: '#02bcff29'
+                }
+              },
+              label: {
+                show: true,
+                color: '#fff',
+                fontSize: 22
+              },
+              itemStyle: {
+                borderColor: "rgba(2, 198, 220, 1)",
+                borderWidth: 2,
+                areaColor: "#02bcff29",
+                shadowBlur: 120,
+              },
+              data: this.data
+            },
             ...this.ops
             // geo3D: {
             //   map: "customMap",
@@ -179,7 +167,7 @@ export default {
             // },
           }
           this.chart.setOption(option)
-          this.chart.on('click', evt => this.$emit("click", {...evt, info: this.geo.features.find(e => e.properties?.name == evt.name)?.properties}))
+          this.chart.on('click', evt => this.$emit("click", {...evt, info: res.data.features.find(e => e.properties?.name == evt.name)?.properties}))
           this.chart.on('globalout', () => this.$emit("globalout"))
         }
         return 1