echart折线图区域背景渐进、坐标轴样式设置

先看效果：

image image.gif

代码实现如下：

option = {
  backgroundColor: 'blue',
  title: {
    text: '', // 标题
    left: 18,
    top: 5,
    textStyle: { color: 'rgba(255,255,255,.6)', fontSize: '29', align: 'right' }
  },
  // 弹出层样式
  tooltip: {
    trigger: 'axis',
    borderColor: '#1f6485', // 边框颜色
    backgroundColor: 'rgba(25,51,85,.8)',
    borderWidth: 1,
    textStyle: {
      align: 'left'
    },
    formatter: (params) => {
      const title = params[0].axisValue;
      const data = params[0].data;
      const ytitle = '降雨量';
      return `<div style='padding:4px 10px;'><span style='font-size: 18px;'>${title}时</span><br /><span style='color: #9dbdfb;font-size: 16px;'>${ytitle}</span>：<span style='font-size: 16px;'>${data}</span><span style='font-size: 16px;'>mm</span></div>`;
    }
  },
  xAxis: {
    type: 'category',
    name: '时',
    nameTextStyle :{ // 设置单位样式
            fontSize: 24
        },
    boundaryGap: true, // 坐标轴两边留白
    axisLabel: {
      show: true,
      textStyle: {
        color: 'rgba(255,255,255,.6)', //更改坐标轴文字颜色
        fontSize: 26 //更改坐标轴文字大小
      }
    },
    axisLine: { // 坐标轴
      lineStyle: {
        color: '#ccc', // 坐标轴线颜色
        width: 1 // 坐标轴线粗度
      }
    },
    axisTick: { // 设置刻度相关
      show: false // 不显示刻度
    },
    data: ['2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '24']
  },
  yAxis: {
    type: 'value',
    name: '单位：mm',
    max: 1, // 设置最大值
    nameTextStyle :{ // 设置单位样式
            fontSize: 24
        },
    splitLine: {
        show: false, // 不显示网格线
        lineStyle: {
            // type: 'dashed', //默认实线，dashed虚线
            width: 1,
            color: '#0a2a5d'
        }
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: 'rgba(255,255,255,.6)', //更改坐标轴文字颜色
        fontSize: 26 //更改坐标轴文字大小
      }
    },
    axisLine: { // 坐标轴
      show: true,
      lineStyle: {
        color: '#ccc', // 坐标轴线颜色
        width: 1 // 坐标轴线粗度
      }
    },
    axisTick: { // 设置刻度相关
      show: true,
      inside: false, // 刻度是否朝内，默认朝外
      length: 5 // 刻度长度，默认为5
    }
  },
  series: [
    {
      data: [0.28, 0.4, 0.31, 0.37,  0.5, 0.3, 0.38, 0.25,0.4,  0.56, 0.6, 0.44],
      type: 'line',
      smooth: 0.2,
      symbol: 'none',
      areaStyle: {},
      itemStyle: {
        normal: {
          areaStyle: {
            type: 'default',
            color: new echarts.graphic.LinearGradient( // 渐变色实现
              0,
              0,
              0,
              1,
              [ // 三种由深及浅的颜色
                {
                  offset: 0,
                  color: 'rgba(103, 210, 255, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(255, 255, 255, 0.1)'
                }
              ]
            )
          },
          lineStyle: { //线的颜色
            color: '#00ffee'
          }
        }
      }
    }
  ]
};