一、问题背景
在使用 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]
}
]
这样，折线会自动跳过空值，让图形更加流畅。
一、问题背景
在使用 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设为null
return 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 是让折线“无缝衔接”的最佳搭档。
推荐阅读
