<template>
  <div :id="id" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {
    id: {
      type: String,
      default: 'chart',
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '400px',
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chart: null,
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    setOption(data, option = {}) {
      this.chart.setOption({
        color: ['#3A74F2', '#52DD75', '#FFC22A', '#D72AFF', '#552AFF', '#FF2A5A', '#FF6F30', '#FFA882', '#FFD1BD', '#FFEAE1'],
        tooltip: {
          show: option.tooltipShow,
          trigger: 'item',
        },
        legend: {
          show: false,
        },
        series: [
          {
            name: this.title,
            type: 'pie',
            radius: option.radius || ['100%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 5,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: option.labelShow,
              position: 'outside',
            },
            tooltip: option.tooltip || {},
            labelLine: {
              show: true,
            },
            data: data,
          },
        ],
      })
      this.chart.on('select',(a) => {
        this.$emit('select', a.dataIndexInside)
      });
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
    },
    dispatchAction(index) {
      this.chart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
      })
      this.chart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: index
      })
      this.chart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: index
      })
    }
  },
}
</script>