<template>
  <div class="container6" @click="fn(ryxxcjqkUrl)">
    <div ref="bar" class="bar"></div>
  </div>
</template>
      
<script>
import { getGmzrkzbqk } from "@/api/jcxxxt.js";
export default {
  data() {
    return {
      data: [],
      ryxxcjqkUrl:"http://219.147.99.164:8082/population/route/bigdata/list-basepopulationinfo.html",
    };
  },
  created() {
    this.getGmzrkzbqk();
  },
  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: {
          position: "top",
          trigger: "item",
          formatter: function (params) {
            return (
              params.name +
              "<br/>" +
              params.marker +
              params.percent +
              "%" +
              "<br/>" +
              params.marker +
              params.value
            );
          },
        },
        legend: {
          show: "true",
          orient: "vertical",
          // left: 'left',
          // top: 'bottom',
          left: "6%",
          bottom: "6%",
          type: "scroll",
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            type: "pie",
            radius: [0, 70],
            center: ["65%", "50%"],
            roseType: "radius",
            label: {
              color: "#fff",
            },
            itemStyle: {
              borderRadius: 10,
            },
            data: this.data,
          },
        ],
      };
      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 getGmzrkzbqk() {
      try {
        const res = await getGmzrkzbqk();
        this.data = res.data.list;
        // console.log(this.data);
        this.$nextTick(() => {
          this.gr();
        });
      } catch (error) {
        console.log("数据获取失败");
      }
    },
  },
  mounted() {
    // this.gr();
  },
};
</script>
      
<style scoped lang="scss">
.container6 {
  // border: 1px solid #00ffff;
  width: 23.4375vw;
  height: 23.6559vh;
  text-align: left;
  font-weight: normal;
  color: #fff !important;

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