问题来源

       博主最近在使用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.当我们遇到一些奇奇怪怪的问题时，多思考，尝试换个思路，就能找到行得通的方案。

       最后，祝大家儿童节快乐，喜欢的话给文章点个赞吧，非常感谢，有疑问均可在文章下方留言。

转载于:https://juejin.im/post/5cf1ed9c5188251179766c88