<template>
  <div ref="charts" class="echarts">
  </div>
</template>
<script>
import * as echarts from "echarts";
import * as geo from "./geo_data";
import china from "./geojson.json";
import TitleContentMark from "../layout/title-content-mark.vue";
import SimpleCard from "../card/simple-card.vue";

export default {
  name: "mapPointMark",
  components: {geo, TitleContentMark, SimpleCard},
  data() {
    return {
      outdata: [],
      max: 8000,
      min: 10,
      maxSize4Pin: 150,
      minSize4Pin: 20,
      option: {}
    };
  },
  props: {
    derviceDis: []
  },
  methods: {
    convertData(outdata) {
      var res = [];
      for (var i = 0; i < this.outdata.length; i++) {
        var geoCoord = geo.geoCoordMap[this.outdata[i].name];
        if (geoCoord) {
          res.push({
            name: this.outdata[i].name,
            value: geoCoord.concat(this.outdata[i].value),
          });
        }
      }
      return res;
    },
    initData() {
      this.outdata = [];
      for (let i = 0; i < this.derviceDis.length; i++) {
        let province = this.derviceDis[i]['province']
        let count = this.derviceDis[i]['count']
        this.outdata.push({
          name: province,
          value: count
        })
      }
      const vm = this;
      this.option = {
        backgroundColor: '#020046',
        tooltip: {
          show: true,
          formatter: function (params) {
            if (params.value.length > 1) {
              return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value[2] + '&nbsp;&nbsp;';
            } else {
              return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value + '&nbsp;&nbsp;';
            }
          },

        },
        title: {
          top: 20,
          text: '',
          subtext: '',
          x: 'center',
          textStyle: {
            color: '#ccc'
          }
        },
        visualMap: {
          min: 0,
          max: 2000,
          left: 26,
          bottom: 90,
          showLabel: !0,
          text: ["高", "低"],
          textStyle: {
            color: "#ffffff",
            fontSize: 16
          },
          pieces: [{
            gte: 100,
            label: ">100",
            color: '#e81c00'
          }, {
            gte: 11,
            lt: 100,
            label: "11 - 100",
            color: '#fdc002'
          }, {
            gte: 1,
            lt: 10,
            label: "1 - 10",
            color: '#00cbfe'
          }],
          show: !0
        },
        geo: {
          map: 'china',
          layoutCenter: ['50%', '50%'],// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
          layoutSize: 100,
          zoom: 6.5,
          label: {
            normal: {
              show: true,//是否显示标签
              textStyle: {
                color: '#fff',
              },
            },
            emphasis: {
              textStyle: {
                color: '#fff',
              },
            },
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#082b7f' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#082b7f' // 100% 处的颜色
                }],
              },
              borderColor: '#68c7e7',
              borderWidth: 1,
            },
          }
        },
        series: [
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect: {
              brushType: 'stroke'
            },
            showEffectOn: 'render',
            itemStyle: {
              normal: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(5,80,151,0.2)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(5,80,151,0.8)'
                  }, {
                    offset: 1,
                    color: 'rgba(0,108,255,0.7)'
                  }],
                  global: false // 缺省为 false
                },
              }

            },
            label: {
              normal: {
                show: true,
                color: '#fff',
                fontWeight: 'bold',
                position: 'inside',
                formatter: function (para) {
                  return '{cnNum|' + para.data.value[2] + '}'
                },
                rich: {
                  cnNum: {
                    fontSize: 13,
                    color: '#D4EEFF',
                  }
                }
              },
            },
            symbol: 'circle',
            symbolSize: function (val) {
              if (val[2] === 0) {
                return 0;
              }
              var a = (vm.maxSize4Pin - vm.minSize4Pin) / (vm.max - vm.min);
              var b = vm.maxSize4Pin - a * vm.max;
              return a * val[2] + b * 1.2;
            },
            data: this.convertData(this.outdata),
            zlevel: 1,
          },
        ]
      }
    },
    refreshChart() {
      if (this.chart) {
        this.chart.setOption(this.option);
      } else {
        let chartDom = this.$refs.charts;
        this.chart = echarts.init(chartDom);
        echarts.registerMap('china', china);
        this.chart.setOption(this.option);
      }
      this.chart.resize;
    },
  },
  watch: {
    derviceDis(n, o) {
      console.log(JSON.stringify(this.derviceDis))
      this.initData()
      this.refreshChart();
    },
  },
  computed: {},
  mounted() {
    this.initData()
    this.refreshChart()
    //注意，第一个参数的名字必须和option.geo.map一致
    window.addEventListener('resize', this.chart.resize);
  }
};
</script>
<style scoped>

</style>
