<template>
  <div class="mod-demo-echarts">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div id="pieChart" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    title: {
      type: String,
    },
    dataList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    eType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      //testdata
      pieChart: {},
    };
  },
  mounted() {
    this.initChartLine();
  },
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.pieChart) {
      this.pieChart.resize();
    }
  },
  methods: {
    // 折线图
    initChartLine() {
      var option = {
        title: {
          text: this.title,
          left: "left",
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          top: "6%",
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: this.dataList?.map((item) => {
              const obj = {
                value: this.eType?item.problemTypeNumber:item.productTypeNumber,
                name: this.eType?item.problemTypeName:item.productTypeName,
              };
              return obj;
            }),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      this.pieChart = echarts.init(document.getElementById("pieChart"));
      this.pieChart.setOption(option);
      window.addEventListener("resize", () => {
        this.pieChart.resize();
      });
    },
  },
};
</script>

<style lang="scss">
.mod-demo-echarts {
  > .el-row {
    .el-col {
    }
  }
  .chart-box {
    min-height: 400px;
  }
}
</style>
