<template>
  <div :id="domId" style="height: 100%;"></div>
</template>

<script>
import { generateUUID } from '@/utils/index'
export default {
  name: 'pie-chart',
  props: {
    title: {
      type: String,
      default: ''
    },
    dataItem: {
      type: Array,
      default: () => {}
    }
  },
  data () {
    return {
      domId: generateUUID(),
      chart: null,
      option: {
        title: {
          text: this.title,
          top: '35%',
          left: 'center',
          textStyle: {
            fontSize: 12,
            fontWeight: 'normal',
            color: '#0D47A1'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '0%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['35%', '50%'],
            center: ['50%', '40%'],
            label: {
              alignTo: 'edge',
              formatter: '{name|{b}}\n{time|{c}}',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999'
                }
              }
            },
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 80
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x < 40
              const points = params.labelLinePoints
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width
              return {
                labelLinePoints: points
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data: []
          }
        ]
      }
    }
  },
  created () {
    this.option.series[0].data = this.dataItem
  },
  mounted () {
    this.initMap()
    this.chart.on('click', (param) => {
      this.$emit('click', param)
    })
  },
  methods: {
    initMap () {
      this.chart = this.$echarts.init(document.getElementById(this.domId), null, { renderer: 'svg' })
      this.chart.setOption(this.option)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
