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;
},

这样设置的好处是左侧不会因为数据过大而一度扩展表格左侧宽度。

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐