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

<script>
import { getPieCj } from "@/api/largeSize";
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  methods: {
    getList() {
      getPieCj().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("hierarchy"));
      var level = list;
      var data = [
        {
          value: level[0],
          name: "省级",
        },
        {
          value: level[1],
          name: "国家级",
        },
      ];
      var colorList = ["#0E7CF4", "#91CC75"];
      let option = {
        legend: {
          orient: "vertical",
          x: "50%",
          y: "center",
          itemWidth: this.getFontSize(75),
          itemHeight: this.getFontSize(100),
          itemGap: 20,
          borderRadius: 10,
          align: "left",
          textStyle: {
            color: "#333333",
            fontSize: _this.getFontSize(140),
          },
          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>
#hierarchy {
  height: 100%;
  width: 100%;
}
</style>
