a

src/components/sellDashboard/map/viittoMap2.vue

+<template>
+  <div class="echarts" :style="{height:'110%',width:'110%'}">
+    <div :style="{height:'110%',width:'110%'}" ref="myEchart"></div>
+  </div>
+</template>
+<script>
+import echarts from "echarts";
+import "../../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
+export default {
+  name: "echarts",
+  props: ["userJson"],
+  data() {
+    return {
+      chart: null,
+      position: [-999999, -999999],
+      //活跃人数
+      ActivateList:[],
+      //不活跃人数
+      InActivateList:[],
+      myChart:{},
+      //SourceData:[]
+    };
+  },
+  mounted() {
+    this.bus.$on('addpoint',newArr=>{
+      //this.SourceData=newArr;
+      this.addPoint(newArr)
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+    
+  },
+  methods: {
+    addPoint(newArr){
+      var that = this;
+      that.InActivateList = [];//不活动
+      that.ActivateList = [];//活动
+      newArr[0].forEach(x => {
+          that.InActivateList.push({
+            name:x.City,
+            value:[x.Lng,x.Lat]
+          })
+      });
+      newArr[1].forEach(x => {
+            that.ActivateList.push({
+              name:x.City,
+              value:[x.Lng,x.Lat]
+            })
+      });
+      that.chinaConfigure();
+    },
+    chinaConfigure() {
+      this.myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位
+      window.onresize = this.myChart.resize;
+      this.myChart.setOption({
+        // 进行相关配置
+        backgroundColor: "transparent",
+        tooltip: { // 鼠标移到图里面的浮动提示框
+          showContent:false,
+        }, 
+        grid: {
+          left: "0",
+          right: "0",
+          top: "0",
+          bottom:'0'
+        },
+        geo: {
+          // 这个是重点配置区
+          map: "china", // 表示中国地图
+          roam: false,
+          label: {
+            normal: {
+              show: false, // 是否显示对应地名
+              textStyle: {
+                color: "rgba(0,0,0,0.4)"
+              }
+            },
+            emphasis: {//对应的鼠标悬浮效果
+              show: false
+            }
+
+          },
+          itemStyle: {
+            normal: {
+              areaColor: "#242B46", //地图本身的颜色
+              borderColor: "#151A30", //省份的边框颜色rgb(60,180,207)
+              borderWidth: 1, //省份的边框宽度
+              opacity: 0.8, //图形透明度
+              textStyle: {
+                color:"#242B46"
+              }
+            },
+            emphasis: {
+              areaColor: "#242B46", //高亮时候地图显示的颜色
+              shadowOffsetX: 0,
+              shadowOffsetY: 0,
+              borderWidth: 1,
+              opacity: 0,
+              borderColor: "#151A30"
+            }
+          }
+        },
+        series: [
+          {
+            // type: "effectScatter",
+            type:"scatter",
+            name: "", //series名称
+            coordinateSystem: "geo", // series坐标系类型
+            data: this.ActivateList,
+            symbol: "circle",
+            symbolSize: 4,
+            tooltip:this.tooltip,
+            //配置散点的颜色
+            itemStyle: {
+                normal: {
+                    shadowBlur: 2,
+                    shadowColor: '#FF75A1',
+                    color: '#FF75A1'
+                }
+            }
+          },
+          {
+            // type: "effectScatter",
+            type:"scatter",
+            name: "", //series名称
+            coordinateSystem: "geo", // series坐标系类型
+            data: this.InActivateList,
+            symbol: "circle",
+            symbolSize: 4,
+            tooltip:this.tooltip,
+            //配置散点的颜色
+            itemStyle: {
+                normal: {
+                    shadowBlur: 2,
+                    shadowColor: '#2a73fe',
+                    color: '#2a73fe'
+                }
+            }
+          }
+        ]
+      });
+    },
+  },
+  watch:{
+      // InActivateList: {
+      //   //深度监听，可监听到对象、数组的变化
+      //   handler: function (val, oldVal) {
+      //     if(val!=null && val.length>0)
+      //     {
+      //        console.log("aaa");
+      //        this.chinaConfigure();
+      //     }
+          
+      //   },
+      //   deep: true
+      // },
+      // ActivateList: {
+      //   //深度监听，可监听到对象、数组的变化
+      //   handler: function (val, oldVal) {
+      //     //==this.SourceData[1].length
+      //     if(val!=null && val.length>0)
+      //     {
+      //        console.log("bbb");
+      //        this.chinaConfigure();
+      //     }
+          
+      //   },
+      //   deep: true
+      // },
+  },
+};
+</script>