Echarts背景颜色梯度显示，根据折线图中预测概率的大小，显示在背景色为不同颜色的区域

option = {
    tooltip : {
        trigger: 'axis',
            axisPointer : { // 坐标轴指示器，坐标轴触发有效
            type : 'line' // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        orient: 'vertical', 
        left: 'left', 
        data:[{name:'低故障率',icon : 'bar'}, {name:'中等故障率',icon : 'bar'}, {name:'高故障率',icon : 'bar'}],
        selected: { 
        '低故障率' :true, 
        '蒸发量':true,
        '中等故障率' :true,
        '高故障率' :true,
        //不想显示的都设置成false 
        } 
    },
    color:['#81b22f','#f3d71c','#f4b9a9'],
    xAxis: {
        nameLocation:'center',
        type: 'category',
        boundaryGap:true,
        data:['10kV龙双线','10kV*线','10kV龙堆线','10kV龙滩线'],
        show:true,
        axisTick: {
        show: true
    },

    },
    grid: {
        top: '15%',
        bottom: '5%',
        containLabel: true
    },
    yAxis :{
        nameGap:35,
        name:'故障发生概率(%)',
        min:0,
        max:4,
        splitNumber:10,
        type : 'value',
        axisLabel : {
            formatter : '{value}',
        },

    },

series: [          //就是从这个地方开始的    主要用的是markArea 和legend
    {
        name:'低故障率',
        type:'line',
        animation: false,
        areaStyle: {
            normal: {}
        },
        lineStyle: {
            normal: {
                width: 1
            }
        },
        markArea: {
            data: [[{
            yAxis: '0'
            }, {
            yAxis: '1'
            }]]
         },

    },{
    name:'中等故障率',
    type:'line',
    animation: false,
    areaStyle: {
    normal: {}
    },
    lineStyle: {
    normal: {
    width: 1
    }
    },
    markArea: {
    data: [[{
    yAxis: '1'
    }, {
    yAxis: '2'
    }]]
    }
    },{
    name:'高故障率',
    type:'line',
    animation: false,
    areaStyle: {
    normal: {}
    },
    lineStyle: {
    normal: {
    width: 1
    }
    },
    markArea: {
    data: [[{
    yAxis: '2'
    }, {
    yAxis: '4'
    }]]
    }
    },
    {
        name:'故障发生概率',
        type:'line',
        data:[2.3, 0.5, 1.5, 3.44]
    },


], 
}

在此基础上， 将各个区域的线也相应的变色，就更好看。
配置：

 visualMap: {
        show: false,
        dimension: 1,
        pieces: [{
            lte: 1,
            color: 'green'
        }, {
            gt: 1,
            lte: 2,
            color: 'orange'
        }, {
            gt: 2,
            color: 'red'
        }]
    },

改良后结果：