|
@@ -3,7 +3,7 @@ import './index.scss'
|
|
|
import { Pie, G2, DualAxes } from '@ant-design/charts'
|
|
|
import { PieConfig } from '@ant-design/charts/es/pie'
|
|
|
import './index.scss'
|
|
|
-import { dayjsFormat, formatMoney } from '@/utils/util'
|
|
|
+import { formatMoney } from '@/utils/util'
|
|
|
import { Tooltip } from 'antd'
|
|
|
import { DualAxesConfig } from '@ant-design/charts/es/dualAxes'
|
|
|
import BigNumber from 'bignumber.js'
|
|
@@ -68,15 +68,22 @@ const Content: React.FC<iContentProps> = ({ data, type }) => {
|
|
|
const dualAxesConfig: DualAxesConfig = {
|
|
|
data: [ data.returnDate, data.returnDate ],
|
|
|
autoFit: true,
|
|
|
- padding: 'auto',
|
|
|
+ // padding: 'auto',
|
|
|
xField: 'month',
|
|
|
yField: [ 'value', 'count' ],
|
|
|
slider: {},
|
|
|
- xAxis: {
|
|
|
- label: {
|
|
|
- formatter: (val) => dayjsFormat(val, 'YYYY年M月')
|
|
|
+ limitInPlot: false,
|
|
|
+ padding: [ 20, 20, 60, 30 ],
|
|
|
+ meta: {
|
|
|
+ month: {
|
|
|
+ sync: false
|
|
|
}
|
|
|
},
|
|
|
+ // xAxis: {
|
|
|
+ // label: {
|
|
|
+ // formatter: (val) => dayjsFormat(val, 'YYYY年M月')
|
|
|
+ // }
|
|
|
+ // },
|
|
|
yAxis: {
|
|
|
value: {
|
|
|
label: {
|
|
@@ -108,34 +115,45 @@ const Content: React.FC<iContentProps> = ({ data, type }) => {
|
|
|
geometryOptions: [
|
|
|
{
|
|
|
geometry: 'column',
|
|
|
- seriesField: 'value',
|
|
|
columnWidthRatio: 0.4,
|
|
|
color: type === ContractType.INCOME ? '#B5C4B1' : '#A27E7E'
|
|
|
},
|
|
|
{
|
|
|
geometry: 'line',
|
|
|
- color: type === ContractType.INCOME ? '#965454' : '#8C8C8C',
|
|
|
- isStack: true,
|
|
|
- isPercent: true
|
|
|
+ color: type === ContractType.INCOME ? '#965454' : '#8C8C8C'
|
|
|
+ // seriesField: 'count',
|
|
|
+ // isPercent: true
|
|
|
// smooth: true
|
|
|
}
|
|
|
],
|
|
|
+
|
|
|
legend: {
|
|
|
- custom: true,
|
|
|
position: 'top',
|
|
|
- items: [
|
|
|
- {
|
|
|
- value: 'value',
|
|
|
- name: '回款金额',
|
|
|
- marker: { symbol: 'square', style: { fill: type === ContractType.INCOME ? '#B5C4B1' : '#A27E7E', r: 5 } }
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'count',
|
|
|
- name: '占总金额比例',
|
|
|
- marker: { symbol: 'square', style: { fill: type === ContractType.INCOME ? '#965454' : '#8C8C8C', r: 5 } }
|
|
|
+ itemName: {
|
|
|
+ formatter: (text: string) => {
|
|
|
+ if (text === 'value') {
|
|
|
+ return type === ContractType.INCOME ? '回款金额' : '支付金额'
|
|
|
+ }
|
|
|
+ return '占总金额比例'
|
|
|
}
|
|
|
- ]
|
|
|
+ }
|
|
|
}
|
|
|
+ // legend: {
|
|
|
+ // custom: true,
|
|
|
+ // position: 'top',
|
|
|
+ // items: [
|
|
|
+ // {
|
|
|
+ // value: 'value',
|
|
|
+ // name: '回款金额',
|
|
|
+ // marker: { symbol: 'square', style: { fill: type === ContractType.INCOME ? '#B5C4B1' : '#A27E7E', r: 5 } }
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // value: 'count',
|
|
|
+ // name: '占总金额比例',
|
|
|
+ // marker: { symbol: 'line', style: { fill: type === ContractType.INCOME ? '#965454' : '#8C8C8C' } }
|
|
|
+ // }
|
|
|
+ // ]
|
|
|
+ // }
|
|
|
}
|
|
|
|
|
|
|