Echarts折线图实现区域颜色渐变

效果图：

 渐变核心代码：

 series: [
      //第一个区域
      {
        name: "点击率日环比",
        type: "line",
        data:  [-12, 37, -69, -2, -48, 67, 94],
        color: "#FF9F2F",
        symbolSize: 6, //设定实心点的大小
        label: {
          show: true, // 在折线拐点上显示数据
          fontSize: 8,
          color: "#fff",
          fontWeight: 10,
        },
        areaStyle: {//区域样式
          origin: "start",//向最小值方向渐变，y轴有负值要写
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(255,159,47, 0.2)",
            },
            {
              offset: 1,
              color: "rgba(255,159,47, 0)",
            },
          ]),
        },
      },
      //第二个区域
      {
        name: "下载率日环比",
        type: "line",
        data: [-48, -4, 41, -3, 19, -60, 7],
        color: "#2FF5FF",
        symbolSize: 6,
        label: {
          show: true,
          fontSize: 8,
          color: "#fff",
          fontWeight: 10,
        },
        areaStyle: {
          origin: "start",
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(47,245,255, 0.2)",
            },
            {
              offset: 1,
              color: "rgba(47,245,255, 0)",
            },
          ]),
        },
      },
    ],

如果你想看别的部分，可以看整体代码：

<template>
  <div id="stacked-line"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
var option;
var lineData = [
  [-12, 37, -69, -2, -48, 67, 94],
  [-48, -4, 41, -3, 19, -60, 7],
];
onMounted(() => {
  var myChart = echarts.init(document.getElementById("stacked-line"));
  option = {
    tooltip: {
      trigger: "axis",
      textStyle: {
        align: "left",
        color: "#fff",
        fontSize: "12px",
      },
      backgroundColor: "rgba(82,82,82,0.4)",
      borderColor: "rgba(82,82,82,0.4)",
    },
    legend: {
      //字体对应折线标识
      data: ["点击率日环比", "下载率日环比"],
      right: "10%",
      top: "5%",
      textStyle: {
        color: "#fff",
        fontSize: "7px",
      },
      itemHeight: 6, //圆心
      itemWidth: 0, //折线
      itemGap: 16, //间隔
    },
    //折线图位置
    grid: {
      left: "1%",
      right: "4%",
      bottom: "1%",
      top: "18%",
      containLabel: true, //刻度标签
    },
    xAxis: {
      boundaryGap: false,
      axisLabel: {
        fontSize: "8px", //文字的字体大小
        color: "#fff",
      },
      axisTick: {
        //x轴刻度
        show: false,
      },
      axisLine: {
        //x轴线样式
        show: false,
        lineStyle: {
          color: "#ccc",
          type: [0, 5],
          dashOffset: 5,
        },
      },
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    },
    yAxis: {
      type: "value",
      interval: 50,
      min: -100,
      max: 100,
      splitLine: {
        //分割线
        lineStyle: {
          color: "rgba(255,255,255,0.2)",
          type: [10, 10],
          dashOffset: 5,
        },
      },
      axisLabel: {
        color: "#fff",
        fontSize: "8px",
      },
    },
    series: [
      {
        name: "点击率日环比",
        type: "line",
        data: lineData[0],
        color: "#FF9F2F",
        symbolSize: 6, //设定实心点的大小
        label: {
          show: true, // 在折线拐点上显示数据
          fontSize: 8,
          color: "#fff",
          fontWeight: 10,
        },
        areaStyle: {
          origin: "start",
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(255,159,47, 0.2)",
            },
            {
              offset: 1,
              color: "rgba(255,159,47, 0)",
            },
          ]),
        },
      },
      {
        name: "下载率日环比",
        type: "line",
        data: lineData[1],
        color: "#2FF5FF",
        symbolSize: 6,
        label: {
          show: true,
          fontSize: 8,
          color: "#fff",
          fontWeight: 10,
        },
        areaStyle: {
          origin: "start",
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(47,245,255, 0.2)",
            },
            {
              offset: 1,
              color: "rgba(47,245,255, 0)",
            },
          ]),
        },
      },
    ],
  };
  myChart.setOption(option, true);
});
</script>

<style lang="scss" scoped>
#stacked-line {
  width: 100%;
  height: 100%;
}
</style>