17370845950

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