echart如何设置自定义的图例

背景描述：在使用echart绘制图表时，会因为客户的需求而要做一些特殊效果的图例。

解决办法：利用echart的富文本样式 rich属性来自定义一些效果，然后利用格式化文本属性 formatter来返回一些自定义的效果；

代码如下：

var rich = {
                yellow: {
                    color: "#FFEF3B",
                    fontSize: 25,
                    padding: [1.5, 0],
                    align: 'center'
                },
                yellow2: {
                    color: "#FFEF3B",
                    fontSize: 20,
                    padding: [1.5, 0],
                    align: 'center'
                },
                white: {
                    color: "#E0E0E0",
                    align: 'center',
                    fontSize: 15,
                    padding: [1.5, 0]
                },
                red: {
                    color: '#EF3E5A',
                    fontSize: 25,
                    align: 'center'
                },
                red2: {
                    color: '#EF3E5A',
                    fontSize: 20,
                    align: 'center'
                }
            }

legend: {
                    orient: 'vertical',
                    top: '12%',
                    left: '50%',
                    itemGap: 15,
                    data: data_name,
                    icon: 'square',
                    textStyle: {
                        color: "rgba(187, 229, 235, 1)",
                        fontSize: 16,
                        rich: rich
                    },
                    formatter: function(name) {//这里的name表示图例中的元素名称
                        for(var i in json) {//对图例数组进行遍历
                            var str1;//定义一个文本变量
                            if(json[i].name == '新批合同外资' & json[i].name == name) {//对每个图例进行自定义编辑
                                str1 = name + "\n{yellow|" + json[i].value1 + '}\t万美元\n同比增长{yellow2|' + json[i].value2 + '}\t%';
                                break;
                            } else {
                                str1 = name + "\n{red|" + json[i].value1 + '}\t万美元\n同比增长{red2|' + json[i].value2 + '}\t%';
                            }
                        }
                        return str1;
                    }
                }

总结：在进行自定义的时候个人建议只针对图例元素的名称和该元素的值进行编辑，其余的文本内容可以结合echart的graphic属性来编辑效果会更好。

效果如下：