<template>
  <div id="costPie" style="width: 100%; height: 100%;"></div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  watch: {
    data: {
      handler(newVal) {
        if(newVal) {
          this.myChart.clear()
          this.init()
        }
      },
      deep: true
    }
  },
  methods: {
    init() {
      let options = {
        grid: {
          x: 100
        },
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            radius: '60%', // 半径
            center: ['50%', '55%'],
            avoidLabelOverlap: false,
            labelLine: {
              show: true
            },
            itemStyle: {
              normal: {
                color: function (colors) { // 颜色设置
                  var colorList = ['rgb(112,182,3)', 'rgb(232,56,92)', 'rgb(123,0,255)', 'rgb(0,215,233)', 'rgb(255,255,160)', 'rgb(0,0,255)']
                  return colorList[colors.dataIndex]
                },
                label: {
                  formatter: '{b}:{c}'
                }
              },
              label: {
                show: false
              },
              emphasis: {
                label: {
                  show: true,
                  formatter: '{b}:{c}',
                  textStyle: {
                    fontSize: '12',
                  }
                },
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
            },
            data: this.data
          }
        ]
      };

      this.myChart.setOption(options)
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('costPie'));
    this.init()
  },
}
</script>
<style scoped>
  #costPie {
    width: 100%;
    height: 100%;
  }
</style>>
