echarts 折线图

效果

类似图片中的配置，主要是折线图的一些渐变背景瑟的配置

  const setClusterCpuChartOptions = (yesData, todayData) => {
    const option = {
      xAxis: {
        type: 'category',
        axisTick: {
          show:false
        },
        data: ['00', '01', '02', '03', '04', '05', '06','07', '08', '09', '10', '11','12', '13', '14', '15', '16', '17', '18','19', '20', '21', '22', '23']
      },
      tooltip: {
        trigger: 'axis',
        valueFormatter: (value) =>  value + 'core'
      },
      yAxis: {
        type: 'value',
        name: 'core',
        nameTextStyle: {
          align: "right",
          padding:[0,8]
        }
      },
      series: [
        {
          data:[
            1,2,3,4,5,6,10,40,60.100,1,2,3,4,5,6,10,40,60.100,1,2,3,4,5,6,10,40,60.100,
          ],
          name:'当日',
          type: 'line',
          zlevel:1,
          showSymbol:false,
          smooth: true,
          areaStyle: {
            color:{
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(22, 93, 255, 0.2)' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgba(22, 93, 255, 0)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          lineStyle:{
            color: '#165DFF'
          }
        },
        {
          name:'前日',
          type:'line',
          showSymbol:false,
          data:yesData,
          lineStyle:{
            color:'#F5319D',
             type: 'dashed'
          }
        }
      ],
      legend:{
        show:true,
        itemWidth:18,
        itemHeight:18,
        itemGap:30,
        right: '10%',
        top:10,
        selectedMode:true,
        data: [
          {
            name: '前日',
            icon: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAOCAYAAAArMezNAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAG2SURBVHgBzZLBWdtAEIXfrGwSwAlKBZAKvE4DVgmhAhvsL9eECmIqwFzBxqgC1AGmAm0HmAqADwku3h1mbfyBBZgDHHgHSTs7ejP7zwKfWZnuNYoxhXfqrnZUl9e/Dze2zE0i0g8FFhtf6sFGMfE1KbABIRmzpfn41CjMdS+9q/XW/boM99+Bhzf6MFpkmukDzUDEjhMCVb3PnPFX4iqIQsfU9OsAahfSSYnofJFxgPKVgkoERUf+74Rk1+aMHSNk5q4kxbnunwfk1sAYOajh0y6KsrADCxetgKNK2vrxDIU8QkXqtwXXhdfGmFmSgy2JN8vk1mfJnvsM11RuR4GuKG1fyJU7zUFmtlPK9FHDV5Xjdypm+0xi8cRE4sKvSUxd6fpi2qFLSE4in7VM9/cEl55g8CWA/W/g1N/pimnHapXckMFx8ZjLZjuWMXdkL1qCG3yBbSjGUIa64/FII/sysJHl8bXP/27ayS1DhohoQiFj/ils68vppNs5OUESyBAVUZcVRSumtTlGabQEeyoFqqumtVUxf8wj12BTkB7f6t5fvCUuDM9zzmt9zn/1T17Kf+uKvlv34kTAH+pBXFgAAAAASUVORK5CYII=',
          },
          {
            name: '当日',
            icon: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAKCAYAAACwoK7bAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAF1SURBVHgBpVPRTcNADLWvaflCCqIp9ItsQDdomKD5RCVpKzEAbEA6AWWDoHaAbJBsQDcon1X5IJ8gEMZOLiGRIHzU0ul8Pt/z87MOYE+zfLrv+UTWFU2rcfwt2XTJlD2NMIUGMy/J7rRhIz5x+ssSj4o7VThdj+6kapZ8CE+8Xo8nNGoCPjBgVGFoWmMa1IAFUCEEqCBkBjGH7OzyC26bgJmlo91Uow1rwAwYVPLtIhkRnP6YzuAvQxjoAqGOuCVw16ehBnvmjEBTCXgl4n5iyQp6Hp2bupBIJu9E248WzLM6nFvcswJllWS3wvluiSg7xxOd7MowLY9iZrjutCCRx4YB05w0RGmYDTmUcxtzcoqZZe0ogsdql+9GfiZmwYPc4A9zu6NgwYxm1XcqZ52yrDNRQRg/cDuLNwPWVeCMBUsi05bOpQMGudDaulq+aLvCRELbEEXKhS7mwH926pEjqzhbE7qRD3HiU9y/rg/WnLFk+qN8A7cZfTXWrZ17AAAAAElFTkSuQmCC',
          }
        ]
      }
    }
    return option;
  }