完善空值时的展示

src/views/dashboard/overview/components/AlarnTypeBar/index.vue

@@ -47,6 +47,44 @@ const alarmTypeBar = ref<HTMLElement | undefined>(undefined);
 /**图实例对象 */
 const alarmTypeBarChart = ref<any>(null);
 
+// 将现有数据补全为期望的格式
+function completeData(existingData: any, expectedData: any) {
+  const result = expectedData.map((item: any) => {
+    const found = existingData.find(
+      (existingItem: any) => existingItem.name === item.name
+    );
+    if (found) return found;
+    else {
+      return item;
+    }
+  });
+
+  return result;
+}
+
+var wantArr = [
+  {
+    value: 0,
+    name: 'Critical',
+  },
+  {
+    value: 0,
+    name: 'Major',
+  },
+  {
+    value: 0,
+    name: 'Minor',
+  },
+  {
+    value: 0,
+    name: 'Warning',
+  },
+  {
+    value: 0,
+    name: 'Event',
+  },
+];
+
 //
 function initPicture() {
   Promise.allSettled([origGet(), top3Sel()]).then(resArr => {
@@ -56,20 +94,28 @@ function initPicture() {
       { name: 'SMF', value: 0 },
     ];
     let pieArr: any = [];
-
+    let testArr: any = [];
     if (resArr[0].status === 'fulfilled') {
-      resArr[0].value.data.map((item: any) => {
+      testArr = completeData(resArr[0].value.data, wantArr);
-        item.name = item.name + ':' + item.value;
+      testArr.map((item: any) => {
+        item.name = t('views.index.' + item.name) + ':' + item.value;
         pieArr.push(item);
       });
     }
+
     if (resArr[1].status === 'fulfilled') {
-      if (resArr[1].value.data.length) barArr = [];
       resArr[1].value.data.map((item: any) => {
         barArr.push(item);
       });
     }
-    console.log(pieArr);
+    let firstThreeItems = barArr
+      .sort((a: any, b: any) => {
+        return b.value - a.value;
+      })
+      .slice(0, 3);
+    pieArr.sort((a: any, b: any) => {
+      return b.value - a.value;
+    });
     const optionData: any = {
       title: [
         {
@@ -87,18 +133,20 @@ function initPicture() {
           left: '6%',
         },
       ],
-
+      tooltip: {
+        trigger: 'item',
+      },
       grid: [
         {
           top: '55%',
           left: '15%',
           right: '25%',
-          bottom:'3%',
+          bottom: '3%',
         },
       ],
       legend: {
         orient: 'vertical',
-        left: '75%',
+        left: '72%',
         top: '10%',
         data: pieArr.map((item: any) => item.name), //label数组
         textStyle: {
@@ -232,8 +280,6 @@ function fnDesign(container: HTMLElement | undefined, option: any) {
   });
   // 监听元素大小变化
   observer.observe(container);
-
-
 }
 
 onMounted(() => {