Echarts中折线图Y轴数据值太长显示不全-解决办法

正常状态

不全的情况

所有的数据都是从后台取的，也就是说动态变化的，一开始的时候数据量不大不会出现问题，后面y轴的值越来越大的时候就出现了这个显示不全的情况

代码

 <div id="chart-line"></div>
 
 
 var lineChart = echarts.init(document.getElementById('chart-line'));

// 折线图配置
option = {
    tooltip: {
        trigger: 'axis',
        hideDelay: '300'
    },
    xAxis: {
        show: false,
        type: 'category',
        data: [1, 2, 3, 4, 5, 6, 7],
        axisTick: {
            inside: true,
            alignWithLabel: true
        }
    },
    yAxis: {
        type: 'value',
        name: '营业额(元)',
        axisTick: {
            inside: true
        },
        scale: true
    },
    series: [{
        name: '营业额',
        type: 'line',
        data: [1100000, 2000000, 450000, 1370000, 1200000, 4030000, 2350000], // 因为是要分析的是前端问题，这里我就直接写一组很大的数据了，不管跟后台交互部分
        lineStyle: {
            normal: {
                color: '#82c26b'
            }
        },
        itemStyle: {
            normal: {
                color: '#82c26b'
            }
        }
    }]
};

lineChart.setOption(option);

官网API

我们要看的是配置项的部分：Documentation - Apache ECharts(incubating)

 

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

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

最后的代码如下。这里就只列出修改了的部分了，比原来添加了 grid.left 和 yAxis.axisLabel

 

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