如何在ECharts中创建随边界距离动态调整透明度的置信带

需求回顾 #

要实现**靠近上下边界时透明度更高（更透明），靠近中间基准线时透明度更低（更实）**的置信带效果，原线性渐变配置因offset和透明度对应关系错误，导致效果相反。

修正思路 #

置信带需拆分为**上半区（基准线→上边界）和下半区（基准线→下边界）**两个堆叠区域，分别配置线性渐变：

• 上半区：从基准线（下）到上边界（上），透明度从高（实）到低（透）
• 下半区：从基准线（上）到下边界（下），透明度从高（实）到低（透）

修正后的代码 #

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    // 基准线
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      lineStyle: {
        color: '#1890ff' // 基准线蓝色
      },
      z: 2 // 让基准线在置信带上方
    },
    // 下置信带的底部边界（堆叠用，隐藏线条）
    {
      data: [620, 732, 701, 734, 1090, 1130, 1120], // 基准值-200作为下边界
      type: 'line',
      stack: 'lower-band',
      lineStyle: { opacity: 0 },
      symbol: 'none'
    },
    // 下置信带区域（从下边界到基准线）
    {
      data: [200, 200, 200, 200, 200, 200, 200], // 基准值-下边界的差值
      type: 'line',
      stack: 'lower-band',
      lineStyle: { opacity: 0 },
      symbol: 'none',
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(255, 70, 131, 0.8)' }, // 靠近基准线（上），透明度低（实）
          { offset: 1, color: 'rgba(255, 70, 131, 0.1)' }  // 靠近下边界（下），透明度高（透）
        ])
      }
    },
    // 上置信带的底部基准线（堆叠用，隐藏线条）
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      stack: 'upper-band',
      lineStyle: { opacity: 0 },
      symbol: 'none'
    },
    // 上置信带区域（从基准线到上边界）
    {
      data: [200, 200, 200, 200, 200, 200, 200], // 上边界-基准值的差值
      type: 'line',
      stack: 'upper-band',
      lineStyle: { opacity: 0 },
      symbol: 'none',
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: 'rgba(255, 70, 131, 0.8)' }, // 靠近基准线（下），透明度低（实）
          { offset: 1, color: 'rgba(255, 70, 131, 0.1)' }  // 靠近上边界（上），透明度高（透）
        ])
      }
    }
  ]
};

关键调整说明 #

1. 拆分置信带：将原单一堆叠区域拆分为上下两个独立堆叠组，分别控制渐变方向
2. 渐变方向与透明度对应：
   • 下置信带渐变方向为(0,0)→(0,1)（从上到下），offset 0对应基准线，设置高alpha（0.8，实）；offset 1对应下边界，设置低alpha（0.1，透）
   • 上置信带渐变方向为(0,1)→(0,0)（从下到上），offset 0对应基准线，设置高alpha；offset 1对应上边界，设置低alpha
3. 层级控制：给基准线设置z:2，确保它显示在置信带上方，避免被覆盖

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