echart饼图 图例自定义

echart饼图 图例自定义

方法：

getDate() {
      let data = [
        { value: 40, name: "rose 1" },
        { value: 38, name: "rose 2" },
        { value: 32, name: "rose 3" },
        { value: 30, name: "rose 4" },
      ];
      const option = {
        legend: {
          right: "30",
          y: "center",
          icon: "circle",
          orient: "vertical",
          itemWidth: 6, // 图例icon宽度
          formatter: function (name) {
            // 添加
            let total = 0;
            let target;
            for (let i = 0; i < data.length; i++) {
              total += data[i].value;
              if (data[i].name === name) {
                target = data[i].value;
              }
            }
            return (
              "{a|" +
              target +
              "}  {a|" +
              ((target / total) * 100).toFixed(2) +
              "%}\n{b|" +
              name +
              "} {b|" +
              "占比" +
              "}"
            );
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 18,
                lineHeight: 20,
                width: 50,
                color: "black",
               fontWeight:600,
              },
              b: {
                fontSize: 12,
                lineHeight: 20,
                width: 50,
                color: "black",
              },
            },
          },
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [50, 180],
            center: ["40%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 0,
            },
            data: data,
          },
        ],
      };
      //初始化
      let chart = document.getElementById(this.id);

      if (echarts.getInstanceByDom(chart)) {
        echarts.dispose(echarts.getInstanceByDom(chart));
      } //解决重复dom警告问题
      const chartObj = echarts.init(chart);
      chartObj.setOption(option, true);
      window.addEventListener("resize", () => {
        chartObj.resize();
      }); //根据屏幕宽度自适应
      chartObj.on("click", (params) => {
		//自定义单击事件
      });
    },