<!-- 地图 -->
<template>
  <div class="mapBox">
    <div class="chartsdom" id="3DMap"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: null,
      information: {},
    }
  },
  props: {
    getJson: {
      type: Object,
    },
  },
  async mounted() {
    this.getEchart()
  },
  methods: {
    getEchart() {
      let that = this
      let myChart = echarts.init(document.getElementById(`3DMap`))
      var geoJson = this.getJson;
      echarts.registerMap('HK', geoJson);
      var data = [], geoCoordMap = {};
      geoJson.features.forEach(function (v) {
        geoCoordMap[name] = v.properties.center; // 地区经纬度
        data.push({
          "name": v.properties.name,
          "value": 0
        })
      })

      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      };

      this.option = {
        tooltip: {
          show: false,
          trigger: 'item',
          formatter: function (params) {
            return params.name + "<br/>数量：" + params.value;
          }
        },
        visualMap: {
          show: false,
          seriesIndex: [0],
          inRange: {
            color: ['#02367C'],
          },
        },
        geo: [{
          show: true,
          map: "HK",
          zoom: 1.1,
          roam: false,
          itemStyle: {
            normal: {
              borderColor: "#48B6ED",
              borderWidth: 5,
            }
          }
        }],
        series: [
          {
            type: 'map',
            mapType: 'HK', //自定义扩展图表类型
            zoom: 1.1,
            roam: false,
            label: {
              normal: {
                show: true,
                formatter: '{b}',
                textStyle: {
                  color: "#fff"
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: "#fff"
                }
              }
            },
            itemStyle: {
              normal: {
                areaColor: "#02367C",
                borderColor: "#004096",
                borderWidth: 1,
              },
              emphasis: {
                areaColor: "#0057C9"
              }
            },
            data: data
          },
          {
            name: '点',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            showEffectOn: 'render',
            rippleEffect: {
              period: 10,
              scale: 4,
              brushType: 'fill'
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: '#ffc600',
                shadowBlur: 10,
                shadowColor: '#5d6a4f'
              }
            },
            label: {
              normal: {
                show: false,
                formatter: function (parm) {
                  return parm.value[2];
                },
                textStyle: {
                  color: '#fff',
                  fontSize: 12,
                }
              }
            },
            zlevel: 6,
            data: convertData(data)
          },
        ]
      }


      myChart.setOption(this.option)
      myChart.on(`click`, function (params) {
        console.log(params)

        const idx = params.dataIndex
        that.$emit(`toView`, params.data.name)
      })
    },
  },
}
</script>

<style lang="less" scoped>
.chartsdom {
  width: 980px;
  height: 760px;
  .chartsdom {
    width: 100%;
    height: 100%;
  }
}
</style>
