<template>
  <div class="container7" @click="fn(gqyajzbUrl)">
    <div ref="pie" class="pie"></div>
  </div>
</template>
  
<script>
import { getGqyajzb } from '@/api/ddzhxt.js'
export default {
  data() {
    return{
        data:[],
        gqyajzbUrl:'http://219.147.99.164:8082/servicecity/route/bigdata/list-case-info-gqyajzb.html',
    }
  },
 
  created () {
    this.getGqyajzb()

  },

  methods: {
    fn(url) {
      layer.open({
        type: 2,
        content: url, 
        area: ['80%', '80%'],
        title:'' ,
      });
    },
    gr() {
      let myChart = this.$echarts.init(this.$refs.pie)
      var tootipTimer = null;
      let option = {
        legend: {
          orient: 'vertical',
          left: 'left',
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: 'item',
          position:'top',
          formatter: function (param) {
            return param.name+"<br/>"+param.marker+param.percent+'%'+"<br/>"+param.marker+param.value;
          }
        },

        series: [
          {
            type: 'pie',
             radius: [0, 60],
             center: ['50%', '60%'],
            roseType: 'area',
            itemStyle: {
              
              normal: {
                borderRadius: 7,
                label: {
                  textStyle: {
                    color: "#fff"
                  }
                }
              }
            },
            labelLine: {
              normal: {
                length: 10
              }
            },
            data: this.data,
          }
        ]
      };
      myChart.setOption(option);
      // window.onresize = myChart.resize
      let sizeFun = function () {
        myChart.resize();
      };
      window.addEventListener("resize", sizeFun);
      
      tootipTimer && tootipTimer.clearLoop();
            tootipTimer = null;
            // 调用轮播的方法
            tootipTimer = window.loopShowTooltip(myChart, option, {
                interval: 2000, // 轮播间隔时间
                loopSeries: true // 是否开启轮播循环
            });
    },
   async getGqyajzb () {
    try {
    const {data}= await getGqyajzb()
      //  console.log(data);
      this.data = data.list
      this.$nextTick(()=>{
            this.gr();
           })
    } catch (error) {
      console.log('数据获取失败');
    }
   }
  },
  mounted() {
  // setTimeout(() => {
  //   this.gr()
  // }, 300);

  },
};
</script>
  
<style scoped lang="scss">
.container7 {
   /* border: 1px solid #00ffff;  */
  width: 16.9271vw;
  height: 20.0647vh;
  text-align: left;
  .pie {
  width: 16.9271vw;
  height: 20.0647vh;
}
}


</style>