Echart图标Y轴数据太长，显示错乱一般全为0解决办法

Echart图标Y轴数据太长，显示错乱一般全为0解决办法

场景描述：

Echart图表一般Y轴都是用来显示数字的，但是有时候数字特别大，几百万，几千万，这种往往显示就不全，导致全为0

正常显示效果：

正常显示效果

 

显示全为0：

问题原因：

主要是因为样式的问题，y轴距离左侧太近，装不小太长的数据引起的，由于echart是自己绘制canvas as 图形，样式这块不好修改。

可以改的地方有下面几个：

yAxis.axisLabel.margin：刻度标签与轴线之间的距离。默认值是8，可以改小一点。不过本来的值已经很小了，这个没多大作用。
yAxis.axisLabel.formatter：刻度标签的内容格式器，支持字符串模板和回调函数两种形式。比如可以设置太长了换行之类的。
grid.left：grid 组件离容器左侧的距离。默认值是10%。

解决思路：

既然样式不好解决，那就缩短数据长度。

我的做法就是数据太大就除以1万，特别大就除以一千万，然后数字显示样式这块加上‘万’字或者‘千万’

代码：

option = {
    ...
    yAxis: {
        type: 'value',
        name: '营业额(元)',
        axisTick: {
            inside: true
        },
        scale: true,
        axisLabel: {
            margin: 2,
            formatter: function (value, index) {
                if (value >= 10000 && value < 10000000) {
                    value = value / 10000 + "万";
                } else if (value >= 10000000) {
                    value = value / 10000000 + "千万";
                }
                return value;
            }
        },
    },
    grid: {
        left: 35
    },

最终效果：