echarts tooltip标签内容对齐

时间:2021-10-10 09:02:05

先上图:

echarts tooltip标签内容对齐

tooltip内容获取方法:formatter : function(params) {
var res = params[0].name;

res += '<br/>'
+ params[0].seriesName
+ '&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;'
+ params[0].value;
res += '<br/>'
+ params[1].seriesName
+ '&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;'
+ params[1].value;
res += '<br/>'
+ params[2].seriesName
+ '&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;'
+ params[2].value + '%';

return res;
}


由于tooltip中多个连续半角空格会缩进为一个,而且采用&nbsp也很麻烦,需要计算和截取长度。所以采用全角空格是最好的,不会被缩进,因此可以将数据转换为全角再去截取那样宽度就一致了

function n2c(n) {
var s = n.toString().split(''), r = '';
for (var i = 0, length = s.length; i < length; i++) {
if(s[i] === '.'){
r += '.' ;
}else{
r += '0123456789'.split('')[s[i]];
}
}
return r;
}