Echarts 折线图y轴标签值太长时显示不全的解决办法

• 问题
• 分析
• 解决办法

 

---

问题

先看一下正常的状况

再看一下显示不全的状况

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

---

分析

先贴一下页面代码

HTML

<div class="row-wrapper">
    <div class="div-flex" style="text-align:center">
        <div class="chart-tab selected" id="chart-tab0">最近30天</div>
        <div class="chart-tab" id="chart-tab1">最近15周</div>
        <div class="chart-tab" id="chart-tab2" style="border-right: 1px #dcdcdc solid;">最近12个月</div>
    </div>
    <div id="chart-line"></div>
</div>

CSS

.row-wrapper { padding: 10px 15px; border-top: 8px #eee solid; font-size: 15px; color: #737373; }

.chart-tab { flex: 1; border-top: 1px #dcdcdc solid; border-left: 1px #dcdcdc solid; border-top-left-radius: 5px; border-top-right-radius: 5px; }

.div-flex { display: -webkit-box; display: -webkit-flex; display: flex; }

#chart-line { height: 26rem; padding-left: 14px; padding-top: 10px; border: 1px #dcdcdc solid; }

.selected { background-color: #EAEAEA; }

JS（这里只贴跟折线图有关的部分）

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);

而后页面运行的时候生成的html是这样的

能够看到 id=chart-line 的 div 是我定义的，而它里面多了两个元素，一个 div 和一个 canvas。这两个就是 Echarts 运行以后添加上去的，其中 canvas 就是图表自己，外层的 div 是一个装它的容器。
因而我尝试一下修改这几个元素的 width、margin、padding，发现……没用。

看下图

修改了margin 和 padding 的以后在 chrome的debug模式下看 canvas 是这样的，能看到其实y轴文字部分仍是在content（蓝色部分）里面的，因此就能明白为何修改 canvas 的 margin、padding 不会起做用了。
因而能得出结论，这是 canvas 绘图的时候就定了的，因此要经过修改传给 echarts 的参数来修改。

好吧，那我们就去官网看API咯……

---

解决办法

官网在此：http://echarts.baidu.com/

咱们要看的是配置项的部分：http://echarts.baidu.com/option.html#title

能够改的地方有下面几个：

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

最终效果还行。。

---

PS：最后忍不住要吐槽，这几个配置项找了我老半天啊囧