asd

src/components/sellDashboard/map/viittoMap.vue

 <template>
-  <div class="echarts" :style="{height:'100%',width:'100%'}">
-    <div :style="{height:'100%',width:'100%'}" ref="myEchart"></div>
-    <div v-for="(item, index) in points" :key="index" class="jiaoyidian" :style="{left:(item[0]-5)+'px',top:(item[1]-5)+'px'}"></div>
+  <div class="echarts" :style="{height:'110%',width:'110%'}">
+    <div :style="{height:'110%',width:'110%'}" ref="myEchart"></div>
+    <div v-if="isShow" v-for="(item, index) in points" :key="index" class="viittoHot" :style="{left:(item[0]-5)+'px',top:(item[1]-5)+'px'}"></div>
+    <div v-for="(item, subIndex) in ActivateList" :key="subIndex+50000" class="viittoActive" :style="{left:(item[0]-5)+'px',top:(item[1]-5)+'px'}"></div>
   </div>
 </template>
 <script>
@@ -11,19 +12,26 @@ import "../../../../node_modules/echarts/map/js/china.js"; // 引入中国地图
 import BMap from 'BMap';
 export default {
   name: "echarts",
-  props: ["userJson"],
+  props: ["userJson","dataArea","InActiveLen"],
   data() {
     return {
       chart: null,
       position: [-999999, -999999],
       points:[],
-      myChart:{}
+      //活动人数
+      ActivateList:[],
+      myChart:{},
+      isShow:false,
     };
   },
   mounted() {
+    console.log(this.InActiveLen,'InActiveLen');
     this.bus.$on('addpoint',addTradeInfo=>{
       this.addPoint(addTradeInfo)
     })
+    this.bus.$on('addActivePoint',addTradeInfo=>{
+      this.ActivePoint(addTradeInfo)
+    })
     this.chinaConfigure();
   },
   beforeDestroy() {
@@ -37,9 +45,9 @@ export default {
   methods: {
     chinaConfigure() {
       var myData = [
-        // { name: "1", value: [121.15, 31.89, 90] },
-        // { name: "2", value: [109.781327, 39.608266, 70] },
-        // { name: "3", value: [120.38, 37.35, 42] },
+        //{ name: "北京", value: [116.413384, 39.910925] },
+        //{ name: "重庆", value: [106.54041, 29.40268] },
+        // { name: "北京", value: [120.38, 37.35, 42] },
         // { name: "4", value: [122.207216, 29.985295, 23] },
         // { name: "5", value: [110.245672, 30.7787677, 20] }
       ];
@@ -48,7 +56,9 @@ export default {
       this.myChart.setOption({
         // 进行相关配置
         backgroundColor: "transparent",
-        tooltip: {}, // 鼠标移到图里面的浮动提示框
+        tooltip: { // 鼠标移到图里面的浮动提示框
+          showContent:false,
+        }, 
         dataRange: {
           min: 0,
           max: 100,
@@ -103,28 +113,24 @@ export default {
         series: [
           {
             type: "scatter",
-            coordinateSystem: "geo", // 对应上方配置
-            markPoint: this.markPoint
-          },
-          {
-            name: "交易数据", //series名称
-            type: "scatter", //为散点类型
+            markPoint: this.markPoint, 
+            name: "", //series名称
             coordinateSystem: "geo", // series坐标系类型
-            data: myData,
+            data: this.dataArea,
             symbol: "circle",
-            symbolSize: [10, 10],
-            animation: true
+            symbolSize: [5, 5],
+            animation: false,
+            tooltip:this.tooltip,
+            silent: false
           }
         ]
       });
-      
     },
     addPoint(param){
-      console.log(param)
+      console.log(param);
       let ad=param.address?param.address:param.city
       var myGeo = new BMap.Geocoder();
       var that=this
-      console.log(ad)
       myGeo.getPoint(ad, function(point){
         if (point) {
           var geo = that.myChart.getModel().getComponent('geo').coordinateSystem;
@@ -134,52 +140,52 @@ export default {
             that.points.splice(0,1)
           }
         }
-	    })
+      })
+      console.log(that.points.length,'that.points.length');
+      console.log(that.InActiveLen,'that.points.length');
+
+      if(that.points.length==that.InActiveLen){
+        that.isShow=true;
+        console.log(that.points,'points');
+      }
     },
+    //获取活跃人数
+    ActivePoint(param){
+      let ad=param.address?param.address:param.city
+      var myGeo = new BMap.Geocoder();
+      var that=this
+      myGeo.getPoint(ad, function(point){
+        if (point) {
+          var geo = that.myChart.getModel().getComponent('geo').coordinateSystem;
+          let coord = that.myChart.convertToPixel("geo", [point.lng, point.lat]);
+          that.ActivateList.push(coord);
+          if(that.ActivateList.length>100){
+            that.ActivateList.splice(0,1)
+          }
+        }
+      })
+    }
+
   }
 };
 </script>
 <style>
-.jiaoyidian {
+.viittoHot {
   position: absolute;
   z-index: 5;
   color: #fff;
-  width: 10px;
-  height: 10px;
+  width: 5px;
+  height: 5px;
   background: #2a73fe;
   border-radius: 100%;
-  box-shadow: 0 0 30px #2a73fe;
-  animation-timing-function: ease-in-out;
-  animation-name: breathe;
-  animation-duration: 5000ms;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-.canpingsee {
-  position: absolute;
-  z-index: 5;
-  color: #fff;
-  width: 10px;
-  height: 10px;
-  background: #2a9e9e;
-  border-radius: 100%;
-  box-shadow: 0 0 30px #2a9e9e;
-  animation-timing-function: ease-in-out;
-  animation-name: breathe;
-  animation-duration: 5000ms;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
 }
-@-webkit-keyframes breathe {
-  0% {
-    box-shadow: 0 0 20px inherit;
-    opacity: 0;
-  }
-  100% {
-    box-shadow: 0 1px 30px inherit;
-    opacity: 1;
-    width: 10px;
-    height: 10px;
-  }
+.viittoActive{
+    position: absolute;
+    z-index: 5;
+    color: #fff;
+    width: 5px;
+    height: 5px;
+    background: #FF75A1;
+    border-radius: 100%;
 }
 </style>

src/views/index.vue

@@ -260,7 +260,7 @@ export default {
     },
     connec(){
       let _this=this
-      let url = 'http://dataapi.oytour.com/data_server'
+      let url = 'http://47.96.23.199:5000/data_server'
       // let url = 'http://192.168.2.215:5000/data_server'
       let userInfo = this.getLocalStorage()
       // if (userInfo) {
@@ -331,7 +331,8 @@ export default {
     },
     init(){
       // this.apipost('')
-      let url='http://dataapi.oytour.com/api/user/get_init_data'
+      //let url='http://dataapi.oytour.com/api/user/get_init_data'
+      let url='http://47.96.23.199:5000/api/user/get_init_data'
       let msg={
         tdsourcetag:'s_pcqq_aiomsg'
       }