echarts图例文字如何对齐

827 阅读1分钟

在做echarts图例的时候,我们经常会遇到图例中文字要求对齐,如下图:

image.png

但 经常我们做的是这样的,如下图:

image.png

由于图例后的文字长度不一,所以后面的百分比自然会根据前面的文字长度进行排列,但这样不是很美观,那么如何才能让他排列整齐呢,看代码:

image.png

我们只需要在legend的textStyle中添加rich属性,在rich中设置一个长度即可,然后

image.png

在formatter函数中应用上即可

完整代码

legend: {
                                icon: 'circle',
                                right: '10%',
                                top: '45%',
                                orient: 'vertical',
                                itemWidth: 8,
                                itemHeight: 8,
                                tooltip: {
                                    show: true,
                                },
                                data: ['30岁以下', '36-45岁', '36-45岁', '46-55岁', '56岁及以上', '流量经济', '共享经济'],
                                formatter: function (name) {
                                    let _arr = '';
                                    for (var i = 0; i < dataArr.length; i++) {
                                        if (dataArr[i].name == name) {
                                            _arr =
                                                ' {title|' +
                                                name +

                                                '}' +
                                                ' ' +
                                                '{percent|' +
                                                (dataArr[i].value / total * 100).toFixed(2) +
                                                '}%'
                                        }
                                    }
                                    return _arr;
                                },
                                textStyle: {
                                    lineHeight: 20,
                                    fontSize: 20,
                                    fontWeight: "bold",
                                    color: "#43464F",
                                    align: 'left',
                                    rich: {
                                        title: {
                                            color: 'rgba(129, 132, 137, 1)',
                                            fontSize: 14,
                                            width: 90,
                                        }
                                    },
                                },
                            },