<template>
  <div :id="id" :style="{ width: width, height: height }"></div>
</template>

<script>
import { chartOption } from "@/views/analyse/custom/mixins";

export default {
  mixins: [chartOption],
  name: "CMap",
  data() {
    return {
      id: 'map',
      map: {
        name: '全球',
        data: {}
      }
    }
  },
  async mounted() {
    this.$api.getMapData({ path: `/map/${this.map.name}.json` }).then(response => {
      this.map.data = response.data
      this.$echarts.registerMap(this.map.name, this.map.data)
      this.initChart(this.id, this.getOption())
    })
  },
  methods: {
    getOption() {
      let max = 0, x = this.selected.x, data = [], nameMap = {}
      for (let i = 0; i < x.length; i++) {
        const value = this.getDataCount(x[i])
        data.push({
          name: x[i],
          value: value
        })
        if (value > max) {
          max = value
        }
      }
      return {
        visualMap: {
          min: 0,
          max: max,
          calculable: true,
          orient: 'horizontal',
          left: 'center',
          show: false,
        },
        series: [
          {
            name: '',
            type: 'map',
            map: this.map.name,
            roam: true,
            label: this.getDataLabel(),
            itemStyle: {
              borderWidth: 0
            },
            data: data,
            nameMap: nameMap
          }
        ]
      }
    },
  }
}
</script>
