掌握ECharts：绘制动态心率区间数据可视化图表

例如一组数据 8点-9点值是10-20，9点-10点值是30-40，10点-11点值是40-59

思路： 通过设置不同系列的stack属性相同来让它们堆叠在一起，同时利用透明色和实色来分别表示区间的最小值和范围。

代码如下：

option = {
  xAxis: {
    type: 'category',
    data: ['08-09', '09-10', '10-11'],
    axisLabel: {
      show: true,
      interval: 0
    }
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    show: true,
    formatter: function (params) {
      // 根据条件判断是否需要显示tooltip
      if (params.seriesName == 'B') {
        let s = option.series[0]['data'][params.dataIndex];
        let e = option.series[1]['data'][params.dataIndex];
        let r = s + e;
        return `${params.seriesName} <br/>${s}-${r}`;
      } else {
        // 不返回任何内容，则tooltip不显示
        return '';
      }
    }
  },
  series: [
    {
      data: [10, 30, 40],// 每个时间段的最小值  
      type: 'bar',
      name: 'A',
      stack: 'total',
      itemStyle: {
        color: 'rgba(0,0,0,0)'// 透明色 
      }
    },
    {
      data: [10, 10, 19],// 每个时间段的增量 
      type: 'bar',
      name: 'B',
      stack: 'total'
    }
  ]
};