echarts数据堆叠 存在负值数据不正确 问题解决方案

设置 stack 后,数据堆叠可显示阴影图,但数据同时存在正值和负值时,堆叠后 负值会消失。

解决方法:

在数据中添加base值,实际值、下界值 +base ,y轴值 -base 即可。

代码:

  let base = -this.data.reduce(function (min, val) {
     
      return Math.floor(Math.min(min, val.yhat_lower));
  }, Infinity);
   yAxis: {
     
      axisLabel: {
     
         formatter: function (val) {
     
            return val - base;
         },
         axisPointer: {
     
            label: {
     
               formatter: function (params) {
     
                  return params.value - base;
               }
           }
        }
     }
  }
  series: [
     {
     
         name: '实际值',
         type: 'line',
         data: this.data.map(function (item) {
     
             return item.y + base;
         }),
         itemStyle: {
     
             color: '#3D98F8'
         }
     },
     {
     
         name: '下界值',
         type: 'line',
         data: this.data.map(function (item) {
     
             return item.yhat_lower + base;
         }),
         lineStyle: {
     
            opacity: 0
         },
         stack: 'y-band',
         symbol: 'none'
     },
     {
     
         name: '上界值',
         type: 'line',
         data: this.data.map(function (item) {
     
             return item.yhat_upper - item.yhat_lower;
         }),
         lineStyle: {
     
            opacity: 0
         },
         areaStyle: {
     
            color: '#E9F7E4'
         },
         stack: 'y-band',
         symbol: 'none'
     },
}

数据例子:

data:[
  {
     
      ds: 1493599200000,
      y: 25.5266244181,
      yhat_lower: 18.6115632515,
      yhat_upper: 32.1081187004,
  },
  .......
]

效果:
echarts数据堆叠 存在负值数据不正确 问题解决方案_第1张图片

你可能感兴趣的:(数据可视化)