折线-阴影图

 const options = {
        legend: {
          data: ["出站流量", "入站流量"],
          top: 35,
          right: 30,
          icon: "square", // 修改形状
          itemHeight: 24, // 修改icon图形大小
          itemWidth: 24,
          itemGap: 50, // 修改间距
          textStyle: {
            fontSize: 24,
            color: "#ccc",
            padding: [0, 0, 0, 14], // 修改文字和图标距离
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "5%",
          top: "20%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
          axisLabel: {
            show: true,
            rotate: 0,
            interval: 0,
            textStyle: {
              color: "#8B92A1",
              fontSize: 28,
              padding: [16, 0, 0, 0],
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            // y轴线
            show: true,
            textStyle: {
              color: "#A3D2FE",
              fontSize: 28,
            },
            textStyle: {
              color: "#8B92A1",
              fontSize: 28,
              // padding: [16, 0, 0, 0]
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed", // 虚线
              color: "#8B92A1",
            },
          },
        },
        series: [
          {
            name: "出站流量",
            type: "line",
            // 设置区域样式透明度
            areaStyle: {
              opacity: 0, // 透明度为 50%
            },
            lineStyle: {
              width: 3.3, // 设置线条宽度为3
            },
            symbol: "none", //去掉折线上面的小圆点
            data: [120, 322, 101, 134, 90, 100, 151],
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(253, 175, 0, 1)" },
                { offset: 0.5, color: "rgba(253, 175, 0, 0.5)" },
                { offset: 1, color: "rgba(253, 175, 0, 0)" },
              ]),
            },
            color: "#FDAF00", //线条颜色
            smooth: false, //线条平滑
          },
          {
            name: "入站流量",
            type: "line",
            // 设置区域样式透明度
            areaStyle: {
              opacity: 0.3, // 透明度为 50%
            },
            lineStyle: {
              width: 3.3, // 设置线条宽度为3
            },
            symbol: "none", //去掉折线上面的小圆点
            data: [220, 182, 191, 234, 290, 190, 160],
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(2, 192, 196, 1)" },
                { offset: 0.5, color: "rgba(2, 192, 196, 0.5)" },
                { offset: 1, color: "rgba(2, 192, 196, 0)" },
              ]),
            },
            color: "#02C0C4", //线条颜色
            smooth: false, //线条平滑
          },
        ],
      };