[vue]vue中自定义图例文字

工作中遇到需要自定义图例文字的需求，大概思路是需要使用rich进行样式设定，然后再使用formatter方法进行自定义设置。
rich的设置如下：

textStyle: {
               rich: {
                   a: {
                       verticalAlign: 'top',
                       align: 'center',
                       padding: 0,
                       color: '#fff',
                       backgroundColor: '#21dac0',
                       borderRadius: 2
                   },
                   b: {
                       align: 'center',
                       color: '#fff'
                   },
                   c: {
                       color: 'grey'
                   }
               }
           },

formatter方法的设置如下：

formatter: function(name) {
                let rate, useClass, areaClass;
                for (var i = 0, l = data.classRate.length; i < l; i++) {
                    if (data.classArea[i] == name) {
                        rate = data.classRate[i];
                        useClass = data.classuseQuantity[i];
                        areaClass = data.classArea[i]
                        if (areaClass.length > 3) {
                            areaClass = areaClass.substr(0, 3) + '...'
                        } else {
                            areaClass = areaClass
                        }
                    }
                }
                let arr = [
                    '{a|' + rate + '%}',
                    '{b|' + areaClass + '}',
                    '{c|使用班级}',
                    '{b|' + useClass + '}',
                    '{c|班}'
                ]
                return arr
            }

大概思路是需要使用rich设置样式之后，在arr中使用模板字符串方法将内容设置为arr的项，然后在将arr给return出去即可。