如何巧妙地解決echarts柱狀圖x軸溢出問題

問題來源

       博主最近在使用echarts繪製柱狀圖的時候，就遇到了x軸左右兩邊溢出的問題。相信不少小夥伴也遇到這種問題，並且最最關鍵的是博主找遍了網上，沒找到解決方案！！！
       廢話很少說，直接上圖，明顯看出柱狀圖x軸左右兩邊都溢出了。

What Happened？

代碼分析

瞅一眼代碼：

// 生成echarts實例
const mainChart = echarts.init(document.getElementById('main')); 
const series = [
        {
            data: [[0, 120], [1, 200], [2, 150], [3, 80], [4, 70], [5, 110], [6, 130]],
            type: 'bar',
            barWidth: 20
        },
        {
            data: [[0, 80], [1, 180], [2, 120], [3, 130], [4, 100], [5, 180], [6, 200]],
            type: 'bar',
            barWidth: 20
        },
        {
            data: [[0, 80], [1, 180], [2, 120], [3, 130], [4, 100], [5, 180], [6, 200]],
            type: 'bar',
            barWidth: 20
        }];
const option = {
    xAxis: {
       type: 'value', // 數值軸
       boundaryGap: true // 座標軸兩邊是否留白
    },
    yAxis: {
        type: 'value' // 數值軸
    },
    series // 系列列表
};
mainChart.setOption(option); // 生成配置項
複製代碼

       配置寫的貌似沒有問題，xAxis的boundaryGap屬性值爲true，柱狀圖顯示應該沒問題啊。去echarts github上搜索下，看到了一個相似的issue，貌似是echarts的一個Bug。
       因而，博主只能本身去研究echarts的配置項，偶然發現一個頗有意思的屬性onZero。

       分析：目前來看y軸是位於x軸的0刻度上，因爲x軸內容顯示不下，纔會致使溢出超出範圍。

思考驗證

       換個思路：只要咱們設置x軸的min比series中data最小值再小一個interval，x軸的max比series中data最大值再大一個interval，而後再設置yAxis的onZero值爲false，應該就可讓內容顯示在範圍內了。
       按照上面的思路，咱們來進行驗證：

const mainChart = echarts.init(document.getElementById('main'));
const series = [
        {
            data: [[0, 120], [1, 200], [2, 150], [3, 80], [4, 70], [5, 110], [6, 130]],
            type: 'bar', // 柱狀圖
            barWidth: 15 // 柱條寬度設爲15，避免擠太近很差看
        },
        {
            data: [[0, 80], [1, 180], [2, 120], [3, 130], [4, 100], [5, 180], [6, 200]],
            type: 'bar',
            barWidth: 15
        },
        {
            data: [[0, 80], [1, 180], [2, 120], [3, 130], [4, 100], [5, 180], [6, 200]],
            type: 'bar',
            barWidth: 15
        }];
let xAxisMin = 0; // x軸最小值
let xAxisMax = 0; // x軸最大值
let xAxisMinInterval = 0; // x軸最小處的間隔
let xAxisMaxInterval = 0; // x軸最大處的間隔
let xValues = [];
// 獲取全部x軸data值
for (let s of series) {
  for (let d of s.data) {
    if (!xValues.includes(d[0])) {
        xValues.push(d[0]);
    }
  }
}
xValues.sort((a ,b) => a - b); // 按大小對x軸data排序
xAxisMinInterval = xValues[1] - xValues[0]; // 最小處的間隔
xAxisMaxInterval = xValues[xValues.length - 1] - xValues[xValues.length - 2]; // 最大處的間隔
xAxisMin = xValues[0] - xAxisMinInterval; // x軸最小值
xAxisMax = xValues[xValues.length - 1] + xAxisMaxInterval; // x軸最大值
const option = {
    xAxis: {
        type: 'value', // 數值軸
        min: xAxisMin,  // x軸最小值
        max: xAxisMax, // x軸最大值
        boundaryGap: true // x軸兩邊是否留白
    },
    yAxis: {
        type: 'value',
        axisLine: {
            onZero: false // y軸是否在x軸0刻度上
        }
    },
    series
};
mainChart.setOption(option);
複製代碼

       看下從新渲染出的圖：

       咱們的問題完美解決，柱狀圖完整地顯示在可視區域內。

另外一個案例

       再看另外一個柱狀圖x軸溢出問題，明顯發現x軸左邊溢出了。

       看代碼，區別在於 xAxis type值爲category（類目軸）。

const mainChart = echarts.init(document.getElementById('main'));
const option = {
    xAxis: {
        type: 'category', // 類目軸
        data: [0, 1, 2, 3, 4, 5, 6],
        boundaryGap: false // x軸兩邊不留白
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        barWidth: 30
    }]
};
mainChart.setOption(option);
複製代碼

其實，這裏咱們錯誤地設置了boundaryGap值，修改boundaryGap值爲true便可。

xAxis: {
        type: 'category', // 類目軸
        data: [0, 1, 2, 3, 4, 5, 6],
        boundaryGap: true // x軸兩邊是否留白
    }
複製代碼

再看下渲染出的柱狀圖，OK，沒有問題了。

結論

       1.當echarts柱狀圖中x軸值爲category（類目軸）時，boundaryGap值須要設爲true，便可解決x軸左邊溢出問題。
       2.當echarts柱狀圖中x軸值爲value（數值軸）時，經過計出x軸data的min和max值，而後設置xAxis的min和max屬性，最後設置yAxis的onZero屬性爲false，便可解決x軸兩邊溢出問題。
       3.當咱們遇到一些奇奇怪怪的問題時，多思考，嘗試換個思路，就能找到行得通的方案。

       最後，祝你們兒童節快樂，喜歡的話給文章點個贊吧，很是感謝，有疑問都可在文章下方留言。