如何让ECharts折线图的数据点延伸至图表两端？

问题描述 #

创建折线图时，仅通过工具按钮切换为折线图模式后，数据点才会延伸至图表两端。移除所有额外配置、调整xAxis多项参数均无法解决该问题：

• 当前效果：折线首尾数据点与图表左右边缘存在明显空白
• 期望效果：折线首尾数据点紧贴图表左右两端

解决步骤 #

核心原因是ECharts的类目轴（type: "category"）默认会在首尾数据外侧预留空白间隔，而工具按钮切换时会自动启用boundaryGap: false配置。只需手动添加该配置即可解决：

• 在xAxis的配置对象中添加boundaryGap: false，取消类目轴首尾的空白间隔，让折线自动填满图表宽度

修改后的完整代码 #

function MoraleLineChart({ data, colors }) {
  const barOptions = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {},
    grid: {
      left: "5%",
      right: "10%",
    },
    toolbox: {
      show: true,
      orient: "vertical",
      left: "90%",
      top: "center",
      feature: {
        mark: { show: true },
        magicType: { show: true, type: ["line", "bar"] },
      },
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false, // 新增配置：取消首尾空白间隔
        axisLine: { onZero: true },
        axisTick: { show: true, inside: true },
        data: Object.keys(data.analytics.min).map((val) => val),
        axisLabel: {
          inside: false,
          rotate: -25,
          hideOverlap: true,
          truncate: false,
          fontSize: 10,
          nameTruncate: { maxWidth: 5, ellipsis: "..." },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "min",
        type: "line",
        itemStyle: {
          color: colors.min,
        },
        emphasis: {
          focus: "series",
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: colors.areaTop,
            },
            {
              offset: 1,
              color: colors.areaBase,
            },
          ]),
        },
        data: data.analytics ? Object.values(data.analytics.min) : [],
      },
      {
        name: "mean",
        type: "line",
        label: "Mean",
        itemStyle: {
          color: colors.mean,
        },
        emphasis: {
          focus: "series",
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: colors.areaTop,
            },
            {
              offset: 1,
              color: colors.areaBase,
            },
          ]),
        },
        data: data.analytics ? Object.values(data.analytics.mean) : [],
      },
      {
        name: "max",
        type: "line",
        itemStyle: {
          color: colors.max,
        },
        emphasis: {
          focus: "series",
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: colors.areaTop,
            },
            {
              offset: 1,
              color: colors.areaBase,
            },
          ]),
        },
        data: data.analytics ? Object.values(data.analytics.max) : [],
      },
    ],
  };
  return <ReactEChart option={barOptions} className="morale-bar-chart" />;
}

内容的提问来源于stack exchange，提问作者Walter Branning