echar扇形图

//
const industriaOutputEcharts = (data: any) => {
  let datas = data.map((item: any) => {
    return {
      value: Number(item.indicatorValue),
      name: item.indicatorDescription,
      proportion: item.proportion,
    };
  });
  setPieEcharts("industrial-output-echarts", "", datas);
};
//绘制图
const setPieEcharts = (id: string, title: string, data: any) => {
  let myChart = echarts.getInstanceByDom(document.getElementById(id)!);
  if (myChart == null) {
    myChart = echarts.init(document.getElementById(id)!);
  }
  // var myChart = echarts.init(document.getElementById(id)!);

  let resObj: any = {};
  let sum = 0;
  for (var i = 0; i < data.length; i++) {
    sum += data[i].value;
    resObj[data[i]["name"]] = data[i];
  }
  var colorList = ["#1990FE", "#F9DA55", "#975fe5", "#F47A8F", "#707ED4"];
  let option = {
    color: colorList,
    title: title
      ? {
          text: title,
          subtext: sum,
          x: "17%",
          y: "35%",
          padding: [10, 0],
          textStyle: {
            color: "rgba(86, 88, 93, 1)",
            fontSize: 16,
            align: "center",
          },
          subtextStyle: {
            color: "rgba(6, 14, 29, 1)",
            fontSize: 16,
          },
        }
      : null,
    tooltip: {
      trigger: "item",
      formatter: function (parms) {
        var str = parms.name + "</br>" + parms.marker + parms.value + "(亿元)";
        return str;
      },
    },
    legend: {
      icon: "circle",
      top: "center",
      left: "56%",
      itemWidth: 10,
      formatter: (name: string) => {
        return `{name|${name}}\n{value|${resObj[name].value}(亿元)（${
          // id === "industrial-output-echarts"
          //   ? "增速" + resObj[name].proportion
          //   : "占比" + resObj[name].proportion
          "占比" + resObj[name].proportion
        }）}`;
      },
      textStyle: {
        fontSize: 10,
        rich: {
          name: {
            color: "#56585d",
            fontSize: 10,
          },
          value: {
            color: "#060e1d",
            fontWeight: 600,
            fontSize: 10,
            fontFamily: "HuaKang",
            padding: [6, 0, 0, 0],
          },
        },
      },
    },
    series: [
      {
        name: "",
        type: "pie",
        center: ["24%", "50%"],
        radius: ["0%", "60%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: false,
          },
        },
        labelLine: {
          show: false,
        },
        data: data,
      },
    ],
  };
  nextTick(() => {
    myChart.setOption(option);
  });
};