echarts梯度背景色

1599201612(1).png

var option = {
      color: ['#FEE9E9', '#E0FAE8', '#DCF0FB'],
      legend: {
        left: 'left',       
data: [{
          name: '优秀',
          icon: 'circle'
        }, {
          name: '中等',
          icon: 'circle'
        }, {
          name: '不及格',
          icon: 'circle'
        }],
        selectedMode:false,
      },
      xAxis: {
        type: 'category',
        data: ['第一周','第二周','第三周','第四周'],
        axisLabel: {
          interval: 0,
          textStyle: {
            fontSize: '12', //字体大小
          }
        }
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: false
        },
        axisLabel: {
          textStyle: {
            fontSize: '12', //字体大小
          }
        }
      },
      series: [ 
        {
          name: '不及格',
          type: 'line',
          silent:true, //取消交互
          clickable:false,//取消点击事件
          animation: false,//取消动画
          hoverAnimation: false,//取消点击
          symbol: 'circle', //折点设定为实心点
          symbolSize: 20, //设定实心点的大小
          markArea: {//就是从这个地方开始的    主要用的是markArea 和legend
            data: [
              [{
                yAxis: '0'
              }, {
                yAxis: '60'
              }]
            ]
          },

        }, {
          name: '中等',
          type: 'line',
          silent:true,
          clickable:false,
          animation: false,
          hoverAnimation: false,
          symbol: 'circle', //折点设定为实心点
          symbolSize: 20, //设定实心点的大小
          areaStyle: {
            normal: {}
          },
          lineStyle: {
            color: 'red',
            normal: {
              width: 1
            }
          },
          markArea: {
            data: [
              [{
                yAxis: '60'
              }, {
                yAxis: '80'
              }]
            ]
          }
        }, {
          name: '优秀',
          type: 'line',
          silent:true,
          clickable:false,
          animation: false,
          hoverAnimation: false,
          symbol: 'circle', //折点设定为实心点
          symbolSize: 20, //设定实心点的大小
          areaStyle: {
            normal: {}
          },
          markArea: {
            data: [
              [{
                yAxis: '80'
              }, {
                yAxis: '110'
              }]
            ]
          }
        },
        {
          name: '得分',
          type: 'line',
          silent:true,
          data: [89,93,74,91],
          itemStyle: {
            normal: {
              label: {
                show: true
              }
            }
          }
        },


      ],
      visualMap: {
        show: false,
        dimension: 1,
        pieces: [{
          lte: 1,
          color: 'green'
        }, {
          gt: 1,
          lte: 2,
          color: 'orange'
        }, {
          gt: 2,
          color: '#30CBAF'
        }]
      },
    };