定制化开发echarts自定义legend样式

定制化开发最近要完成显示一个饼图，使用echarts组件，定制化开发先用官方给定的模板加载出样式，定制化开发然后修改为自定义的样式。定制化开发如下图是要自定义。

先放上官方加载出的代码

      this.chart.setOption({        title: {          text: "Filter request number distribution of different project",          textStyle: {            color: 'black',            fontWeight: 'bold'          }        },        tooltip: {          trigger: 'item'        },        legend: {       //对图形的解释部分          orient: 'vertical',          right: 10,          y: 'center'        },        series: [          {            name: 'Access From',            type: 'pie',            radius: ['55%', '70%'],            avoidLabelOverlap: false,            label: {              show: false,              position: 'center'            },            emphasis: {              label: {                show: true,                fontSize: '20',                fontWeight: 'bold'              }            },            labelLine: {              show: false            },            data: data // 需要加载的数据           }        ]      })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

对于需要加载的数据如下：

            data: [              { value: 1048, name: 'Search Engine' },              { value: 735, name: 'Direct' },              { value: 580, name: 'Email' },              { value: 484, name: 'Union Ads' },              { value: 300, name: 'Video Ads' }            ]
1
2
3
4
5
6
7

然后在此基础上进行修改。

1. 首先可以看到，图标默认是长方形，而需求是小圆点。
   
   在此处设置就可以变为小圆点
   
   如果需要其它图标，可以参看下图
   

2. 接着就是右边一段文字到三段文字的显示，不止要展示出name，还要展示出百分比和数量。
   这个就要用到legend.formatter进行设置，还要用到legend.textStyle. rich，在 rich 里面，可以自定义富文本样式，使三列文字的中间那一列展示为灰色，两边文字为黑色。
   具体官网样式设置教程：

具体分析过程如下：
首先把文字分为3段，a表示name，b表示百分比， c表示value数量。
然后在textStyle里设置各自的样式，设置后的代码如下，注意备注【添加】的地方是主要更改

      this.chart.setOption({        title: {          text: 'Filter request number distribution of different project',          textStyle: {            color: 'black',            fontWeight: 'bold'          }        },        tooltip: {          trigger: 'item'        },        legend: { // 对图形的解释部分          orient: 'vertical',          right: 10,          y: 'center',          icon: 'circle',			// 添加          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              }            }            var arr = [              '{a|' + name + '}',              '{b|' + ((target / total) * 100).toFixed(2) + '%}',              '{c|' + target + '}'            ]            return arr.join('  ')          },          textStyle: {	// 添加            padding: [8, 0, 0, 0],            rich: {              a: {                fontSize: 15,                width: 110              },              b: {                fontSize: 15,                width: 70,                color: '#c1c1c1'              },              c: {                fontSize: 15              }            }          }        },        series: [          {            name: 'Access From',            type: 'pie',            radius: ['55%', '70%'],            center: ['30%', '50%'],            avoidLabelOverlap: false,            label: {              show: false,              position: 'center'            },            emphasis: {              label: {                show: true,                fontSize: '20',                fontWeight: 'bold'              }            },            labelLine: {              show: false            },            data: data          }        ]      })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

最后加载出的样式如图

大功告成！