Echarts实现渐变式折线图

ps: 因为用的比较多了，就不留注释了，不明白自行查询Echarts文档

实现效果

实现代码

HTML部分

      <div class="chart_line" ref="chartsLine"></div>

JS部分

  public mounted() {
    this.drawChartLine();
  }

  public drawChartLine() {
    const chart = echarts.init(this.$refs.chartsLine as HTMLCanvasElement);
    const option: any = {
      backgroundColor: '#fff',
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: '#57617B',
          },
        },
      },
      legend: {
        icon: 'rect',
        itemWidth: 14,
        itemHeight: 5,
        itemGap: 13,
        data: ['维度1', '维度2'],
        right: '4%',
        textStyle: {
          fontSize: 12,
          color: '#000',
        },
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        top: '10%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          axisTick: {
            show: false,
          },
          axisLabel: {
            margin: 5,
            textStyle: {
              fontSize: 14,
              color: '#000',
            },
          },
          axisLine: {
            lineStyle: {
              color: '#ddd',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              color: '#ddd',
            },
          },
          data: ['测试1', '测试2', '测试3', '测试4', '测试5'],
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: 'y轴单位',
          nameTextStyle: {
            color: '#000',
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#ddd',
            },
          },
          axisLabel: {
            margin: 5,
            textStyle: {
              fontSize: 14,
              color: '#000',
            },
          },
          splitLine: {
            lineStyle: {
              type: 'solid',
              color: '#ddd',
            },
          },
        },
      ],
      series: [
        {
          name: '维度1',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 3,
            },
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgb(1, 103, 255)',
                  },
                  {
                    offset: 1,
                    color: 'rgb(1, 103, 255, 0.1)',
                  },
                ],
                false
              ),
            },
          },
          itemStyle: {
            normal: {
              color: 'rgb(1, 103, 255)',
            },
          },
          data: [32, 34, 39, 35, 38],
        },
        {
          name: '维度2',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 3,
            },
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgb(255, 5, 192)',
                  },
                  {
                    offset: 1,
                    color: 'rgb(255, 5, 192, 0.1)',
                  },
                ],
                false
              ),
            },
          },
          itemStyle: {
            normal: {
              color: 'rgb(255, 5, 192)',
            },
          },
          data: [25, 22, 26, 28, 27],
        },
      ],
    };
    chart.setOption(option);
  }

demo是在vue+ts框架里写的，如果是在别的框架项目中使用，直接复制option即可