在做echarts图例的时候,我们经常会遇到图例中文字要求对齐,如下图:
但 经常我们做的是这样的,如下图:
由于图例后的文字长度不一,所以后面的百分比自然会根据前面的文字长度进行排列,但这样不是很美观,那么如何才能让他排列整齐呢,看代码:
我们只需要在legend的textStyle中添加rich属性,在rich中设置一个长度即可,然后
在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,
}
},
},
},