echarts中关于自定义legend图例文字

首先看一张echarts饼图:

这张图很好做，根本不值得提，但是用过echarts的可能会发现这个图例有点不一样，做这个图例花了我好几个小时去查，去试。结合一下echarts中legend图例的特质我们分析一下一些难点：

1.这里的图例文本包含两个变量，而formatter提供的变量模板只有name
2.两个变量的样式各不相同
3.对齐，换行与居中的应用
1
2
3

一个个看：

1.两个变量

formatter有两种形式：
- 模板
- 回调函数

模板

使用字符串模板，模板变量为图例名称 {name}
formatter: 'Legend {name}'
1
2

这种想要修改name的值，暂时我做不到，欢迎读者指正

回调函数

使用回调函数
formatter: function (name) {
    return 'Legend ' + name;
}
1
2
3
4

我们在返回时可以对name进行修改，从而返回我们需要的值，初步改动是这样：

var data = [
    {value:40, name:'货币'},
    {value:20, name:'股票'},
    {value:40, name:'债券'}
]
formatter:  function(name){
    var total = 0;
    var target;
    for (var i = 0, l = data.length; i < l; i++) {
    total += data[i].value;
    if (data[i].name == name) {
        target = data[i].value;
        }
    }
    return name + ' ' + ((target/total)*100).toFixed(2) + '%';
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.两种样式

想自定义图例文字样式，就要用到富文本：rich，但是在官方文档中看到的只有模板形式的富文本样式配置，由1知用模板很难实现自定义name，所以只能用回调函数形式，采用富文本的形式对name进行改造：

formatter:  function(name){
    var total = 0;
    var target;
    for (var i = 0, l = data.length; i < l; i++) {
    total += data[i].value;
    if (data[i].name == name) {
        target = data[i].value;
        }
    }
    var arr = [
        '{a|'+((target/total)*100).toFixed(2)+'%}',
        '{b|'+name+'}',
    ]
    return arr.join('\n')
},
textStyle:{
    rich:{
        a:{
            fontSize:20,
            verticalAlign:'top',
            align:'center',
            padding:[0,0,28,0]
        },
        b:{
            fontSize:14,
            align:'center',
            padding:[0,10,0,0],
            lineHeight:25
        }
    }
}
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

3.对齐，换行与居中

为了图例与第一行文字对齐，需要设置两个样式的padding，把文字顶到合适的位置，然后为了上下行的间隔，设置了第2行文字的行高，最终呈现了上面图片的效果。不知道是不是有点地方做烦了，但是能最终实现自己想要的效果，很有成就感。

4.实例

这是完整的组件：

class ConfigChart extends Component {

    constructor(props) {
        super(props);
        this.state = {};
    };
    getOption = () => {
        var data = [
            {value:40, name:'货币'},
            {value:20, name:'股票'},
            {value:40, name:'债券'}
        ]
        const option = {
            tooltip : {
                trigger: 'item',
                formatter: "{a} 
{b} : {c} ({d}%)"
            },
            // formatter:  function(name){

            //     var total = 0;
            //     var target;
            //     for (var i = 0, l = data.length; i < l; i++) {
            //     total += data[i].value;
            //     if (data[i].name == name) {
            //     target = data[i].value;
            //     }
            //     }
            //     return name + ' ' + ((target/total)*100).toFixed(2) + '%';
            // },

            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: [50, 80],
                    center: ['50%', '40%'],
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data: [
                        {
                            value: 40,
                            name: '货币',
                            itemStyle: { normal: { color: "#5877F0" } }
                        },
                        { value: 20, name: '股票', itemStyle: { normal: { color: "#AA9FFD" } } },
                        { value: 40, name: '债券', itemStyle: { normal: { color: "#F96481" } } }
                    ]
                }
            ],
            legend: {
                x: 'center',
                // y: 'bottom',
                bottom:5,
                itemGap:30,
                itemWidth:5,
                textStyle:{
                    fontSize: 12
                },
                align:'left',
                data: [
                    {
                        name:'货币',
                        icon:'circle'
                    },
                    {
                        name:'股票',
                        icon:'circle'
                    },{
                        name:'债券',
                        icon:'circle'
                    }
                ],
                // formatter:'{a|{name}}\n{name}',
                formatter:  function(name){
                    var total = 0;
                    var target;
                    for (var i = 0, l = data.length; i < l; i++) {
                    total += data[i].value;
                    if (data[i].name == name) {
                        target = data[i].value;
                        }
                    }
                    var arr = [
                        '{a|'+((target/total)*100).toFixed(2)+'%}',
                        '{b|'+name+'}',
                    ]
                    // return name + ' ' + ((target/total)*100).toFixed(2) + '%';
                    return arr.join('\n')
                },
                textStyle:{
                    rich:{
                        a:{
                            fontSize:20,
                            verticalAlign:'top',
                            align:'center',
                            padding:[0,0,28,0]
                        },
                        b:{
                            fontSize:14,
                            align:'center',
                            padding:[0,10,0,0],
                            lineHeight:25
                        }
                    }
                }
            },
            backgroundColor: "#fff"
        };
        return option;
    };
    render() {
        const _this = this;
        const { isShow } = this.props;
        return isShow ?
            <div className={StyleClass.configChartWrapper}>
                <ReactEcharts
                    option={_this.getOption()}
                    echarts={echarts}
                    style={{ height: '265px', width: $.width() }}
                    className='react_for_echarts' />
            div> : null;
    }

}
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

总结

类似的自定义也可以用到很多其它的标签文字中。