如何巧妙地解决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); // 生成配置项
复制代码

       配置写的貌似没有问题,xAxisboundaryGap属性值为true,柱状图显示应该没问题啊。去echarts github上搜索下,看到了一个类似的issue,貌似是echarts的一个Bug。
       于是,博主只能自己去研究echarts的配置项,偶然发现一个很有意思的属性onZero

       分析:目前来看y轴是位于x轴的0刻度上,由于x轴内容显示不下,才会导致溢出超出范围。

思考验证

       换个思路:只要我们设置x轴的minseriesdata最小值再小一个interval,x轴的maxseriesdata最大值再大一个interval,然后再设置yAxisonZero值为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(数值轴)时,通过计出xdataminmax值,然后设置xAxisminmax属性,最后设置yAxisonZero属性为false,即可解决x轴两边溢出问题。
       3.当我们遇到一些奇奇怪怪的问题时,多思考,尝试换个思路,就能找到行得通的方案。

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

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

    原文作者:weixin_34006965
    原文地址: https://blog.csdn.net/weixin_34006965/article/details/91431879
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞