饼图代码提交

src/module/api/apiList.js

@@ -63,5 +63,6 @@ export const arCompanyMonthlyBar = (company) => fetch("/api/query/dash_board/act
 // 开票月份 应收账款（结算单位）
 export const arMonthlyCompanyBar = (month) => fetch("/api/query/dash_board/action/get_ar_monthly_company_bar", {aux: {month: month}}, "POST")
 
-// export const transportTypeFinishPie = () => fetch("/api/query/dash_board/action/get_order_finish_data_by_transport_type_day", {}, "POST")
+export const transportTypeOrderFinishPie = (date) => fetch("/api/query/dash_board/action/get_order_finish_data_by_transport_type_day", {aux: {"cur_day":date}}, "POST")
+export const customerOrderFinishPie = (date) => fetch("/api/query/dash_board/action/get_order_finish_data_by_customer_day", {aux: {"cur_day":date}}, "POST")
 

src/module/databoard/components/chart/ring-pie-chart.vue

@@ -12,44 +12,40 @@ export default {
         tooltip: {
           trigger: 'item'
         },
-        series: [
-          {
-            name: this.name,
-            type: 'pie',
-            radius: ['40%', '70%'],
-            avoidLabelOverlap: false,
+        series: {
+          name: this.name,
+          type: 'pie',
+          radius: ['40%', '70%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            // position: 'center',
+            fontSize: 12,
+            color: '#5eeef4',
+            formatter(param) {
+              return param.name + '\r\n' + param.value
+            }
+          },
+          emphasis: {
             label: {
               show: true,
-              // position: 'center',
               fontSize: 12,
+              fontWeight: 'bold',
               color: '#5eeef4',
-              formatter(param) {
-                return param.name + '\r\n' + param.value
-              }
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: 12,
-                fontWeight: 'bold',
-                color: '#5eeef4',
-              }
-            },
-            data: this.data
-          }
-        ]
+            }
+          },
+          data: this.data
+        }
       },
       chart: null,
     }
   },
   watch: {
-      data(newValue, oldValue){
-          this.option.data = newValue;
-          this.chart.setOption(this.option);
+      data(n, o){
+        this.refresh();
       },
-      name(newName, oldName){
-        this.option.series.name = newName;
-        this.chart.setOption(this.option);
+      name(n, o){
+        this.refresh();
       }
   },
   methods: {
@@ -57,13 +53,20 @@ export default {
       if (this.chart) {
         this.chart.resize();
       }
+    },
+    refresh(){
+      this.option.series.data = this.data;
+      this.option.series.name = this.name;
+      if (this.chart){
+        this.chart.setOption(this.option);
+      }
     }
   },
   mounted() {
     setTimeout(() => {
       let chartDom = this.$refs.chart;
       this.chart = echarts.init(chartDom);
-      this.chart.setOption(this.option);
+      this.refresh();
       window.addEventListener('resize', this.resizeChart);
     }, 500)
   },

src/module/databoard/databoard/js/api.js

-// import {transportTypeFinishPie} from '../../../api/apiList';
-//
-// export const getTransportTypeFinishPie = (month) => {
-//   var data = transportTypeFinishPie();
-//   var res = {};
-//   console.log(data);
-//   console.log("data");
-// }
-//
-// export const refreshData = () => {
-//   getTransportTypeFinishPie();
-// }

src/module/databoard/databoard/js/indexPieData.js

+import {customerOrderFinishPie, transportTypeOrderFinishPie} from '../../../api/apiList';
+
+export const getTransportTypeOrderFinishPie = async (callback,date) => {
+  let choiceMap = {
+    '10': '汽运',
+    '20': '铁运',
+    '30': '水运',
+    '50': '码头/仓库',
+  }
+  let resList = new Array();
+  await transportTypeOrderFinishPie(date).then(function (res) {
+    for (let key in choiceMap) {
+      resList.push({name: choiceMap[key], value: res.data[key].cur_unit_weight});
+    }
+  });
+  callback(resList);
+  return resList
+}
+export const getCustomerOrderFinishPie = async (callback,date) => {
+
+  let resList = new Array();
+  await customerOrderFinishPie(date).then(function (res) {
+    for (let key in res.data) {
+      resList.push({name: key, value: res.data[key].cur_unit_weight});
+    }
+  });
+  callback(resList);
+  return resList
+}

src/module/databoard/index.vue

 <template>
-  <div class="main">
+  <div class="main" @click="log()">
     <div class="middle">
       <display-board class="trade_left" title="营业情况">
         <div
@@ -133,8 +133,8 @@
       </div>
       <display-board class="trade_right" title="当日订单量占比">
         <div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
-          <ring-pie-chart ref="transportTypeChart" style="width: 100%;height: 50%;" name="运输类型占比" :data="mockData.drddlzb.transportType" @click.native="routerTo('/order-proportion')"/>
-          <ring-pie-chart ref="customerChart" style="width: 100%;height: 50%;" name="公司占比" :data="mockData.drddlzb.customer" @click.native="routerTo('/order-proportion')"/>
+          <ring-pie-chart ref="transportTypeChart" style="width: 100%;height: 50%;z-index: 999" name="运输类型占比" :data="transportTypeOrderFinishPie" @click.native="routerTo('/order-proportion')"/>
+          <ring-pie-chart ref="customerChart" style="width: 100%;height: 50%;" name="公司占比" :data="customerOrderFinishPie" @click.native="routerTo('/order-proportion')"/>
         </div>
       </display-board>
     </div>
@@ -150,10 +150,9 @@ import WinnersList from "./components/card/winners-list.vue";
 import TitleContentMark from "./components/layout/title-content-mark.vue";
 import TableColumn from "./components/table/table-column.vue";
 import RingPieChart from "./components/chart/ring-pie-chart.vue";
-import {calc_hb_str, calc_tb_str, conver_amont} from "../util/util";
-import {arSummaryBar, arCompanyList,getBusinessConditionDatas} from "../api/apiList"
+import {arSummaryBar, arCompanyList, getBusinessConditionDatas, customerOrderFinishPie} from "../api/apiList"
 import {calc_hb_str, calc_tb_str, conver_amont} from "../utils/numUtil";
-// import {refreshData} from "./databoard/js/api";
+import {getTransportTypeOrderFinishPie,getCustomerOrderFinishPie} from "./databoard/js/indexPieData";
 
 export default {
   components: {
@@ -403,13 +402,19 @@ export default {
         "成本": "/turnover-detail",
         "毛利": "/turnover-detail",
       },
+      dataset:{},
+      transportTypeOrderFinishPie:[],
+      customerOrderFinishPie:[],
+      arCompanyList:[],
       charts: {}
     }
   },
   methods: {
+    log(){
+    },
     cellStyleFunction(data) {
       let res = {color: '#33ff66'};
-      console.log(data + ":" + data.indexOf('+'))
+      // console.log(data + ":" + data.indexOf('+'))
       if (data.indexOf('-') !== -1) {
         res.color = '#ff3300'
       }
@@ -476,8 +481,11 @@ export default {
       }).catch(err => {
         console.log(err);
       });
+    },
+    refreshData(){
+      getTransportTypeOrderFinishPie(res => this.transportTypeOrderFinishPie = res,"2022-06-26");
+      getCustomerOrderFinishPie(res => this.customerOrderFinishPie = res,"2022-06-26");
     }
-
   },
   mounted() {
     this.showBusinessConditionDatas();
@@ -486,7 +494,7 @@ export default {
     }, 500)
     this.getArSummaryBar();
     this.getArCompanyList();
-    // refreshData();
+    this.refreshData()
   },
   beforeDestroy() {
     window.removeEventListener("resize", this.resizeChart);