本文详解如何在 echarts 条形图中优雅呈现 null 值——不修改原始数据，通过双维度数据集与多系列叠加 + visualmap 精准控制，实现透明占位柱+文字标注等定制化效果。
在数据可视化中，null 值常被默认忽略或留白，但业务场景往往需要明确传达“缺失”这一语义。ECharts 原生不支持对 null 值直接应用颜色、透明度或标签，但可通过数据建模 + 多系列渲染 + visualMap 映射的组合策略，实现高度可控的空值可视化。
✅ 推荐方案：零侵入式「哑元维度 + 双柱叠加」
核心思想：不篡改原始 value 字段，而是新增一个独立的 dummy 数值维度（如固定值 50），仅用于在 null 对应位置绘制辅助柱；再通过 visualMap 将该维度映射为低透明度灰色，形成视觉上“存在但不可见”的占位效果。
示例代码（推荐实现）
import * as echarts from 'echarts';
const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);
const dataset = [
{ day: 'Mon', value: 120, dummy: 0 },
{ day: 'Tue', value: 70, dummy: 0 },
{ day: 'Wed', value: null, dummy: 50 }, // ← null 位置设 dummy=50
{ day: 'Thu', value: 80, dummy: 0 },
{ day: 'Fri', value: null, dummy: 50 },
{ day: 'Sat', value: 110, dummy: 0 },
{ day: 'Sun', value: 130, dummy: 0 }
];
const option = {
dataset: [{
dimensions: [
{ name: 'day', type: 'ordinal' },
{ name: 'value', type: 'number' },
{ name: 'dummy', type: 'number' } // 新增哑元维度
],
source: dataset
}],
xAxis: [
{ type: 'category', position: 'bottom' }, // 主X轴：显示 value 柱
{ type: 'category', position: 'bottom', show: false } // 辅助X轴：隐藏，仅承载 dummy 柱
],
yAxis: {},
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
visualMap: [
// 控制主系列（value）颜色映射（可选）
{
type: 'piecewise',
seriesIndex: 0,
show: false,
dimension: 1,
min: 0, max: 200,
inRange: { color: ['#5470C6', '#91CC75'] }
},
// 关键：控制 dummy 系列样式 → 实现 null 占位
{
type: 'piecewise',
seriesIndex: 1,
show: false,
dimension: 2,
pieces: [{ min: 50, max: 50, label: 'Missing' }], // 可选：添加图例说明
inRange: {
color: '#999',
opacity: 0.25,
colorLightness: 0.7
}
}
],
series: [
// 主系列：正常数值柱（null 自动跳过）
{
type: 'bar',
encode: { x: 'day', y: 'value' },
itemStyle: { borderRadius: [4, 4, 0, 0] }
},
// 辅助系列：仅在 dummy > 0 的位置绘制浅灰半透柱
{
type: 'bar',
xAxisIndex: 1,
encode: { x: 'day', y: 'dummy' },
itemStyle: {
borderColor: '#666',
borderWidth: 1,
borderType: 'dashed'
}
}
]
};
myChart.setOption(option);? 关键设计解析
- 双 X 轴隔离：主 X 轴（xAxis[0]）渲染真实数据，辅助 X 轴（xAxis[1]）隐藏但与主轴完全对齐，确保 dummy 柱精准覆盖 null 位置；
- visualMap 精准绑定：seriesIndex: 1 明确指定作用于辅助系列，dimension: 2 绑定到 dummy 字段，避免干扰主系列；
-
语义增强建议：
- 在 tooltip.formatter 中加入 value === null ? 'Missing' : value 判断；
- 为辅助系列添加 label: { show: true, formatter: '—' } 显示短横线或自定义文字；
- 使用 itemStyle.borderType: 'dashed' 强化“非真实数据”感知。
⚠️ 注意事项
- ❌ 避免直接将 null 替换为 0 或其他数值——会扭曲统计逻辑与坐标轴刻度；
- ✅ dummy 值需显著区别于有效值范围（如全量 value ∈ [0,200]，则 dummy=50 安全）；
- ? 若需文字标签，优先使用 series.label 而非 visualMap.pieces.label（后者仅影响图例）；
- ? 此方案兼容 ECharts 5.0+，且不影响响应式、导出、事件交互等全部功能。
通过该方法，你不仅能可视化 null，更能将其转化为具备业务含义的视觉元素——让缺失数据“被看见”，而非“被忽略”。
