面积动态多条折线图echarts 配置项内容和展示

面积动态多条折线图

      const dataX = [
    "00:00",
    "02:00",
    "04:00",
    "06:00",
    "08:00",
    "10:00",
    "12:00",
    "14:00",
    "16:00",
    "18:00",
    "20:00",
    "22:00",
  ];
  const y = [40, 58, 40, 44, 61, 58, 77, 60, 78, 53, 70, 53];
  const y1 = [50, 48, 44, 62, 41, 78, 57, 70, 68, 93, 60, 73];
  const dataNowY = [90, 96, 84, 106, 102, 136, 134, 130, 146, 143, 130, 126];
  var option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(33,56,77,1)",
          borderColor: "rgba(33,56,77,1)",
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
          axisPointer: {
            lineStyle: {
              color: "rgba(19,255,241,1)",
              type: "dashed",
              width: 2,
            },
          },
        },
        legend: {
          right: "6%",
          itemWidth: 16,
          itemHeight: 12,
          itemGap: 25,
          textStyle: {
            color: "#000",
          },
        },
        grid: {
          top: "16%",
          right: "4%",
          bottom: "14%",
          left: "6%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: ["0", "10%"],
          data: dataX,
          axisLabel: {
            // interval: 0,
            textStyle: {
              color: "rgba(0,0,0, .7)",
              fontSize: 14,
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false, // 去除刻度线
          },
        },
        yAxis: {
          type: "value",
          boundaryGap: ["0", "20%"],
          axisTick: { show: false },
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "rgba(0,0,0, .7)",
              fontSize: 14,
            },
          },
          // y轴分割线的颜色
          splitLine: {
            lineStyle: {
              color: "rgba(0,0,0,.1)",
              type: "dashed",
            },
          },
        },
        series: [
          {
            name: "总流量",
            smooth: true,
            type: "line",
            // 填充颜色设置
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(19,255,241,.4)", // 渐变色的起始颜色
                  },
                  {
                    offset: 0.9,
                    color: "rgba(19,255,241,0)", // 渐变线的结束颜色
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            symbolSize: 8,
            // 设置拐点颜色以及边框
            itemStyle: {
              color: "rgba(19,255,241,1)",
            },
            data: y1,
          },
          {
            name: "进园",
            smooth: true,
            type: "line",
            // 填充颜色设置
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(241,162,42,.4)", // 渐变色的起始颜色
                  },
                  {
                    offset: 0.9,
                    color: "rgba(241,162,42,0)", // 渐变线的结束颜色
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            symbolSize: 4,
            // 设置拐点颜色以及边框
            itemStyle: {
              color: "rgba(241,162,42,1)",
            },
            data: y,
          },
          {
            name: "出园",
            smooth: true,
            type: "line",
            // 填充颜色设置
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(0,133,255,.4)", // 渐变色的起始颜色
                  },
                  {
                    offset: 0.9,
                    color: "rgba(0,133,255,0)", // 渐变线的结束颜色
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            symbolSize: 4,
            // 设置拐点颜色以及边框
            itemStyle: {
              color: "rgba(0,133,255,1)",
            },
            data: dataNowY,
          },
        ],
    }
    
    let currentIndex = -1;
      setInterval(() => {
        const dataLen = 12;
        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        currentIndex = (currentIndex + 1) % dataLen;
        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
    }, 3000);