<template>
  <div style="width:100%;height: 160px;"/>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    chartData: {
      type: Array,
      required: true
    },
    colorList: {
      type: Array,
    }
  },
  data() {
    return {
      chart: null,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el)
      this.setOptions(this.chartData)
    },
    setOptions() {
      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '<br/>{b} : {c} ({d}%)'
        },
        series: [{
          type: 'pie',
          radius: ['40%', '90%'],
          color: this.colorList,
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: 'inside',
            formatter: '{d}%',
            fontSize: '12',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '12',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: this.chartData
        }]
      })
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
}
</script>

<style lang="scss" scoped>

</style>
