perf: 仪表盘: 时间轴切换

src/charts/Orders.jsx

@@ -13,6 +13,7 @@ import { Line } from '@ant-design/charts';
 import SiteSelect from '../components/search/SiteSelect';
 import { observer } from 'mobx-react';
 import DatePickerCharts from '../components/search/DatePickerCharts';
+import DateGroupRadio from '../components/DateGroupRadio';
 
 class Orders extends Component {
   static contextType = stores_Context;
@@ -36,9 +37,9 @@ class Orders extends Component {
       xField: 'ApplyDate',
       yField: 'orderCount',
       seriesField: 'WebCode',
-      xAxis: {
-        type: 'timeCat',
-      },
+      // xAxis: {
+      //   type: 'timeCat',
+      // },
       smooth: true,
       legend: {
         position: 'right-top',
@@ -72,6 +73,16 @@ class Orders extends Component {
               统计
             </Button>
           </Space>
+        <div style={{textAlign: 'right'}}>
+          <DateGroupRadio
+            visible={true}
+            dataRaw={dashboard_store.ordersCountDataRaw}
+            onChange={dashboard_store.onChangeDateGroup}
+            defaultValue={'day'}
+            dataMapper={dashboard_store.orderCountDataMapper}
+            fieldMapper={dashboard_store.orderCountDataFieldMapper}
+          />
+        </div>
         </div>
         <br />
         <Line {...line_config} />

src/stores/DashboardStore.js

@@ -1,5 +1,6 @@
 import { makeAutoObservable, runInAction } from "mobx";
 import * as config from "../config";
+import { resultDataCb } from '../components/DateGroupRadio/date';
 
 class DashboardStore {
 	constructor(rootStore) {
@@ -18,6 +19,15 @@ class DashboardStore {
 		getOrderCount_all: this.getOrderCount_all.bind(this),
 	};
 
+  ordersCountDataRaw = {};
+  orderCountDataMapper = { 'data1': 'ordercount1', 'data2': 'ordercount2' };
+  orderCountDataFieldMapper ={ 'dateKey': 'ApplyDate', 'valueKey': 'orderCount', 'seriesKey': 'WebCode', _f: 'sum' };
+  onChangeDateGroup = (value, data, avg1) => {
+    // this.lineChartXGroup = value;
+    this.orders_data.data = data;
+    // this.avgLine1 = avg1;
+  };
+
 	getOrderCount_all() {
 		// 统计所有站点订单数量
 		this.orders_data.loading = true;
@@ -29,7 +39,9 @@ class DashboardStore {
 			.then(response => response.json())
 			.then(json => {
 				runInAction(() => {
-					this.orders_data.data = json.ordercount1;
+          this.ordersCountDataRaw = json;
+          resultDataCb(json, 'day', this.orderCountDataMapper, this.orderCountDataFieldMapper, this.onChangeDateGroup);
+					// this.orders_data.data = json.ordercount1;
 					this.orders_data.loading = false;
 				});
 			})