• • 問題
  • 分析
  • 解決辦法

問題

先看一下正常的情況

再看一下顯示不全的情況

所有的資料都是從後臺取的，也就是說動態變化的，一開始的時候資料量不大不會出現問題，後面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：最後忍不住要吐槽，這幾個配置項找了我老半天啊囧