<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>
</template>
<script>
import echarts from "echarts";
//   import '../../node_modules/echarts/map/js/world.js'
import "../../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
import BMap from 'BMap';
export default {
  name: "echarts",
  props: ["userJson"],
  data() {
    return {
      chart: null,
      position: [-999999, -999999],
      points:[],
      myChart:{}
    };
  },
  mounted() {
    this.bus.$on('addpoint',addTradeInfo=>{
      this.addPoint(addTradeInfo)
    })
    this.chinaConfigure();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
    
  },
  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: "4", value: [122.207216, 29.985295, 23] },
        // { name: "5", value: [110.245672, 30.7787677, 20] }
      ];
      this.myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
      window.onresize = this.myChart.resize;
      this.myChart.setOption({
        // 进行相关配置
        backgroundColor: "transparent",
        tooltip: {}, // 鼠标移到图里面的浮动提示框
        dataRange: {
          min: 0,
          max: 100,
          calculable: true,
          color: ["#ff3333", "orange", "yellow", "lime", "aqua"],
          itemWidth: 15, //调整左侧彩条的大小。
          itemHeight: 100,
          y: "center",
          textStyle: {
            color: "#fff"
          },
          show: 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)"
              }
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#11172f", //地图本身的颜色
              borderColor: "#44c4ed", //省份的边框颜色rgb(60,180,207)
              borderWidth: 1, //省份的边框宽度
              opacity: 0.8, //图形透明度
              textStyle: {
                show: false
              }
            },
            emphasis: {
              areaColor: "rgb(60,180,207)", //高亮时候地图显示的颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgb(60,180,207)"
            }
          }
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo", // 对应上方配置
            markPoint: this.markPoint
          },
          {
            name: "交易数据", //series名称
            type: "scatter", //为散点类型
            coordinateSystem: "geo", // series坐标系类型
            data: myData,
            symbol: "circle",
            symbolSize: [10, 10],
            animation: true
          }
        ]
      });
      
    },
    addPoint(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;
          let coord = that.myChart.convertToPixel("geo", [point.lng, point.lat]);
          that.points.push(coord);
          if(that.points.length>100){
            that.points.splice(0,1)
          }
        }
	    })
    },
  }
};
</script>
<style>
.jiaoyidian {
  position: absolute;
  z-index: 5;
  color: #fff;
  width: 10px;
  height: 10px;
  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;
  }
}
</style>
