<template>
  <div class="container8" @click="fn(yqgkryflqkUrl)">
    <div class="date">{{ currentDate }}</div>
    <div ref="bar" class="bar"></div>
  </div>
</template>
      
<script>
import { getYqgkryflqk } from "@/api/jcxxxt.js";
export default {
  data() {
    return {
      currentDate: "",
      data: [],
      name: [],
      value: [],
      yqgkryflqkUrl:
        "http://219.147.99.164:8082/population/route/bigdata/list-coronavirus.html",
    };
  },
  created() {
    this.getYqgkryflqk();
  },
  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 = {
        xAxis: {
          type: "category",
          data: this.name,
          axisTick: {
            // alignWithLabel: true,
            lineStyle: {
              color: "#fff",
            }, // x轴刻度的颜色
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize: "12",
            },
            rotate: 30,
          },
          axisLine: {
            lineStyle: {
              color: "#fff ",
            },
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false, //刻度线
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "2%",
          top: "20%",
          containLabel: true,
        },
        tooltip: {
          show: true,
          borderWidth: 0,
          position: "right",
          // label:{
          //    backgroundColor: "#fff",
          //    width:'120%',
          //    height:'88px'
          // },
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: "{b}" + "&nbsp" + ":" + "&nbsp" + "{c}" + "人",
        },
        series: [
          {
            data: this.value,
            type: "bar",
            color: "#f10909",
            barWidth: "60%",
            // emphasis :{
            //     itemStyle:{
            //     color:"rgba(255,255,255,0.2)"
            //     }
            // },
            label: {
              show: true,
              position: "top",
              formatter: "{c}" + "人",
              textStyle: {
                fontSize: "12",
                color: "#fff",
                fontWeight: 100,
              },
            },
          },
        ],
      };
      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 getYqgkryflqk() {
      try {
        const res = await getYqgkryflqk();
        //  console.log(res);
        this.data = res.data.list;
        this.currentDate = res.data.data.titleText;
        this.data.forEach((item) => {
          this.name.push(item.name);
          this.value.push(item.value);
        });
        this.$nextTick(() => {
          this.gr();
        });
      } catch (error) {
        console.log("数据获取失败");
      }
    },
  },
  mounted() {
    // this.gr();
    // this.getFormatDate()
  },
};
</script>
      
<style scoped lang="scss">
.container8 {
  //   border: 1px solid #00ffff;
  width: 23.6458vw;
  height: 24.5161vh;
  position: relative;

  .bar {
    width: 23.6458vw;
    height: 24.5161vh;
  }

  .date {
    // height: 29px;
    color: #fff;
    font-size: 0.9896vw;
    font-weight: 700;
    position: absolute;
    left: 0.5208vw;
    top: 0;
  }
}
</style>