1,如图所示,文字长度过长
2,网上很多解决办法是通过修改textStyle/rich,去修改width:
textStyle: {
rich:{
a: {
width: 11
},
},
}
但是不知道是版本原因,还是啥,我怎么改都没有用
3,最后用 的formatter解决的:
const dealWith = function(name:any){
const than = initData; //获取series中的data
let tarValue = 0;
for (let i = 0, l = than.length; i < l; i++) {
if (than[i].name == name) {
tarValue = than[i].value;
}
}
let str = '';
const len = name.length;
let mid = 4-len;
if(len>10){
name=name.slice(0,10)+'...';
}else{
mid = 10-len;
while(mid){
str+='\xa0\xa0\xa0';
mid--;
}
name = name+str;
}
}
return [`{a|${name + ' ' + ' ' + tarValue + '%'}}`].join('\n');
};
const option = {
legend: {
formatter:dealWith,
textStyle: {
rich:{
a: {
fontSize:16
}
}
}
}
}
4,以上的dealWith函数解决了三个问题,一个是图例文字样式问题,一个是图例文字过长添加省略号...,一个是图例文字长度不够添加空格。最后效果: