<script>

import * as echarts from "echarts";

export default {

  name: "PieChart",

  props:['reportList'],

  data() {

    return {

      pieList: {},

    };

  },

  mounted() {

    var myChart = echarts.init(document.getElementById("pie"));

    this.pieList = JSON.parse(JSON.stringify(this.reportList));

    // 只显示华东的饼图

    this.pieList.series.splice(1);

    // 标题

    this.pieList.title = { text: "华东数据" };

    // 触摸提示 提示框浮层内容格式器formatter

    // 饼图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

    this.pieList.tooltip = {formatter: '{a}<br />{b}: {c} ({d}%)'};

    // 图例位置

    this.pieList.legend.top = "10%";

    this.pieList.legend.left = "0";

    // 修改图表类型

    this.pieList.series[0].type = "pie";

    // 把图例除了华东都删除

    this.pieList.legend.data.splice(1);

    // 拿到时间和数值，整合数据格式，展示线对应的名字

    let nameList = this.pieList.xAxis[0].data;

    let valueList = this.pieList.series[0].data;

    let newArr = [];

    nameList.forEach((r, i) => {

      let obj = {

        name: r,

        value: valueList[i],

      };

      newArr.push(obj);

    });

    this.pieList.series[0].data = newArr;

    // 设置圆心、半径大小

    this.pieList.series[0].radius = ["10%", "50%"];

    // 设置饼图上下左右位置

    this.pieList.series[0].center = ["50%", "60%"];

    // 形状玫瑰

    this.pieList.series[0].roseType = "area";

    // 设置圆角

    this.pieList.series[0].itemStyle = {

      borderRadius: 5,

    };

    // 隐藏xy轴

    this.pieList.xAxis = {

      show: false,

    };

    this.pieList.yAxis = {

      show: false,

    };

    // 绘制图表

    myChart.setOption(this.pieList);

    window.PieChart = myChart;

  },

};

</script>