【可视化】echarts的y坐标轴内容太长导致显示不全的处理方案
·
y坐标轴内容太长会导致内容显示不全,本文总结了一些处理该问题的解决方案。
方案一:让内容完全显示
在grid中做如下配置y坐标上的内容就会展示全了。
grid: {
left: "2%",
containLabel: true
},
方案二:让内容部分显示
坐标上的内容是文字时,y坐标轴的内容太长后会导致显示不全。如果只调整grid会导致短数据前的留白过多,影响可视化的整体效果。
解决办法:
在yAxis中的axisLabel中加入以下属性配置:
yAxis: {
inverse: true,
data: axisData,
axisLabel: {
width: '60', // 将内容的宽度固定
overflow: 'truncate', // 超出的部分截断
truncate: '...', // 截断的部分用...代替
}
},
方案三:优化y坐标上的数字
如果在数据特别大的情况下,左边数据占得位置就会越来越宽,导致布局不好看,所以我们可以对这种数字进行处理一下
在yAxis的axisLabel属性中进行配置formatter
formatter(value) {
var newValue = value;
var k = 10000, sizes = ['', '万', '亿', '万亿'], i;
if(value < k){
newValue = value
unit = ''
}else{
i = Math.floor(Math.log(value) / Math.log(k));
newValue = ((value / Math.pow(k, i))).toFixed(2);
unit = sizes[i];
}
return newValue + unit;
},
这样设置的好处是左侧不会因为数据过大而一度扩展表格左侧宽度。
更多推荐
已为社区贡献4条内容
所有评论(0)