Echarts 置信区间答案

【问题标题】：Echarts confidence bandEcharts 置信区间
【发布时间】：2019-10-08 08:20:44
【问题描述】：

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

我正在尝试使用我最近学到的称为置信带的折线图来显示每个点的最小值/最大值。我找到了这个例子：https://echarts.apache.org/examples/en/editor.html?c=confidence-band 但是，当我尝试将这个想法应用到我的图表时，它无法正确显示。

我的三个最小/最大/平均值系列如下所示：

但是，当我尝试堆叠 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
    }
  ]
};

【问题讨论】：

标签： javascript plot graph echarts

【解决方案1】：

将每一行的值ADDS堆叠在一起，更多地用于累积报告（例如查看四个类别产品的累积销售额，每个销售额都堆叠在顶部 - stack 是累计销售总额）

对于最小/最大波段，您需要先堆叠min，然后在顶部堆叠max-min。

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

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

【讨论】：