Echarts группа доверия - PullRequest
Новая
       18

Echarts группа доверия

0 голосов
/ 08 октября 2019

Я новичок в Echarts и графических библиотеках в целом.

Я пытаюсь создать линейную диаграмму с тем, что я недавно узнал, называется доверительной полосой, чтобы показать минимальные / максимальные значения для каждоготочка. Я нашел этот пример: https://echarts.apache.org/examples/en/editor.html?c=confidence-band однако, когда я пытаюсь применить эту идею к моему графику, она не отображается правильно.

Мои три серии мин / макс / среднее выглядят так: enter image description here

Однако, когда я пытаюсь сложить min и max и добавить к нему areaStyle, как в примере, это выглядит так: enter image description here

Как я уже сказал, я новичок в этом, поэтому я должен признать, что я даже не уверен на 100%, что даже делает серия укладка , я просто следовал примеруупоминалось выше.

У меня такой вопрос: что я здесь упускаю, почему стеки в беспорядке суммируют серию max?

Опции моих 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
    }
  ]
};
...