Echarts line chart line is rendered as a gradient line

If you want a line chart as shown in the figure, the line of the line is a gradient color, the colors on both sides are close to the color of the area, and the color in the middle is brighter. Use lineStyle in the series and set its color to a gradient color:

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      smooth: true,
      showSymbol: false, // 只有在 tooltip hover 的时候显示symbol
      lineStyle: { // 线条样式
        normal: {
          width: 4,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
            {
              offset: 0,
              color: 'rgb(0, 255, 255, 0)'
            },
            {
              offset: 0.2,
              color: 'rgb(0, 255, 255, 0)'
            },
            {
              offset: 0.4,
              color: 'rgb(0, 200, 200, 80)'
            },
            {
              offset: 0.6,
              color: 'rgb(0, 200, 200, 80)'
            },
            {
              offset: 0.8,
              color: 'rgb(0, 255, 255, 0)'
            },
            {
              offset: 1,
              color: 'rgb(0, 255, 255, 0)'
            }
          ])
        }
      },
      areaStyle: { // 区域面积
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgb(0, 50, 100)' // 0% 处的颜色
            },
            {
              offset: 0.5,
              color: 'rgb(0, 50, 100, 50)' // 50% 处的颜色
            },
            {
              offset: 1,
              color: 'rgb(0, 50, 100, 0)' // 100% 处的颜色
            }
          ]
        }
      },
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};