<template>
  <div class="container">
    <div
      v-for="(axis, index) in target"
      :key="index"
      style="width: 100%; height: 350px; margin-bottom: 20px; overflow: hidden"
    >
      <div class="roseChart" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>
  
 
   
   <script>
export default {
  data() {
    return {
      target: [
        //循环5个折线图
        { id: "1", name: "折线图1" },
        { id: "2", name: "折线图2" },
        { id: "3", name: "折线图3" },
        { id: "4", name: "折线图4" },
        { id: "5", name: "折线图5" },
      ],
      seriesData: [],
    };
  },
  created() {
    let params = {
      siteId: "",
      startTime: this.time[0],
      endTime: this.time[1],
    };
    API.GetList(params).then((res) => {
      if (res.code == "200") {
        this.seriesData = res.data;
        this.$nextTick(() => {
          this.drawRose();
        });
      } else {
        return false;
      }
    });
  },
  methods: {
    drawRose() {
      var roseCharts = document.getElementsByClassName("roseChart");
      for (var i = 0; i < roseCharts.length; i++) {
        // 通过for循环，在相同class的dom内绘制元素
        var myChart = echarts.init(roseCharts[i]);
        var option = {
          color: ["#07cdbd", "#28bf7e", "#ed7c2f", "#f2a93b"],
          title: {
            text:
              "[" + this.seriesData[i].name + "]" + "-" + this.target[i].name,
            textStyle: {
              color: "#666",
              fontWeight: "bold",
              fontSize: 16,
            },
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          toolbox: {
            show: true,
            feature: {
              magicType: {
                type: ["line", "bar"],
              },
              saveAsImage: {},
            },
          },
          grid: {
            left: "1%",
            right: "1%",
            bottom: "1%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "rgba(0,0,0,.1)",
                },
              },
              axisLabel: {
                //interval: 0,
                textStyle: {
                  color: "rgba(0,0,0,.6)",
                  fontWeight: "normal",
                  fontSize: "12",
                },
              },
              data: this.seriesData[i].dateTime,
            },
          ],
          yAxis: [
            {
              type: "value",
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "rgba(0,0,0,.1)",
                },
              },
              axisLabel: {
                //interval: 0,
                textStyle: {
                  color: "rgba(0,0,0,.6)",
                  fontWeight: "normal",
                  fontSize: "12",
                },
              },
            },
          ],
          series: [
            {
              name: this.seriesData[i].name,
              type: "line",
              barWidth: 25,
              stack: "总量",
              smooth: false,
              symbol: "circle",
              symbolSize: 5,
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(98, 201, 141, 0.5)",
                      },
                      {
                        offset: 1,
                        color: "rgba(98, 201, 141, 0.1)",
                      },
                    ],
                    false
                  ),
                  shadowColor: "rgba(0, 0, 0, 0.1)",
                  shadowBlur: 6,
                },
              },
              data: this.seriesData[i].dataVal,
            },
          ],
        };
        myChart.setOption(option, true);
        window.addEventListener("resize", () => {
          if (myChart) {
            myChart.resize();
          }
        });
      }
    },
  },
};
</script>