<template>
  <div class="comom-cnt" v-loading="loading">
   <PieEcharts echartsId="zqflEcharts" color="#333" :data="dataList"></PieEcharts>
  </div>
</template>

<script setup>
import { randomHexColor ,choseRbgb} from '@/utils/tools.js'
import PieEcharts from "@/views/home/echarts/pieEcharts.vue";
import { qcckGet } from "@/api/qcckApi.js";
import { onMounted , ref} from "vue";
const loading=ref(false)
const dataList = ref([]);
const searchData = ref({})
onMounted(()=>{
  getDate()
})

const init = (val) =>{
  searchData.value = val;
  getDate()
}

function getDate (){
  let params = { ...searchData.value }
  delete params.dateRange;
  loading.value = true;
  qcckGet(params,'/mosty-gsxt/tbGsxtZdqt/getSqflTj').then(res=>{
    loading.value = false;
    let arr = res || [];
    dataList.value = arr.map(item=>{
        let color = randomHexColor()
        let color1 = choseRbgb(color,0.5)
        return{ label: item.zdmc, value: item.dm, color:[color,color1] }
    })
  }).catch(()=>{
    loading.value = false;
  })
}
defineExpose({init})
</script>


<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
.comom-cnt{
    width: 100%;
    height: 100%;
}

</style>