ECharts箱线图添加背景目标条形图及Tooltip展示需求

1. 准备目标值数据 #

先整理与箱线图结构匹配的目标值数据，示例如下：

// 每个子数组对应一个大类下的各子项目标值
const targetData = [
  [80, 75, 90],
  [70, 85, 78],
  [95, 88, 92]
];

2. 添加自定义系列绘制背景条形 #

在ECharts的series数组最前面添加自定义系列，用来绘制背景目标条（放在箱线图系列前确保层级在下方）：

series: [
  {
    type: 'custom',
    data: targetData.flatMap((categoryTargets, categoryIdx) => {
      return categoryTargets.map((target, itemIdx) => {
        // 计算每个背景条的横轴位置，与箱线图子项对齐
        const xPos = categoryIdx * 4 + itemIdx;
        return {
          value: [xPos, target],
          targetValue: target
        };
      });
    }),
    renderItem: (params, api) => {
      const x = api.value(0);
      const targetVal = api.value(1);
      // 绘制从y轴底部到目标值的背景矩形
      return {
        type: 'rect',
        shape: {
          x: api.coord([x - 0.3, 0])[0],
          y: api.coord([x, targetVal])[1],
          width: 0.6 * api.size([1, 0])[0],
          height: api.size([0, 1])[1] - api.coord([x, targetVal])[1]
        },
        style: {
          fill: '#e6f7ff',
          opacity: 0.5
        }
      };
    },
    tooltip: { show: false }
  },
  // 原有的箱线图系列
  {
    type: 'boxplot',
    data: yourBoxPlotData,
    // 其他箱线图配置
  }
]

3. 配置Tooltip显示目标值 #

修改Tooltip的格式化函数，通过索引匹配对应目标值：

tooltip: {
  trigger: 'item',
  formatter: (params) => {
    // 根据当前数据索引匹配目标值
    const categoryIdx = Math.floor(params.dataIndex / 3);
    const itemIdx = params.dataIndex % 3;
    const target = targetData[categoryIdx][itemIdx];
    
    let content = `<div>${params.name}</div>`;
    // 箱线图核心数据展示
    content += `<div>最小值: ${params.data[0]}</div>`;
    content += `<div>下四分位: ${params.data[1]}</div>`;
    content += `<div>中位数: ${params.data[2]}</div>`;
    content += `<div>上四分位: ${params.data[3]}</div>`;
    content += `<div>最大值: ${params.data[4]}</div>`;
    // 添加目标值展示
    content += `<div style="color: #1890ff;">目标值: ${target}</div>`;
    return content;
  }
}

关键提示 #

• 自定义系列通过renderItem完全控制背景条的位置和样式，不会与箱线图的布局逻辑冲突。
• 可调整renderItem中的宽度、颜色参数，让背景条与箱线图视觉风格统一。
• 目标值数据结构必须与箱线图严格对应，确保Tooltip匹配准确。

内容的提问来源于stack exchange，提问作者Lasse Bonner