地图数据颜色

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

ui/dv/AiLinkageMap.vue

@@ -19,18 +19,26 @@ export default {
           type: "piecewise",
           splitNumber: 8,
           min: 0,
-          max: 800,
+          max: 8000,
+          maxOpen: true,
           inRange: {
-            color: ["#0CDEE9", "#0BD0DA", "#0BC1D5", "#0BACC1", "#0993AE", "#076C88", "#064E6B", "#054261"].reverse()
-          },
-          outOfRange: {
-            color: "#25EDF4"
+            color: [
+              "#25EDF4",
+              "rgba(12,222,233,0.9)",
+              "rgba(11,208,218,0.81)",
+              "rgba(11,193,213,0.72)",
+              "rgba(11,172,193,0.63)",
+              "rgba(9,147,174,0.54)",
+              "rgba(7,108,136,0.45)",
+              "rgba(6,78,107,0.36)",
+              "rgba(5,66,97,0.27)"].reverse()
           },
+          outOfRange: {color: "#25EDF4"},
           textStyle: {
             color: "#fff"
           },
           calculable: true
-        }
+        },
       },
       dialog: false,
       detail: [],
@@ -54,7 +62,11 @@ export default {
     getData(type = "530300000000") {
       return this.compData.getData({type}).then(res => {
         const json = JSON.parse(res.param)
-        this.geoData = json.map
+        if (type == "530300000000") {
+          this.geoData = json.map
+          this.$refs.map.chart?.setOption({series: {data: this.mapData}})
+          console.log(this.$refs.map.chart?.getOption()?.series)
+        }
         this.config.summaryConfigs = json.sta?.map((e, i) => ({pos: ["rt", "lb", 'lt', 'rb'][i % 4], display: "summary20", ...e})) || []
       })
     },