Echarts饼图——图例格式化显示

使用legend配置项

	//图例组件
      legend: { 
        type: "scroll",//图例的类型。可选值：'plain'：普通图例。缺省就是普通图例。'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。
        orient: "vertical",//图例列表的布局朝向。
        left: "26",
        top: "26",
        icon: "circle",  
        itemHeight: 12, // 修改圆形小图标的大小
        textStyle: {
          // 文字的样式
          fontSize: 24, // 可控制每个legend项的间距
          color: "#828282",
          rich: {
            // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
            one: {
              width: 78,
              color: "rgba(0, 0, 0, 0.65)",
              fontSize: 14,
              fontWeight: "400",
            },
            borderBox: {
              width: 1,
              color: "#D9D9D9 ",
              marginRight: 0,
              fontSize: 14,
            },

            two: {
              borderLeft: "1",
              width: 60,
              color: "rgba(0, 0, 0, 0.45)",
              fontSize: 14,
            },
            three: {
              width: 30,
              color: "rgba(0, 0, 0, 0.65)",
              fontSize: 14,
            },
          },
        },
        formatter: (name) => {
          var total = 0; // 用于计算总数
          var target; // 遍历拿到数据
          for (var i = 0; i < this.chartData.length; i++) {
            total += this.chartData[i].value;
            if (this.chartData[i].name == name) {
              target = this.chartData[i].value;
            }
          }
          var v = ((target / total) * 100).toFixed(2);
          return `{one|${name}} {borderBox||} {two| ${v}%} {three|${target}}`;
          //     富文本第一列样式应用    富文本第二列样式应用      富文本第三列样式应用
        },
      },