49 lines
1.0 KiB
TypeScript
49 lines
1.0 KiB
TypeScript
import { MyBetaModalFormProps } from '@/common';
|
||
import { Line } from '@ant-design/plots';
|
||
import { useEffect, useState } from 'react';
|
||
export default function FinancialAnalysisLine(props: MyBetaModalFormProps) {
|
||
const [houseBillsCount, setHouseBillsCount] = useState<any>({});
|
||
const config = {
|
||
data: [],
|
||
xField: '月份',
|
||
yField: '金额',
|
||
colorField: 'name',
|
||
point: {
|
||
size: 7,
|
||
},
|
||
legend: {
|
||
position: 'top',
|
||
},
|
||
tooltip: {},
|
||
style: {
|
||
// 矩形四个方向的内边距
|
||
inset: 5,
|
||
},
|
||
|
||
// 使用双Y轴，因为两个指标数值范围差异大
|
||
yAxis: [
|
||
{
|
||
title: {
|
||
text: '月收款(万元)',
|
||
},
|
||
},
|
||
{
|
||
title: {
|
||
text: '收缴率(%)',
|
||
},
|
||
grid: null,
|
||
},
|
||
],
|
||
};
|
||
|
||
useEffect(() => {
|
||
setHouseBillsCount({ ...config, data: props.item || [] });
|
||
}, [props.item]);
|
||
|
||
return (
|
||
<div style={{ height: 290 }}>
|
||
<Line {...houseBillsCount} />
|
||
</div>
|
||
);
|
||
}
|