From a225c1bbc42d4199f1f0e2a430e7e5450a16b316 Mon Sep 17 00:00:00 2001 From: Lei OT Date: Mon, 23 Oct 2023 16:38:48 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E5=88=86=E5=B8=83=E7=9A=84?= =?UTF-8?q?=E5=9B=BE=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MixYnQ.jsx | 177 +++++++++++++++++++++++++++++++++++++ src/views/Distribution.jsx | 7 ++ 2 files changed, 184 insertions(+) create mode 100644 src/components/MixYnQ.jsx diff --git a/src/components/MixYnQ.jsx b/src/components/MixYnQ.jsx new file mode 100644 index 0000000..eb2ab67 --- /dev/null +++ b/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 ; +}); diff --git a/src/views/Distribution.jsx b/src/views/Distribution.jsx index 026d8b6..c678c78 100644 --- a/src/views/Distribution.jsx +++ b/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 ( <> @@ -197,6 +203,7 @@ export default observer(() => { ...ele, children: ( +