统计分布的图表

src/components/MixYnQ.jsx

@@ -0,0 +1,177 @@
+import { observer } from 'mobx-react';
+import { Mix } from '@ant-design/plots';
+import { merge, isEmpty, cloneDeep } from '../utils/commons';
+import { dataFieldAlias } from '../libs/ht';
+
+const COLOR_SETS = [
+  "#FF6B3B",
+  "#9FB40F",
+  "#76523B",
+  "#DAD5B5",
+  "#E19348",
+  "#F383A2",
+];
+/**
+ * 当期数据; 同比; 环比
+ */
+export default observer((props) => {
+  const { dataSource, summaryData: areaData, ...config } = props;
+  const { xField, yFields, seriesField, tooltip, ...extConfig } = config;
+  const diffData0 = dataSource.reduce((r, row) => {
+    r.push({ ...row, yField: row[yFields[0]], yGroup: dataFieldAlias[yFields[0]].alias });
+    r.push({ ...row, yField: row.resultToQ[yFields[0]], yGroup: dataFieldAlias[yFields[0]].alias + ' 上个时间段' });
+    r.push({ ...row, yField: row.resultToY[yFields[0]], yGroup: dataFieldAlias[yFields[0]].alias + ' 去年同期' });
+    return r;
+  }, []);
+  const diffData1 = dataSource.reduce((r, row) => {
+    r.push({ ...row, yField: row[yFields[1]], yGroup: dataFieldAlias[yFields[1]].alias });
+    r.push({ ...row, yField: row.resultToQ[yFields[1]], yGroup: dataFieldAlias[yFields[1]].alias + ' 上个时间段' });
+    r.push({ ...row, yField: row.resultToY[yFields[1]], yGroup: dataFieldAlias[yFields[1]].alias + ' 去年同期' });
+    return r;
+  }, []);
+  const diffDataPercent = dataSource.reduce((r, row) => {
+    const _key0Q = `${yFields[0]}ToQ`;
+    const _key0Y = `${yFields[0]}ToY`;
+    r.push({ ...row, yField: row[_key0Q], yGroup: dataFieldAlias[yFields[0]].alias + ' 环比' });
+    r.push({ ...row, yField: row[_key0Y], yGroup: dataFieldAlias[yFields[0]].alias + ' 同比' });
+    const _key1Q = `${yFields[1]}ToQ`;
+    const _key1Y = `${yFields[1]}ToY`;
+    r.push({ ...row, yField: row[_key1Q], yGroup: dataFieldAlias[yFields[1]].alias + ' 环比' });
+    r.push({ ...row, yField: row[_key1Y], yGroup: dataFieldAlias[yFields[1]].alias + ' 同比' });
+    return r;
+  }, []);
+  const calcAxis = isEmpty(diffData0) ? 300 : (Math.max(...diffData0.map(ele => ele.yField))) * 3;
+  const calcAxisC = isEmpty(diffData0) ? 300 : (Math.max(...diffDataPercent.map(ele => ele.yField))) * 3;
+  const diffLine = [
+    {
+      type: 'text',
+      position: ['start', 0],
+      content: `同比, 环比`,
+      offsetX: -15,
+      style: {
+        fill: COLOR_SETS[0],
+        textBaseline: 'bottom',
+      },
+    },
+    {
+      type: 'line',
+      start: [-10, 0],
+      end: ['max', 0],
+      style: {
+        stroke: COLOR_SETS[0],
+        // lineDash: [2, 2],
+        lineWidth: 0.5,
+      },
+    },];
+  const MixConfig = {
+    appendPadding: 15,
+    syncViewPadding: true,
+    tooltip: {
+      shared: true,
+      // customItems: (originalItems) => {
+      //   // process originalItems,
+      //   const items = originalItems.map((ele) => ({ ...ele, name: ele.data?.extraLine ? ele.name : `${ele.name} ${dataFieldAlias[yField]?.alias || yField}` }));
+      //   return items;
+      // },
+    },
+    legend: {position: 'top',layout: 'horizontal'  },
+    plots: [
+      {
+        type: 'column',
+        options: {
+          data: diffData0,
+          isGroup: true,
+          xField,
+          yField: 'yField',
+          seriesField: 'yGroup',
+          // xAxis: false,
+          meta: merge({
+            ...cloneDeep(dataFieldAlias),
+          }),
+          // color: '#b32b19',
+          // color: '#f58269',
+          legend: {},
+          smooth: true,
+          yAxis: {
+            type: 'linear',
+            tickCount: 4,
+            min: 0,
+            max: calcAxis,
+            title: { text: '团数', autoRotate: false, position: 'end' },
+          },
+          label: false,
+        },
+      },
+      {
+        type: 'line',
+        options: {
+          data: diffData1,
+          isGroup: true,
+          xField,
+          yField: 'yField',
+          seriesField: 'yGroup',
+          xAxis: false,
+          legend: {},
+          meta: merge(
+            {
+              ...cloneDeep(dataFieldAlias),
+            },
+            { yField: dataFieldAlias[yFields[1]] }
+          ),
+          // color: '#1AAF8B',
+          smooth: true,
+          point: {
+            size: 4,
+            shape: 'cicle',
+          },
+          yAxis: {
+            type: 'linear',
+            tickCount: 4,
+            min: 0,
+            position: 'right',
+            line: null,
+            grid: null,
+            title: { text: '业绩', autoRotate: false, position: 'end' },
+          },
+          label: {
+            style: {
+              fontWeight: 700,
+              stroke: '#fff',
+              lineWidth: 1,
+            },
+          },
+        },
+      },
+      {
+        type: 'column',
+        options: {
+          data: diffDataPercent,
+          xField,
+          yField: 'yField',
+          seriesField: 'yGroup',
+          columnWidthRatio: 0.28,
+          meta: {
+            yField: {
+              formatter: (v) => `${v}%`,
+            },
+          },
+          isGroup: true,
+          xAxis: false,
+          yAxis: {
+            line: null,
+            grid: null,
+            label: false,
+            position: 'left',
+            min: -calcAxisC,
+            max: calcAxisC/4,
+            tickCount: 4,
+          },
+          legend: {},
+          color: COLOR_SETS,
+          annotations: diffLine,
+        },
+      },
+    ],
+  };
+  return <Mix {...MixConfig} />;
+});

src/views/Distribution.jsx

@@ -7,6 +7,7 @@ import SearchForm from './../components/search/SearchForm';
 import { empty } from '../utils/commons';
 import { dataFieldAlias } from '../libs/ht';
 import { VSTag } from './../components/Data';
+import MixYnQ from './../components/MixYnQ';
 
 import './kpi.css';
 
@@ -165,6 +166,11 @@ export default observer(() => {
       ],
     },
   ];
+  const chartsConfig = {
+    xField: 'label',
+    yFields: ['ConfirmOrder','SumML'],
+    seriesField: null,
+  };
   return (
     <>
       <Row gutter={16} style={{ margin: '-16px -8px' }}>
@@ -197,6 +203,7 @@ export default observer(() => {
               ...ele,
               children: (
                 <Spin spinning={DistributionStore.pageLoading}>
+                  <MixYnQ {...chartsConfig} dataSource={DistributionStore[curTab].dataSource} />
                   <Table
                     id="table_to_xlsx_sale"
                     dataSource={DistributionStore[curTab].dataSource}