<template>
  <div ref="rtPieChart" :id="id" class="chart"></div>
</template>

<script>
export default {
  name: 'rtPieChart',
  props: {
    id: {
      type: String,
      default: 'pieChart'
    },
    pieChartLegend: {
      type: Array,
      default: []
    },
    pieChartSeriesData: {
      type: Array,
      default: []
    },
    toolTipFormatter: {
      type: String,
      default: ''
    },
    formatter: {
      type: Function
    }
  },
  methods: {
    loadChart() {
      const myChart = this.$echarts.init(document.getElementById(this.id));
      const option = {
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: 'center',
          bottom: 10,
          height: 90,
          icon: 'circle',
          data: this.pieChartLegend,
          itemHeight: 10,
          textStyle: {
            fontSize: 12,
            color: '#555555'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: this.toolTipFormatter
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '30%'],
            radius: ['35%', '50%'],
            data: this.pieChartSeriesData,
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            }
          }
        ]
      };
      if (!rt.isNull(this.formatter)) {
        option.legend.formatter = this.formatter;
      }
      myChart.clear();
      myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
.chart {
  width: 330px;
  height: 250px;
}
</style>
