【Echarts】实现渐变颜色曲线图

话不多说先上效果图

实现参数

import * as echarts from "echarts";
const options = {
    xAxis: {
      type: "category",
      data: [
        "1月",
        "2月",
        "3月"
      ],
      axisLabel: {
        fonSize: 14,
        fontFamily: "PingFangSC, PingFang SC",
        color: "rgba(255,255,255,0.9)",
        lineHeight: 20,
      },
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: "rgba(179,223,255,0.5)",
          width: 3,
        },
      },
    },
    yAxis: {
      type: "value",
      name: "",
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: ["#3D5266"],
        },
      }
    },
    grid: {
      left: 10,
      right: 10,
      top: "30px",
      bottom: "10px",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    series: [
        {
        data: [180, 250, 170],
        type: "line",
        smooth: true,
        showSymbol: false,
        lineStyle: {
          // 系列级个性化折线样式
          width: 3,
          type: "solid",
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(255,255,255,0.8)",
            },
            {
              offset: 1,
              color: "rgba(216,216,216,0.4)",
            },
          ]), //线条渐变色
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(230,230,230, 0.5)",
                },
                {
                  offset: 1,
                  color: "rgba(117,117,117,0)",
                },
              ],
              false
            ),
            shadowBlur: 10,
          },
        }//线条以下区域渐变色
      }
    ]
}