本文详解如何在 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，更能将其转化为具备业务含义的视觉元素——让缺失数据“被看见”，而非“被忽略”。