如何在React ApexCharts折线图中添加置信区间及阴影区域

要实现类似目标图的效果，核心思路是用**区域图（area）渲染不确定性阴影区间，叠加折线图（line）**展示均值线，以下是具体实现步骤和代码示例：

1. 准备数据结构 #

需要三组核心数据：均值线数据、不确定性区间的上限（如95%分位数/置信区间上界）、下限（如5%分位数/置信区间下界），同时准备x轴类别数据：

const chartData = {
  mean: [12, 15, 18, 22, 20, 25, 28], // 均值数据
  upperBound: [14, 17, 21, 25, 23, 28, 31], // 区间上限
  lowerBound: [10, 13, 15, 19, 17, 22, 25], // 区间下限
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'] // x轴类别
};

2. 图表核心配置与组件实现 #

通过配置两个area系列渲染阴影区间，一个line系列渲染均值线，关键配置包括填充透明度、描边样式、图例优化：

import React from 'react';
import Chart from 'react-apexcharts';

const UncertaintyChart = () => {
  const data = {
    mean: [12, 15, 18, 22, 20, 25, 28],
    upperBound: [14, 17, 21, 25, 23, 28, 31],
    lowerBound: [10, 13, 15, 19, 17, 22, 25],
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
  };

  const options = {
    chart: { height: 400, type: 'line' },
    xaxis: { categories: data.categories, title: { text: '时间' } },
    yaxis: { title: { text: '数值' } },
    // 配置阴影区域的渐变填充
    fill: {
      type: 'gradient',
      gradient: {
        shadeIntensity: 1,
        opacityFrom: 0.2,
        opacityTo: 0.2,
        stops: [0, 100]
      }
    },
    // 控制描边：上下限系列无描边，均值线加粗
    stroke: { width: [0, 0, 2] },
    // 颜色配置：阴影用半透明色，均值线用醒目纯色
    colors: ['rgba(54, 162, 235, 0.2)', 'rgba(54, 162, 235, 0.2)', '#36A2EB'],
    // 优化图例，只展示关键项
    legend: {
      labels: {
        formatter: (val) => {
          if (val === 'mean') return '均值';
          if (val === 'upperBound') return '95%置信区间';
          return ''; // 隐藏下限系列的图例
        }
      }
    }
  };

  const series = [
    { name: 'upperBound', type: 'area', data: data.upperBound },
    { name: 'lowerBound', type: 'area', data: data.lowerBound },
    { 
      name: 'mean', 
      type: 'line', 
      data: data.mean,
      marker: { size: 4 } // 给均值线添加标记点，增强辨识度
    }
  ];

  return (
    <div className="chart-wrap">
      <Chart options={options} series={series} type="line" height={400} />
    </div>
  );
};

export default UncertaintyChart;

3. 进阶优化技巧 #

• 自定义提示框：如果需要在 tooltip 中同时展示均值和区间范围，可以添加以下配置：

tooltip: {
  custom: ({ series, dataPointIndex }) => `
    <div style="padding: 8px;">
      <p>均值: ${series[2][dataPointIndex]}</p>
      <p>区间范围: ${series[1][dataPointIndex]} - ${series[0][dataPointIndex]}</p>
    </div>
  `
}

• 多区间层级：若需展示多组不确定性（如不同分位数），可添加更多area系列，通过调整填充色的透明度区分层级（比如75%分位数用更高透明度，95%用更低透明度）。

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