Echarts 图例相关样式

Question

现在需求：

我所做出来的效果跟需求不符，问如何做成上面的效果，下面是我现在效果和部分代码：

Echarts的option配置项代码：

 let option = {
        title: {},
        tooltip: {},
        legend: {
          orient: "vertical",
          left: "right",
          align: "left",
          formatter: (name) => {
            const percent = this.pieEcharts.pieData.filter(
              (item) => item.name === name
            )[0].percent;
            const txt = this.pieEcharts.pieData.filter(
              (item) => item.name === name
            )[0].txt;
            return `${name} ${txt} ${percent}`;
          },
        },
        series: [
          {
            type: "pie",
            right: "20%",
            data: this.pieEcharts.pieData.map((item) => {
              return {
                value: item.value,
                name: item.name,

                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                      { offset: 1, color: item.startColor },
                      { offset: 0, color: item.endColor },
                    ]),
                  },
                },
              };
            }),
            hoverAnimation: false, //滑动动画
            label: {
              //指示牌
              show: false,
            },
            labelLine: {
              //删除指示线
              show: false,
            },
          },
        ],
      };

求如何做成最上面的样式

Answer 1

icon可以改变样式

legend: {
  icon: 'rect'
}