<template>
  <div class="container7">
    <div ref="bar" class="bar"></div>
  </div>
</template>
      
<script>
import { getHlhdqk } from "@/api/zhdjxt.js";
export default {
  data() {
    return {
      data: [],
      text: [],
      number1: [],
      number2: [],
    };
  },
  created() {
    this.getHlhdqk();
  },
  methods: {
    gr() {
      let myChart = this.$echarts.init(this.$refs.bar);
      var tootipTimer = null;
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["街镇", "村社区"],
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          // boundaryGap: false,
          data: this.text,
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: "#fff",
            }, // x轴刻度的颜色
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#fff ",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: false,
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "街镇",
            type: "line",
            // stack: 'Total',
            data: this.number1,
            label: {
              show: true,
              formatter: "{c}" + "次",
            },
          },
          {
            name: "村社区",
            type: "line",
            // stack: 'Total',
            data: this.number2,
            label: {
              show: true,
              formatter: "{c}" + "次",
            },
          },
        ],
      };
      myChart.setOption(option);
      let sizeFun = function () {
        myChart.resize();
      };
      window.addEventListener("resize", sizeFun);
      tootipTimer && tootipTimer.clearLoop();
      tootipTimer = null;
      // 调用轮播的方法
      tootipTimer = window.loopShowTooltip(myChart, option, {
        interval: 2000, // 轮播间隔时间
        loopSeries: true, // 是否开启轮播循环
      });
    },
    async getHlhdqk() {
      try {
        const res = await getHlhdqk();
        // console.log(res);
        this.data = res.data.list;
        this.data.forEach((item) => {
          this.text.push(item.name);
          this.number1.push(item.columns[0]);
          this.number2.push(item.columns[1]);
        });
        this.$nextTick(() => {
          this.gr();
        });
      } catch (error) {
        console.log("数据获取失败");
      }
    },
  },
  mounted() {},
};
</script>
      
<style scoped lang="scss">
.container7 {
  // border: 1px solid #00ffff;
  width: 23.6458vw;
  height: 24.6236vh;
  text-align: left;
  font-weight: normal;

  .bar {
    width: 23.6458vw;
    // height: 229px;
    height: 24.6236vh;
  }
}
</style>