<template>
  <div class="grid-chart" :id="id">

  </div>
</template>

<script>

import {copyObj, uuid} from '@/utils';
import * as echarts from 'echarts';

const basicSerie = {
  type: 'pie',
  radius: ['50%', '70%'],
  center: ['50%', '60%'],
  data: [],
};
const opts = {
  tooltip: {
    trigger: 'item',
  },
  legend: {
    top: 0,
    left: 'center',
  },
  emphasis: {
    itemStyle: {
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
  },
  label: {
    show: true,
    position: 'outside',
    formatter: '{c}' // 显示名称、值和百分比 {b}: {c} ({d}%)
  },
  labelLine: {
    show: true
  },
  series: [],
};
export default {
  props: {
    optCfg: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    optCfg: {
      handler(val) {
        this.initChart();
      },
      deep: true,
    },
  },
  data() {
    return {
      id: uuid(),
      refCharts: null,
    };
  },
  mounted() {
    this.$nextTick(this.initChart);
  },
  created() {
  },
  methods: {
    initChart() {
      this.refCharts && this.refCharts.clear();
      const chartDom = document.getElementById(this.id);
      this.refCharts = echarts.init(chartDom);
      const {series, ...rest} = this.optCfg
      const option = Object.assign({}, copyObj(opts), rest);
      series.forEach((item, index) => {
        const serie = copyObj(basicSerie);
        Object.assign(serie, item);
        option.series.push(serie);
      });
      option && this.refCharts && this.refCharts.setOption(option);
      this.refCharts.resize();
    },
  },
};
</script>
<style src="./index.scss" lang="scss"/>
