多条折线数据

微信截图_20220909164129.png

async echartsFun() {
      this.dataArr = [];
      await ajaxDepFlowAna({ level: this.$parent.getProvince_cityFun() }).then(
        (res) => {
          if (res.data.length > 0) {
            this.dataArr = res.data;
            this.dataArr = [
              {
                time: "15:05",
                data: [
                  {
                    name: "单位名称",
                    liuliang: "123"
                  }
                ]
              }
            ];
          }
        }
      );
      let colorArr = [
        "rgba(50, 197, 255",
        "rgba(90, 216, 166",
        "rgba(126, 92, 247",
        "rgba(246, 189, 22",
        "rgba(232, 104, 74"
      ];
      let xArr = this.dataArr.map((v) => v.time);
      let yLength = this.dataArr[0].data.length;
      let seriesArr = [];
      for (let i = 0; i < yLength; i++) {
        let ydataName = this.dataArr[0].data[i].name;
        let ydata = [];
        this.dataArr.forEach((v2) => {
          ydata.push(v2.data[i].liuliang);
        });
        // console.log(ydataName);
        // console.log(ydata);
        let obj = {
          name: ydataName,
          type: "line",
          color: colorArr[i] + ")",
          // smooth: true,//弧度
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: colorArr[i] + ", 0.3)"
                  },
                  {
                    offset: 0.8,
                    color: colorArr[i] + ", 0)"
                  }
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
              shadowBlur: 10
            }
          },
          symbol: "circle",
          symbolSize: 5,
          data: ydata
        };
        seriesArr.push(obj);
      }

      const myChart = echarts.init(document.getElementById("rightEcharts4"));
      const t = this;
      const option = {
        tooltip: {
          trigger: "axis",
          confine: true, // 悬停内容超出画布用这个
          backgroundColor: "rgba(0,0,0,0.5)",
          borderWidth: 0,
          textStyle: {
            color: "#fff"
          },
          axisPointer: {
            type: "shadow"
          }
          // formatter(params) {
          //   const index = params[0].dataIndex; // 下标
          //   return (
          //     xArr[index] +
          //     "
" +
          //     "瞬时流量：" +
          //     t.dataObj.value[index] +
          //     "kb/s"
          //   );
          // }
        },
        grid: {
          top: "5%",
          left: "0%",
          right: "3%",
          bottom: "2%",
          containLabel: true // 显示范围包含坐标刻度
        },
        xAxis: [
          {
            type: "category",
            showMaxLabel: true, // X轴显示开头和最后一个信息
            data: xArr,
            axisLabel: {
              // rotate: 50,//倾斜
              textStyle: {
                fontSize: 12,
                color: "rgba(255,255,255,1)"
              }
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,1)",
                width: 1,
                type: "solid"
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            max: function (value) {
              if (value.max === 0) {
                return value.max + 10;
              }
            },
            axisLabel: {
              // 设置单位
              formatter: "{value} kb"
            },
            minInterval: 1,
            type: "value",
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255,1)",
                width: 1,
                type: "solid"
              }
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.6)"
              }
            }
          }
        ],
        series: seriesArr
      };
      myChart.setOption(option, true); // true无数据时更新试图
    }