chore: 地图色块

app/src/views/Home/components/MapCharts.vue

@@ -293,22 +293,16 @@ export default {
     },
     mapHeatData: {
       handler(val) {
-      // const maxValue = (Math.max(val.map(item => parseFloat(item.value))) / 5)
-      // console.log('11111', val.map(item => item.value), maxValue)
-        if (val.length > 0) {
+      if (val.length > 0) {
           this.mapChart.setOption({
             series: [
               {
-                data: val.map(item => ({...item, 
-                  label: {
-                    color: item.value > 100 ? '#fff' : '#000'
-                  },
-                  // itemStyle: {
-                  //   color: this.itemColor(item.value, maxValue)
-                  // }
-              }))
+                data: this.convertMapData(val)
               }
-            ]
+            ],
+            visualMap: {
+              max: this.calcMaxData(val)
+            }
           })
         }
       },
@@ -326,12 +320,21 @@ export default {
     }
     this.activeMapData = array;
   },
-
   mounted() {
     this.drawMap();
   },
-
   methods: {
+    convertMapData(data) {
+      const maxValue = (this.calcMaxData(data) / 5)
+      return data.map(item => ({...item,
+          label: {
+            color: item.value < maxValue * 3 ? '#000' : '#fff'
+          }
+        }))
+    },
+    calcMaxData(data) {
+      return Math.max(...data.map(item => item.value))
+    },
     convertData(data) {
       let res = [];
 
@@ -353,44 +356,13 @@ export default {
 
       return res;
     },
-    itemColor(val, max) {
-      if (val < max) {
-          return "#e0f3f8";
-        } else if (val < max * 2) {
-          return "#abd9e9";
-        } else if (val < max * 3) {
-          return "#74add1";
-        } else if (val < max * 4) {
-          return "#4575b4";
-        } else {
-          return "#313695";
-        }
-    },
     drawMap() {
       const mapChart = this.$refs.map;
       echarts.registerMap("chongqing", this.activeMap);
-
-      // const maxValue = Math.max(this.heatData.map(item => parseFloat(item.value))) / 5
-
-          //     '#313695',
-          //     '#4575b4',
-          //     '#74add1',
-          //     '#abd9e9',
-          //     '#e0f3f8'
-      
-      let data = this.heatData.map(item => ({...item, 
-        label: {
-          color: item.value > 100 ? '#fff' : '#000'
-        },
-        // itemStyle: {
-        //   color: this.itemColor(item.value, maxValue)
-        // }
-    }));
+      let data = this.heatData
 
       const { mapName } = this;
 
-      // const zoom = 1.27;
-      // const aspectScale = 1.2;
       const zoom = 1.27;
       const aspectScale = 1.1;
 
@@ -403,7 +375,6 @@ export default {
             color: "#ccc",
           },
         },
-
         geo: [
           {
             map: mapName,
@@ -421,7 +392,6 @@ export default {
                 shadowColor: "#6FFDFF",
                 shadowOffsetY: 0,
                 shadowBlur: 10,
-                // areaColor: 'rgba(29,85,139,.6)',
               },
             },
           },
@@ -507,12 +477,9 @@ export default {
             },
           },
         ],
-
         tooltip: {
           trigger: "item",
-          // position: "inside",
           position: "top",
-          // backgroundColor: "rgba(51,204,204,0)",
           backgroundColor: "rgba(51,204,204,0.8)",
           formatter: this.formatter,
           textStyle: {
@@ -522,8 +489,10 @@ export default {
         },
         visualMap: {
           show: true,
+          type: 'piecewise',
           bottom: 20,
-          left: 10,
+          right: 50,
+          max: this.calcMaxData(data),
           inRange: {
             color: [
               '#313695',
@@ -532,6 +501,7 @@ export default {
               '#abd9e9',
               '#e0f3f8'
             ].reverse(),
+            // symbolSize: [60, 200]
           },
           calculable: true,
           textStyle: {
@@ -576,10 +546,8 @@ export default {
             itemStyle: {
               normal: {
                 color: "#fff",
-                // borderColor: '#a6eeff',
                 borderColor: "#75b9da", // 地图边缘线颜色
-                borderWidth: 2,
-                // areaColor: "#0f417f",
+                borderWidth: 2
               },
 
               emphasis: {
@@ -617,13 +585,13 @@ export default {
             layoutCenter: ["50%", "50%"],
             layoutSize: "100%",
             map: mapName, // 使用
-            data: data,
+            data: this.convertMapData(data),
           },
         ],
       };
       this.mapChart = echarts.init(mapChart, "light");
       this.mapChart.setOption(option);
-    toolUtils.autoHover(this.mapChart, option, 24, 2000);
+    // toolUtils.autoHover(this.mapChart, option, 24, 2000);
       // 图表对象响应式设置
       window.addEventListener("resize", () => {
         this.mapChart.resize();