Echarts多折线图不同长度序列数据展示错位问题求助

数据老陈

2026-9-26

ECharts多折线数据长度不一致点位错位解决方案

问题根因

ECharts折线图默认通过数据数组的索引和X轴类目/刻度索引做匹配，当其中一个series数据长度更短时，所有数据会自动匹配X轴前N个位置，就会出现「最后一天的点跑到第一天」的错位问题。

解决方法

场景1：X轴为类目轴（type: category）

两种方案可选：

方案1：对短数据的series做空位填充，用null值把数据长度补到和最长series一致，要展示的点放在对应X轴位置的索引上即可。ECharts会自动跳过null值不渲染连线，不影响展示效果。
例：7天的维度下，要在最后一天展示单个点，数据写为[null, null, null, null, null, null, 目标数值]

方案2（更推荐）：放弃默认索引匹配规则，每个数据点写为[X轴类目值, 数值]的格式，ECharts会自动匹配对应X轴位置，无需考虑数据长度问题。
示例代码：

const option = {
  xAxis: {
    type: 'category',
    data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    // 长度为7的常规折线
    {
      type: 'line',
      data: [120, 200, 150, 80, 70, 110, 130]
    },
    // 长度为1的折线，直接绑定对应X轴类目
    {
      type: 'line',
      data: [['7日', 90]]
    }
  ]
}