ECharts 实战：`connectNulls` 的妙用——绘制连续折线图并跳过 0 值节点
一、问题背景
在使用 ECharts 绘制折线图时，我们经常会遇到一种情况：
数据序列中有些点的值为
0，但这些0并不代表真实数据，而是缺失或无效值。
默认情况下，ECharts 会把这些 0 值也画在折线上，从而导致曲线出现突兀的下坠。
这在分析指标波动趋势时，会让图表显得不够连贯，甚至误导读者。
例如，下面这段配置：
option = {xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月'] },yAxis: { type: 'value' },series: [{type: 'line',data: [10, 0, 15, 20, 0]}]
};
结果就是这样👇
折线在 0 的位置直接掉到底部，看起来不连续也不自然。
二、connectNulls 参数的作用
ECharts 提供了一个非常实用的配置项：
connectNulls—— 是否连接空数据点。
它的作用是：
- 当数据中存在
null或undefined时，是否自动忽略这些点并连接相邻有效节点。 - 默认值为
false，即不连接，会出现断点。
例如：
series: [{type: 'line',connectNulls: true, // ✅ 连续连接有效点data: [10, null, 15, 20, null]}
]
这样，折线会自动跳过空值，让图形更加流畅。
三、如何“跳过 0 值节点”
问题是：
ECharts 的 connectNulls 只会忽略 空值（null/undefined），不会自动忽略数值 0。
所以我们要做一点小技巧：
👉 在渲染前，把“逻辑上无效的 0 值”替换成 null。
例如：
const rawData = [10, 0, 15, 20, 0];// 将 0 转换为 null
const processedData = rawData.map(v => (v === 0 ? null : v));option = {xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月'] },yAxis: { type: 'value' },series: [{type: 'line',connectNulls: true, // 开启连接data: processedData}]
};
这样，折线图会自动跳过那些“伪 0”节点，曲线连贯流畅👇
四、实战效果对比
| 配置项 | 是否开启 connectNulls | 数据是否处理 0 → null | 折线效果 |
|---|---|---|---|
| ❌ 默认 | 否 | 否 | 折线断裂或坠底 |
| ✅ 开启 connectNulls | 是 | 否 | 仍会显示 0 点 |
| ✅ 完整方案 | 是 | 是 | 跳过 0 点，折线连续 ✅ |
✅ 推荐做法：
- 把逻辑上“无效”的数据改成
null；- 配合
connectNulls: true使用。
五、进阶技巧：动态处理逻辑
在实际项目中，我们可能只想跳过部分字段，例如只跳过「数据采集异常」的 0 值。
这时可以在数据预处理阶段灵活判断：
const processedData = rawData.map(v => {// 只有在采集异常时（比如标志位 error=true），才把0设为nullreturn v.error ? null : v.value;
});
或者对于多条折线的情况：
option.series = seriesList.map(item => ({...item,connectNulls: true,data: item.data.map(v => (v === 0 ? null : v))
}));
六、总结
在数据可视化中，展示的“连续感”往往比“精确的 0 值”更重要。
ECharts 的 connectNulls 为我们提供了一个简单优雅的方案，让折线图更加自然流畅。
技巧总结：
✅ 开启 connectNulls: true
✅ 将“无效的 0” 转换为 null
✅ 动态控制逻辑，确保图表既准确又美观
💡一句话总结：
当数据中存在无效节点时，connectNulls+null是让折线“无缝衔接”的最佳搭档。
推荐阅读
- ECharts 折线图实战：数据平滑与采样优化
- 让 ECharts 图表更美观的 5 个细节技巧