Echarts置信带

Question

总的来说，我是 Echarts 和图形库的新手。

我正在尝试使用我最近学到的称为置信带的内容创建折线图，以显示每个点的 min/max 值。我找到了这个例子：https://echarts.apache.org/examples/en/editor.html?c=confidence-band 然而，当我尝试将这个想法应用到我的图表时，它没有正确显示。

我的三个系列 min/max/mean 看起来像这样：

然而，当我尝试堆叠 min 和 max 并向其添加 areaStyle 时，如示例中所示，它看起来像这样：

正如我所说，我是新手，所以我不得不承认我什至不能 100% 确定 stacking 系列到底做了什么，我只是在关注上面提到的例子。

我的问题是：我在这里遗漏了什么，为什么堆叠会弄乱最大系列？

我的 Echarts 选项如下所示：

this.options = {
  title: {
    text: ''
  },
  legend: {
    show: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      animation: false,
      label: {
        backgroundColor: '#ccc',
        borderColor: '#aaa',
        borderWidth: 1,
        shadowBlur: 0,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        color: '#222'
      }
    }
  },
  toolbox: {
    show: true,
    feature: {
      ...features,
      brush: {
        show: false
      },
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    splitLine: {
      show: false
    },
    data: [],
    name: '',
    nameTextStyle: {
      fontWeight: 'bold'
    },
    min: 'dataMin',
    max: 'dataMax',
    scale: true,
    axisLabel: {
      formatter: value => {
        return `${value} m`;
      }
    }
  },
  yAxis: {
    type: 'value',
    name: '',
    nameTextStyle: {
      fontWeight: 'bold'
    },
    nameLocation: 'middle',
    nameGap: 60,
    axisLabel: {
      formatter: value => {
        return `${value} m/s`;
      }
    },
    splitNumber: 3,
    splitLine: {
      show: false
    }
  },
  dataZoom: [
    {
      type: 'slider',
      xAxisIndex: 0,
      filterMode: 'empty'
    },
    {
      type: 'slider',
      yAxisIndex: 0,
      filterMode: 'empty'
    }
  ],
  series: [
    {
      name: 'min',
      type: 'line',
      data: [],
      stack: 'confidence-band',
      symbol: 'none'
    },
    {
      name: 'max',
      type: 'line',
      data: [],
      areaStyle: {
        color: '#ccc'
      },
      stack: 'confidence-band',
      symbol: 'none'
    },
    {
      name: 'mean',
      type: 'line',
      data: [],
      hoverAnimation: false,
      symbolSize: 6,
      showSymbol: false
    }
  ]
};

Answer 1

将每行的值叠加ADDS，更多的是用于累积报告（例如查看四类产品的累积销售额，每个销售额叠加在最上面- 堆栈顶部是总累计销售额）

对于 min/max 乐队，您需要先堆叠 min，然后 max-min 在上面。

这很好堆叠，因为最大值总是大于最小值。

此处的后续问题是工具提示现在显示 max-min 而不是 max 值，因此需要自定义格式化程序来显示正确的值 (max-min) + min

Echarts置信带

Echarts confidence band

javascript

plot

graph

echarts