echarts实现背景程度变化

效果

类似下面这种根据Y轴的5、15、25等数值进行背景的层次显示，突出数值的程度。

代码

import * as echarts from 'echarts'; //渐变色

arr = [
          {offset: 5, color: '#e8512e'},
          {offset: 15, color: '#e8512e'},
        ]
getOption = () => {
    const { xAxisValue, ODI } = this.props;
    const max = parseInt(Math.max(...ODI.yAxisValue)/5)*5+10;
    const min = parseInt(Math.min(...ODI.yAxisValue)/5)*5;
    const arr = this.getColorArr(max,min)
    // console.log('zff',arr);
    const option = {
      backgroundColor: 'rgba(255, 255, 255, 1)',
      grid: {
        x: 30,
        y: 10,
        x2: 30,
        y2: 35,
        show:true,
        // 改部分就是实现背景程度变化的主要部分，其中arr就是分级数据
        backgroundColor:new echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          arr
        )
      },
      xAxis: {},
      yAxis: {},
      series: [}]
    };
    return option;
 }