Echarts时序堆叠面积折线图含缺失值时区域样式异常问题

当堆叠面积折线图数据中存在null或缺失值时，ECharts默认会断开对应位置的折线，堆叠区域的填充逻辑会因此中断，最终导致两个区域之间出现意外空白。以下是两种可行的解决方法：

方案1：填充缺失值 #

将数据中的缺失值替换为合理数值（比如0，或通过插值计算更贴合的数值），保证时序数据的连续性，从根源上避免堆叠断层。

示例代码（填充0）： #

// 处理单系列数据，将null替换为0
const processedData = originalSeriesData.map(val => val === null ? 0 : val);

示例代码（线性插值填充）： #

如果缺失值需要更贴合时序趋势的数值，可以用线性插值方法：

function fillMissingWithInterpolation(data) {
  let prevValid = null;
  let prevIdx = null;
  return data.map((val, idx) => {
    if (val !== null) {
      prevValid = val;
      prevIdx = idx;
      return val;
    }
    // 开头无有效值时填充0
    if (prevValid === null) return 0;
    // 查找下一个有效值
    let nextIdx = idx;
    let nextValid = null;
    while (nextIdx < data.length) {
      if (data[nextIdx] !== null) {
        nextValid = data[nextIdx];
        break;
      }
      nextIdx++;
    }
    // 结尾无有效值时沿用最后一个有效值
    if (nextValid === null) return prevValid;
    // 计算线性插值
    return prevValid + (nextValid - prevValid) * (idx - prevIdx) / (nextIdx - prevIdx);
  });
}

// 应用到系列数据
const processedData = fillMissingWithInterpolation(originalSeriesData);

方案2：启用connectNulls属性 #

在每个堆叠系列的配置中添加connectNulls: true，让ECharts自动连接缺失值两侧的点，从而保证区域填充的连续性。

示例配置： #

const option = {
  xAxis: { type: 'time' },
  yAxis: { type: 'value' },
  series: [
    {
      type: 'line',
      stack: 'total',
      connectNulls: true, // 关键配置
      areaStyle: { color: 'rgba(255, 182, 193, 0.5)' },
      data: [120, null, 150, 80, null, 200]
    },
    {
      type: 'line',
      stack: 'total',
      connectNulls: true, // 每个堆叠系列都需配置
      areaStyle: { color: 'rgba(135, 206, 235, 0.5)' },
      data: [80, 100, null, 120, 150, null]
    }
  ]
};

注意事项 #

• 使用connectNulls时，堆叠计算会基于连接后的折线，需确认这种逻辑是否符合业务需求；
• 填充缺失值是更稳妥的方案，尤其当缺失值代表“无数据”而非“数据中断”时，用0填充更符合堆叠统计的含义；
• 多堆叠层场景下，确保所有层的缺失值处理逻辑一致，避免堆叠结果出现偏差。

内容的提问来源于stack exchange，提问作者Abhay Padamani