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

文章摘自：https://blog.csdn.net/YPJMFC/article/details/78979319，非常感谢大牛分享。

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

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



一个个看：

1.两个变量
formatter有两种形式： 
- 模板 
- 回调函数

模板

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

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

回调函数

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

我们在返回时可以对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) + '%';
}


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
        }
    }
}

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} <br/>{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;
    }

}
其实大神上面的数据还是有点问题，按照大神这样做的话，饼状图的百分比和算出来的有一点点出入(算出来的值加起来不够百分百)，其实就是最后一项的百分比和饼状图的不一样，其他的都一样，所以，我自己修改了几个小时，终于把它完善了（主要是绿色的代码），代码如下：

this.dateEchart.setOption({

color:['#4BC373','#4178E8','#FF5B57'],

             tooltip: {

trigger: 'item',

formatter: "{a} <br/>{b}: {c} ({d}%)"

},

legend: {

orient: 'vertical',

right:'10%',

top:'40%',

data:['微信支付','支付宝网上支付','银行支付'],

formatter:(name)=>{

let target,count;

let total=0,num=0;

let l=this.data2.length;

for(var i=0;i<l;i++){

total+=this.data2[i].value;

}

for(i=0;i<l;i++){

if((this.data2[i].name==name)&&(i<l-1)){

target=this.data2[i].value;

count=((target/total)*100).toFixed(2)+'%';

return name+': '+count;

}

if((this.data2[i].name==name)&&(i==l-1)){

for(i=0;i<l-1;i++){

num+=parseFloat((((this.data2[i].value)/total)*100).toFixed(2));

}

let yy=(100-num).toFixed(2);

return name+': '+yy+'%';

}

}

}

},

series: [

{

name:'访问来源',

type:'pie',

radius: ['40%', '60%'],

center:['40%','50%'],

avoidLabelOverlap: false,

label: {

normal: {

show: false,

position: 'center'

},

emphasis: {

show: true,

textStyle: {

fontSize: '30',

fontWeight: 'bold'

}

},

},

labelLine: {

normal: {

show: false

}

},

data:this.data2

}

]

         });