折线统计图实现渐变色

使用了echats插件

官网：https://echarts.apache.org/zh/index.html

渐变色官网实例：https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch

其他官网实例：https://echarts.apache.org/examples/zh/index.html

我做的实现效果图：

 引入echats和上手绘制，请先移步这里，（我也是刚学）https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

 存放图表位置：

<div class="history">
      <div ref="chart" class="chart" />
 </div>

 style：

.chart {
      width: 100%;
      height: 208px;
    }

然后引入： import echarts from 'echarts'

 chart: {
            element: null,
            option: {
              grid: {
                left: 15,
                right: 24,
                bottom: 0,
                top: 10,
                containLabel: true
              },
              tooltip: {
                trigger: 'axis'
              },
              xAxis: {
                type: 'category',
                data: ['4/18 0h', '4/18 1h', '4/18 2h', '4/18 3h', '4/18 4h', '4/18 5h', '4/18 6h', '4/18 7h',
                  '4/18 8h', '4/18 9h', '4/18 10h', '4/18 11h'
                ],
                //data: ['4/18 0h', '4/18 1h', '4/18 2h', '4/18 3h', '4/18 4h', '4/18 5h', '4/18 6h', '4/18 7h', '4/18 8h', '4/18 9h', '4/18 10h', '4/18 11h', '4/18 12h', '4/18 13h', '4/18 14h', '4/18 15h', '4/18 16h', '4/18 17h', '4/18 18h', '4/18 19h', '4/18 20h', '4/18 21h', '4/18 22h', '4/18 23h']
              },
              yAxis: {
                type: 'value',
                scale: true,
                minInterval: 10,
                splitLine: {
                  show: false
                }
              },
              series: [{
                color: "#5A8CE9",
                name: '',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: [],
                //实现折线统计图阴影两种颜色有深入浅
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#5A8CE9'
                  }, {
                    offset: 1,
                    color: '#ffe'
                  }])
                },
              }],
              // 阴影

            }
          }