<template>
  <div id="typePie"></div>
</template>

<script>
import { getPieType } from "@/api/largeSize";
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  methods: {
    getList() {
      getPieType().then((res) => {
        let list = [];
        for (let key in res.result) {
          list.push(res.result[key]);
        }
        this.initPie(list);
      });
    },
    initPie(list) {
      let _this = this;
      var myChart = echarts.init(document.getElementById("typePie"));
      var level = list;
      var data = [
        {
          value: level[0],
          name: "	药物非临床检查员",
        },
        {
          value: level[1],
          name: "药物临床检查员",
        },
        {
          value: level[2],
          name: "药品生产检查员",
        },
        {
          value: level[3],
          name: "药品流通检查员",
        },
        {
          value: level[4],
          name: "医疗器械临床检查员",
        },
        {
          value: level[5],
          name: "医疗器械生产检查员",
        },
        {
          value: level[6],
          name: "医疗器械流通检查员",
        },
        {
          value: level[7],
          name: "化妆品研制检查员",
        },
        {
          value: level[8],
          name: "化妆品生产检查员",
        },
      ];
      var colorList = [
        "#0E7CF4",
        "#91CC75",
        "#FAC858",
        "#EE6666",
        "#36BBB0",
        "#91CC75",
        "#FAC858",
        "#EE6666",
        "#36BBB0",
      ];
      let option = {
        legend: {
          orient: "vertical",
          x: "50%",
          y: "center",
          itemWidth: this.getFontSize(100),
          itemHeight: this.getFontSize(120),
          itemGap: 4,
          align: "left",
          textStyle: {
            color: "#333333",
            fontSize: _this.getFontSize(170),
          },
          formatter: (params) => {
            const dataAll = data.map((item) => Number(item.value));
            const total = dataAll.reduce(
              (x, y) => parseInt(x, 10) + parseInt(y, 10)
            );
            const value = Number(
              data.filter((item) => item.name === params)[0].value
            );
            return ` ${params}：${value}%`;
          },
        },
        series: [
          {
            type: "pie",
            radius: ["48%", "65%"],
            center: ["25%", "50%"],
            label: {
              show: false,
              normal: {
                // formatter: '{c}',
                position: "inside",
                formatter: (params) => {
                  // return  params.name + '\n' + params.value+'%'
                  return params.value + "%";
                },
                fontSize: 12,
              },
            },
            data: data,
            minAngle: 10,
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex];
                },
                label: {
                  show: false,
                  color: "#fff",
                },
                labelLine: {
                  show: false,
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option, true);
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
#typePie {
  height: 100%;
  width: 100%;
}
</style>
