Fixed recreate echart instance and Update options

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,
+          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"));
+      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,16 +102,13 @@ export default {
             value: 10
           },
           showEffectOn: "render",
-          hoverAnimation: false, // 动画
           label: {
             formatter: "{b}",
             position: "",
             show: true,
-            textStyle: { //图例文字的样式
             color: '#fff',
             fontSize: 12
           },
-          },
           zlevel: 1
         },
         {
@@ -133,7 +125,6 @@ export default {
             color: '#FFB932', // 图标颜色
           },
           lineStyle: {
-            normal: {
             show: true,
             width: 1, //尾迹线条宽度
             opacity: .8, //尾迹线条透明度
@@ -152,7 +143,6 @@ export default {
             ),
             // color: '#26FFF3', // 飞线颜色
           },
-          },
           data: this.convertData(),
         },
         {
@@ -167,8 +157,8 @@ export default {
             scale: 6, //波纹圆环最大限制，值越大波纹越大
             color: '#0CB5AD',
           },
+          emphasis: {
             label: {
-            normal: {
               show: false,
               position: 'right', //显示位置
               offset: [5, 0], //偏移设置
@@ -178,9 +168,6 @@ export default {
               },
               fontSize: 13,
             },
-            emphasis: {
-              show: false,
-            },
           },
           symbol: 'circle',
           symbolSize: function (val) {
@@ -203,11 +190,9 @@ export default {
            
           },
           itemStyle: {
-            normal: {
             show: false,
             color: '#0CB5AD',
           },
-          },
           data: this.optionList,
         },
         //中心点
@@ -222,17 +207,11 @@ export default {
             color: '#FFB932',//圆环颜色
           },
           label: {
-            normal: {
+            color: '#fff',
+            fontSize: 12,
             show: true,
             position: 'bottom',
             //offset:[5, 0],
-              color: '#FFB932',
-              formatter: '{b}',
-              textStyle: {
-                color: '#fff',
-                fontSize: 12,
-              },
-            },
             // 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
-            }
           },
         },
         scaleLimit:{                       //所属组件的z分层，z值小的图形会被z值大的图形覆盖

src/view/pc/mapForce.vue

@@ -114,8 +114,10 @@ export default {
       return res;
     },
     setEchartOption() {
-      this.myEchart = echarts.init(document.getElementById("china_map"));
+      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
-            }
           },
           scaleLimit:{                       //所属组件的z分层，z值小的图形会被z值大的图形覆盖
             min:0.8,                          //最小的缩放值
@@ -210,16 +210,16 @@ export default {
               value: 10
             },
             showEffectOn: 'render',
-            hoverAnimation: true,
+            emphasis: {
+              scale: true,
+            },
             label: {
               formatter: '{b}',
               position: 'left',
               show: true,
-                  textStyle: { //图例文字的样式
               color: '#fff',
               fontSize: 13
             },
-            },
             itemStyle: {
               color: '#549AD7',
               shadowBlur: 10,