【可视化】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;
},

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