echart-折线图渐变效果实现

效果： 代码

      let myChart = this.$echarts.init(this.$refs.lineChart);
      this.option = {
        xAxis: {
          type: "category",
          show: false,
          boundaryGap: false,
          data: ["a1", "a2", "a3", "a4", "a5", "a6"],
        },
        yAxis: {
          type: "value",
          show: false,
        },
        series: [
          {
            data: [11, 13, 15, 40, 30, 18, 15],
            type: "line",
            symbol: "circle",
            showSymbol: true,
            symbolSize: 4,
            colorBy: "series",
            smooth: true,
            lineStyle: {
              color: "#28CB00",
              width: 1,
            },
            itemStyle: {
              normal: {
                color: "#34C920 ",
              },
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#28CB00 ", // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "rgba(146,255,205, 0.76)", // 76% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(185,251,192, 0.2)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      };
      myChart.setOption(this.option);