<template>
  <div class="container5" @click="fn(ryxxcjqkUrl)">
    <div ref="bar" class="bar"></div>
  </div>
</template>
      
<script>
import { getNnnlfb } from "@/api/jcxxxt.js";
export default {
  data() {
    return {
      data: [],
      text: [],
      man: [],
      woman: [],
      total: [],
      ryxxcjqkUrl:"http://219.147.99.164:8082/population/route/bigdata/list-basepopulationinfo.html",
    };
  },
  created() {
    this.getNnnlfb();
  },
  methods: {
    fn(url) {
      layer.open({
        type: 2,
        content: url,
        area: ["80%", "80%"],
        title: "",
      });
    },
    gr() {
      let myChart = this.$echarts.init(this.$refs.bar);
      var tootipTimer = null;
      let option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["男", "女", "总数"],
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "8%",
          right: "8%",
          bottom: "3%",
          top: "18%",
          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.man,
            label: {
              show: true,
              formatter: "{c}" + "人",
            },
          },
          {
            name: "女",
            type: "line",
            // stack: 'Total',
            data: this.woman,
            label: {
              show: true,
              formatter: "{c}" + "人",
            },
          },
          {
            name: "总数",
            type: "line",
            // stack: 'Total',
            data: this.total,
            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 getNnnlfb() {
      try {
        const res = await getNnnlfb();
        this.data = res.data.list;
        // console.log(this.data);
        this.data.forEach((item) => {
          this.text.push(item.name);
          this.man.push(item.columns[0]);
          this.woman.push(item.columns[1]);
          this.total.push(item.columns[2]);
        });
        this.$nextTick(() => {
          this.gr();
        });
      } catch (error) {
        console.log("获取数据失败");
      }
    },
  },
  mounted() {
    // this.gr();
  },
};
</script>
      
<style scoped lang="scss">
.container5 {
  // border: 1px solid #00ffff;
  width: 23.4375vw;
  height: 22.5806vh;
  text-align: left;
  font-weight: normal;

  .bar {
    width: 23.4375vw;
    height: 22.5806vh;
  }
}
</style>