<template>
  <!-- 地区分布统计 -->
  <div class="mapChartPage">
    <div ref="mapChart" class="mapChart" />
  </div>
</template>

<script>
import { chinaMap } from '@/views/active/map.js'
import ChartOption from './module.js'
export default {
  props: {
    cityData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      chart: new ChartOption('mapChart')
    }
  },
  watch: {
    cityData: {
      handler (nVal, oVal) {
        this.setOptions(this.chart.chart, nVal)
      },
      deep: true
    }
  },
  mounted () {
    this.initChart(this.chart)
  },
  methods: {
    // 访问分布情况
    initChart (chartObj) {
      chartObj.chart = this.$echarts.init(this.$refs[chartObj.name])
      this.$echarts.registerMap('mymap', chinaMap)
      this.setOptions(chartObj.chart, this.cityData)
    },
    setOptions (chart, data) {
      chart.setOption({
        title: {
          text: '访问分布情况 ',
          left: 'left'
        },
        tooltip: {
          trigger: 'item',
          showDelay: 0,
          transitionDuration: 0.3,
          formatter: (params) => {
            if (params.value) {
              return (
                params.seriesName + '<br/>' + params.name + ' : ' + params.value
              )
            } else {
              return params.seriesName + '<br/>' + params.name + ' : ' + '0'
            }
          }
        },
        series: [
          {
            name: '访问量',
            type: 'map',
            zoom: 1.3,
            roam: true,
            map: 'mymap',
            emphasis: {
              label: {
                show: true
              }
            },
            // 文本位置修正
            textFixed: {
              Alaska: [20, -20]
            },
            data
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.mapChartPage{
  width: 100%;
  height: 100%;
  .mapChart{
    width: 100%;
    height: 100%;
  }
}
</style>
