关于Echarts中折线图两侧会出现多余空白的解决方案

Scorpio_sky

已于 2024-01-17 17:55:47 修改

阅读量2.2k

点赞数 10

分类专栏： Echarts Work-JavaScript 文章标签： echarts 前端 javascript

于 2024-01-17 17:48:09 首次发布

本文链接：https://blog.csdn.net/Scorpio_sky/article/details/135656427

版权

Work-JavaScript 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

Echarts

1 篇文章 0 订阅

订阅专栏

文章讲述了在使用Echarts创建折线图时，遇到x轴两侧留白的问题。通过调整xAxis的boundaryGap配置为false，解决了这一问题，同时介绍了grid配置和官方文档的相关说明。

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

问题现象

使用Echarts的折线图时，发现x轴左右两侧会留白
在这里插入图片描述

尝试使用grid配置，却不起任何作用

let lineChart = this.$ECharts.init(this.$refs.div);
// 图表设置
lineChart.setOption({
  // 布局位置
  grid: {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  },
});

最后翻文档，发现在xAxis配置对象中有一个配置项boundaryGap
这玩意默认在坐标轴两边会留白。

官网对于 xAxis. boundaryGap 的说明：
↓手动复制链接，否则CSDN跳转会省略掉后面路径
https://echarts.apache.org/zh/option.html#xAxis.boundaryGap

解决方案

将xAxis里boundaryGap设置为false

let lineChart = this.$ECharts.init(this.$refs.div);
// 图表设置
lineChart.setOption({
  xAxis: {
    // 不显示x轴
    show: false,
    // x轴为category，可以让line图标有曲折效果
    type: "category",
    // boundaryGap 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
    // 默认为true，折线图+x轴category左右两侧会留白，这边设置为false
    boundaryGap: false,
  },
  // 布局位置
  grid: {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  },
});