<template>
      <div> 
      <Title :title="title"></Title>
      <div>
        <div style="height: 150px;" ref = "box1"></div>
      </div>
      </div>
    </template>
    <script setup>
    //1
    import {ref,onMounted} from 'vue';//3生命周期
    
    import { Pie } from '@antv/g2plot';
    import Title from'./Title.vue'
    import{get} from '@/utils/request.js';//4步引用
    //8声明空数组接受后端设备数据
    const empData = ref([]);
    const title = ref('设备状态分布');
    const box1 = ref(null);
    //2声明饼图构造函数
    const loadPie = ()=>{
      //复制粘贴
      const piePlot = new Pie(box1.value, {//此行需要更改
     appendPadding: 10,
     //9步
     data:empData.value,//此行需要更改
     angleField: 'value',
     colorField: 'type',
     radius: 0.9,
     color:['blue','pink'],
     label: {
      type: 'outer',
      offset: '-30%',
      // content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
      content:'{name}{value}个',
      style: {
       fontSize: 12,
       textAlign: 'center',
       fill:'white'
      },
     },
     //图例
     legend:{
      position:"bottom",
      itemName:{
        style:{
          fill:"white"
        }
      }
     },
     interactions: [{ type: 'element-active' }],
    });
    
    piePlot.render();
    }
    //5,6两步：声明设备在线离线
    const getEmpData = async()=>{
      //get(url,[])
    let response = await get('/dashboard/queryDeviceOnlineNumber')
    console.log(response);
    //8
    empData.value = response.data;
    }
    //3引进生命周期
    onMounted(async()=>{
      //7调用函数
     await getEmpData();
      //输出图，非此步
    loadPie();
    })
    </script>
    
    <style lang="less">
      
    </style>