echarts饼图例子

效果

 代码：index。vue

      

        
风险统计
        

          

            

              风险类别： 
              
                设备设施
                作业活动
                工业节点
              
            
            

              风险等级： 
              
                全部
                重大风险
                较大风险
                一般风险
                低风险
              
            
          
          

            
            
          
        
      

import { message, Modal, Empty } from "ant-design-vue";
import riskStatistics from "./components/riskStatistics.vue";

 

const getDataRisk = () => {
  getRiskStatistics({
    RiskPointType: RiskPointType.value,
    RiskLevelType: RiskLevelType.value,
  })
    .then((res) => {
      piedata.value = res.map(function (item) {
        return {
          name: item.RiskPointStatisticGroupName,
          value:
            RiskLevelType.value == "ExtremeRisk"
              ? item.ExtremeCount
              : RiskLevelType.value == "LargerRisk"
              ? item.LargerCount
              : RiskLevelType.value == "GeneralRisk"
              ? item.GeneralCount
              : RiskLevelType.value == "LowRisk"
              ? item.LowCount
              : item.TotalCount,
        };
      });
      allCounts.value = res.reduce((prev, cur) => {
        return (
          prev +
          Number(
            RiskLevelType.value == "ExtremeRisk"
              ? cur.ExtremeCount
              : RiskLevelType.value == "LargerRisk"
              ? cur.LargerCount
              : RiskLevelType.value == "GeneralRisk"
              ? cur.GeneralCount
              : RiskLevelType.value == "LowRisk"
              ? cur.LowCount
              : cur.TotalCount
          )
        );
      }, 0);
    })
    .catch((err) => {
      console.log(err);
    });
};

onMounted(async () => {

  getDataRisk();

});

riskStatistics.vue