sgxt_web/src/views/home/model/qbfkCount.vue

<template>
  <div class="comom-title">
    <span class="title">情报反馈统计</span>
  </div> 
  <div class="comom-cnt">
    <pieEcharts echartsId='qbfk' :data="countData"></pieEcharts>
  </div>
</template>

<script setup>
import pieEcharts from "@/views/home/echarts/pieEcharts.vue";
import { qcckPost } from "@/api/qcckApi.js";
import { ref, onMounted } from 'vue';
const countData = ref([])

onMounted(() => {
  getCount();
});

const getCount = () =>{
  // 获取处置状态统计 
  qcckPost({cjLx:0}, '/mosty-gsxt/qbcj/getXscjTjByCzzt').then(res => {
    let color = [['#FF6B9A','#FF4B7A'],['#FFAA33','#FF8A00'],['#FFE699','#FFD666'],['#66B5FF','#3AA1FF']]
    let arr = res || [];
    countData.value = arr.map((item,idx)=>{
      return { label:item.zdmc, value:item.count,color:color[idx] }
    })
  });
}

</script>

<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
.xsBox{
    background: #052249;
    .xs-item{
        width: 31%;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background: url("~@/assets/images/content-item.png") no-repeat center center;
        background-size: 100% 100%;
    }
}

.qbfkBox {
    width: 100%;
    height: 100%;
    position: relative;
}
</style>