Echarts 饼图，legend样式美化

最后样式图：

实现代码：

var myChart = echarts.init(document.getElementById('container'));
              let option = {
                  /*{b}: {c} ({d}%*/
                  legend: {
                      orient: 'vertical',
                      icon: "circle",
                      itemWidth: 5,
                      right: 20,
                      top: 70,
                      formatter: (name) => {
                          let data = this.data;
                          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;
                              }
                          }
                          let arr = [
                              '{a|' + name + '}{b|' + target + '}{c|' + ((target / total) * 100).toFixed(2) + '%}'
                          ];
 
                          return arr.join('\n')
                      },
                      textStyle: {
                          rich: {
                              a: {
                                  verticalAlign: 'right',
                                  fontSize: 12,
                                  align: 'left',
                                  // padding:[0,28,0,0],
                                  width: 70
                              },
                              b: {
                                  fontSize: 12,
                                  align: 'left',
                                  // padding:[0,28,0,0],
                                  width: 50
 
                              },
                              c: {
                                  fontSize: 12,
                                  align: 'left',
                                  width: 50
                              }
                          }
                      },
                  },
                  // color:this.getRandomColor,
                  series: [
                      {
                          center: ['25%', '50%'],
                          name: '访问来源',
                          type: 'pie',
                          radius: ['50%', '60%'],
                          avoidLabelOverlap: true,
                          hoverOffset: 0,
                          hoverAnimation: false,
                          silent: true,
                          /*label: {
                              normal: {
                                  show: false,
                                  position: 'center'
                              }*/
                          label: {
                              show: true,
                              position: 'center',
                              textStyle: {
                                  fontSize: '20',
                                  fontFamily: '黑体',
                                  fontWeight: 'bold',
                                  rich: {
                                      d: {
                                          fontSize: 35,
                                          color: '#696969',
                                      },
                                      e: {
                                          fontSize: 17,
                                          color: '#696969',
                                          lineHeight: 25,
                                      }
                                  }
                              },
                              formatter: (params) => {
                                  let data = this.data;
                                  let number = 0;
                                  data.forEach((data) => {
                                      number += data.value;
                                  });
                                  return [
                                      '{d|' + number + '}\n' +
                                      '{e|影像数量}'
                                  ]
                              }
 
                              // emphasis: {
                              //     show: true,
                              //     textStyle: {
                              //         fontSize: '30',
                              //         fontWeight: 'bold'
                              //     }
                              // }
                          },
                          labelLine: {
                              normal: {
                                  show: false
                              }
                          },
                          data: this.data
                      }
                  ]
              };
              if (option && typeof option === "object") {
                  myChart.setOption(option, true);
              }

富文本标签

https://echarts.baidu.com/option.html#legend.textStyle.rich