大客户数据分析请求优化

src/views/Home/cells/CustomerAnalyse.vue

@@ -35,35 +35,35 @@ export default {
         1: "iaefts",
         2: "expben",
       },
+      category: [],
+      seriesData : [] ,
+      seriesData1 : [] ,
+      seriesData2 : [] ,
     };
   },
   mounted() {
-    this.$nextTick(() => {
+    // 仅在整个视图都被渲染之后才会运行的代码
+    this.$nextTick(async() => {
+      await this.loadData();
       this.loadCharts();
       this.loadChartsBind = this.loadCharts.bind(this);
       window.addEventListener("resize", this.loadChartsBind);
     });
   },
   methods: {
-    //加载图标函数
-    async loadCharts() {
-      if (this.echartInstance) {
-        this.echartInstance.dispose();
-      }
-      this.echartInstance = echarts.init(
-        this.$el.querySelector(".chart-container .chartWrapper .chart")
-      );
+    async loadData() {
       //统计 业务量
-      let volume = await busvolume();
+      const volume = await busvolume();
       //统计 融资量
-      let amount = await finamount();
+      const amount = await finamount();
       //统计 费用收益
-      let income = await expincome();
-      //定义 seriesData数组 金额  category数组 客户名
-      let seriesData = [];
-      let seriesData1 = [];
-      let seriesData2 = [];
-      let category = [];
+      const income = await expincome();
+      let categoryArr = [];
+            //定义 seriesData数组 金额  category数组 客户名
+      // let seriesData = [];
+      // let seriesData1 = [];
+      // let seriesData2 = [];
+      
       // 优先遍历客户名，方便后续的数组匹配
       // volume.forEach((v) => {
       //   console.log(v.nam1)
@@ -73,18 +73,17 @@ export default {
       //   console.log(category)
       // });
       
-      console.log("volume.length:" + volume.length);
-      console.log(category);
       for (let i = 0; i < volume.length; i++) {
         let v = volume[i].nam1;
         // console.log(typeof v);
         // console.log(volume[i].nam1);
-        category.push(v);
+        categoryArr.push(v);
 
         // console.log(category.toString());
         // console.log(category);
         // console.log(typeof category);
       }
+      this.category = categoryArr;
       //存在bug后续要解决
 
       // amount.forEach((v) => {
@@ -107,37 +106,45 @@ export default {
       //     }
       //   }
       // });
-
+      const volumeArr = []
       volume.forEach((v) => {
-        for (let i = 0; i < category.length; i++) {
-          if (category[i] == v.nam1) {
-            seriesData[i] = v.amount;
+        for (let i = 0; i < categoryArr.length; i++) {
+          if (categoryArr[i] == v.nam1) {
+            volumeArr.push(v.amount)
             break;
           }
         }
       });
-
+      this.seriesData = volumeArr;
+      const amountArr = []
       amount.forEach((v) => {
-        for (let i = 0; i < category.length; i++) {
-          if (category[i] == v.nam1) {
-            seriesData1[i] = v.amount;
+        for (let i = 0; i < categoryArr.length; i++) {
+          if (categoryArr[i] == v.nam1) {
+           amountArr.push(v.amount);
             break;
           }
         }
       });
-
+      this.seriesData1 = amountArr;
+      const incomeArr = []
       income.forEach((v) => {
-        for (let i = 0; i < category.length; i++) {
-          if (category[i] == v.nam1) {
-            seriesData2[i] = v.amount;
+        for (let i = 0; i < categoryArr.length; i++) {
+          if (categoryArr[i] == v.nam1) {
+            incomeArr.push(v.amount);
             break;
           }
         }
       });
-      console.log(category);
-      console.log(seriesData);
-      console.log(seriesData1);
-      console.log(seriesData2);
+      this.seriesData2 = incomeArr;
+    },
+    //加载图标函数
+    loadCharts() {
+      if (this.echartInstance) {
+        this.echartInstance.dispose();
+      }
+      this.echartInstance = echarts.init(
+        this.$el.querySelector(".chart-container .chartWrapper .chart")
+      );
 
       const option = {
         tooltip: {
@@ -161,23 +168,23 @@ export default {
         },
         yAxis: {
           type: "category",
-          data: category,
+          data: this.category,
         },
         series: [
           {
             name: "业务量金额（美元）",
             type: "bar",
-            data: seriesData,
+            data: this.seriesData,
           },
           {
             name: "融资量金额（万美元）",
             type: "bar",
-            data: seriesData1,
+            data: this.seriesData1,
           },
           {
             name: "费用收益金额（千美元）",
             type: "bar",
-            data: seriesData2,
+            data: this.seriesData2,
           },
         ],
       };