From 8e198bf5713fdfe893d0f73e7614059947780b8e Mon Sep 17 00:00:00 2001
From: timeroute <chinesejar@outlook.com>
Date: Fri, 2 Sep 2022 20:02:47 +0800
Subject: [PATCH] Fixed recreate echart instance and Update options

---
 src/view/pc/mapFans.vue  | 117 ++++++++++++++++-----------------------
 src/view/pc/mapForce.vue |  24 ++++----
 2 files changed, 59 insertions(+), 82 deletions(-)

diff --git a/src/view/pc/mapFans.vue b/src/view/pc/mapFans.vue
index dc03de9..267dd2d 100644
--- a/src/view/pc/mapFans.vue
+++ b/src/view/pc/mapFans.vue
@@ -63,43 +63,38 @@ export default {
     },
   },
   methods: {
-    convertData(data) {
+    convertData() {
       var res = []
       if (this.optionList.length > 0) {
+        const [lng1, lat1] = this.cityObj.gps;
         res = this.optionList.map(it => {
-          return [
-            {
-              coord: this.cityObj.gps,
-            },
-            {
-              coord: it.value,
-              name: it.city,
-              value: it.uv,
-            }
-          ]
+          const [lng2, lat2] = it.value;
+          return {
+            name: it.city,
+            value: it.uv,
+            coords: [[lng1, lat1], [lng2, lat2]]
+          }
         })
       }
       return res
     },
     setEchartOption() {
-      this.myEchart = echarts.init(document.getElementById("china_map"));
-      echarts.registerMap('chinas', chinaJson);
+      if (!this.myEchart) {
+        echarts.registerMap('chinas', chinaJson);
+        this.myEchart = echarts.init(document.getElementById("china_map"));
+      }
       var series = [
         {
           type: 'scatter', //样试
           coordinateSystem: 'geo', //该系列使用的坐标系
           data: this.cityData,
-          label: {
-            formatter: "{b}",
-            position: "",
-            show: true,
-
-          },
           //标记的大小,可以设置数组或者函数返回值的形式
-          symbolSize: function (val) {
+          symbolSize: function () {
             return 0;
           },
-          hoverAnimation: false, //鼠标移入放大圆
+          emphasis: {
+            scale: false,
+          },
           tooltip: {
             show: false
           },
@@ -107,15 +102,12 @@ export default {
             value: 10
           },
           showEffectOn: "render",
-          hoverAnimation: false, // 动画
           label: {
             formatter: "{b}",
             position: "",
             show: true,
-            textStyle: { //图例文字的样式
-              color: '#fff',
-              fontSize: 12
-            },
+            color: '#fff',
+            fontSize: 12
           },
           zlevel: 1
         },
@@ -133,25 +125,23 @@ export default {
             color: '#FFB932', // 图标颜色
           },
           lineStyle: {
-            normal: {
-              show: true,
-              width: 1, //尾迹线条宽度
-              opacity: .8, //尾迹线条透明度
-              curveness: 0.2, //尾迹线条曲直度
-              color: new echarts.graphic.LinearGradient(0,1,1,0,
-                [
-                  {
-                    offset: 1,
-                    color: "#FFB932",
-                  },
-                  {
-                    offset: 0,
-                    color: "#26FFF3",
-                  },
-                ],
-              ),
-              // color: '#26FFF3', // 飞线颜色
-            },
+            show: true,
+            width: 1, //尾迹线条宽度
+            opacity: .8, //尾迹线条透明度
+            curveness: 0.2, //尾迹线条曲直度
+            color: new echarts.graphic.LinearGradient(0,1,1,0,
+              [
+                {
+                  offset: 1,
+                  color: "#FFB932",
+                },
+                {
+                  offset: 0,
+                  color: "#26FFF3",
+                },
+              ],
+            ),
+            // color: '#26FFF3', // 飞线颜色
           },
           data: this.convertData(),
         },
@@ -167,8 +157,8 @@ export default {
             scale: 6, //波纹圆环最大限制，值越大波纹越大
             color: '#0CB5AD',
           },
-          label: {
-            normal: {
+          emphasis: {
+            label: {
               show: false,
               position: 'right', //显示位置
               offset: [5, 0], //偏移设置
@@ -178,9 +168,6 @@ export default {
               },
               fontSize: 13,
             },
-            emphasis: {
-              show: false,
-            },
           },
           symbol: 'circle',
           symbolSize: function (val) {
@@ -203,10 +190,8 @@ export default {
            
           },
           itemStyle: {
-            normal: {
-              show: false,
-              color: '#0CB5AD',
-            },
+            show: false,
+            color: '#0CB5AD',
           },
           data: this.optionList,
         },
@@ -222,17 +207,11 @@ export default {
             color: '#FFB932',//圆环颜色
           },
           label: {
-            normal: {
-              show: true,
-              position: 'bottom',
-              //offset:[5, 0],
-              color: '#FFB932',
-              formatter: '{b}',
-              textStyle: {
-                color: '#fff',
-                fontSize: 12,
-              },
-            },
+            color: '#fff',
+            fontSize: 12,
+            show: true,
+            position: 'bottom',
+            //offset:[5, 0],
             // emphasis: {
             //   show: false,
             //   color: '#FFB932',
@@ -260,11 +239,9 @@ export default {
           center: this.type === 'wap' ?this.cityObj.gps||[116.40529, 39.904987]:[120.40529, 35.904987],
           silent: 'move', // 拖拽以及缩放
           itemStyle: {
-            normal: {
-              areaColor: '#1E2F56', // 地图颜色
-              borderColor: '#33547E', // 地图边界颜色
-              borderWidth: .5
-            }
+            areaColor: '#1E2F56', // 地图颜色
+            borderColor: '#33547E', // 地图边界颜色
+            borderWidth: .5
           },
         },
         scaleLimit:{                       //所属组件的z分层，z值小的图形会被z值大的图形覆盖
diff --git a/src/view/pc/mapForce.vue b/src/view/pc/mapForce.vue
index efb228f..30b581f 100644
--- a/src/view/pc/mapForce.vue
+++ b/src/view/pc/mapForce.vue
@@ -114,8 +114,10 @@ export default {
       return res;
     },
     setEchartOption() {
-      this.myEchart = echarts.init(document.getElementById("china_map"));
-      echarts.registerMap('chinas', chinaJson);
+      if (!this.myEchart) {
+        echarts.registerMap('chinas', chinaJson);
+        this.myEchart = echarts.init(document.getElementById("china_map"));
+      }
       var that = this
       var option = {
         geo: {
@@ -125,11 +127,9 @@ export default {
           center: this.type === 'wap'?[104.40529, 24.904987]:[120.40529, 35.904987], // 地图中心点
           silent: 'move', // 拖拽以及缩放
           itemStyle: {
-            normal: {
-              areaColor: '#1E2F56', // 地图颜色
-              borderColor: '#33547E', // 地图边界颜色
-              borderWidth: .5
-            }
+            areaColor: '#1E2F56', // 地图颜色
+            borderColor: '#33547E', // 地图边界颜色
+            borderWidth: .5
           },
           scaleLimit:{                       //所属组件的z分层，z值小的图形会被z值大的图形覆盖
             min:0.8,                          //最小的缩放值
@@ -210,15 +210,15 @@ export default {
               value: 10
             },
             showEffectOn: 'render',
-            hoverAnimation: true,
+            emphasis: {
+              scale: true,
+            },
             label: {
               formatter: '{b}',
               position: 'left',
               show: true,
-                  textStyle: { //图例文字的样式
-                            color: '#fff',
-                            fontSize: 13
-                        },
+              color: '#fff',
+              fontSize: 13
             },
             itemStyle: {
               color: '#549AD7',
-- 
GitLab