如何巧妙地解决echarts柱状图x轴溢出问题

最新推荐文章于 2024-08-13 15:11:28 发布

weixin_34006965

最新推荐文章于 2024-08-13 15:11:28 发布

阅读量1.4w

点赞数 2

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5cf1ed9c5188251179766c88

版权

在使用echarts绘制柱状图时遇到x轴溢出问题，作者通过深入研究echarts配置项，发现可通过设置x轴min、max属性及marginRight来解决。对于类目轴和数值轴分别提出了不同的解决方案，并提醒读者面对问题时要多思考，尝试不同思路。

摘要由CSDN通过智能技术生成

问题来源

博主最近在使用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 // 坐标轴两边是否留白