69 lines
1.3 KiB
TypeScript
69 lines
1.3 KiB
TypeScript
|
import { Line } from '@ant-design/plots';
|
|||
|
|
import { useEffect, useState } from 'react';
|
|||
|
|
export default function FinancialAnalysisLine() {
|
|||
|
|
const [houseBillsCount, setHouseBillsCount] = useState<any>({});
|
|||
|
|
const config = {
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
name: '收缴率',
|
|||
|
|
月份: '01',
|
|||
|
|
金额: 79.0,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '月收款(万元)',
|
|||
|
|
月份: '01',
|
|||
|
|
金额: 69.0,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '收缴率',
|
|||
|
|
月份: '02',
|
|||
|
|
金额: 89.0,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '月收款(万元)',
|
|||
|
|
月份: '02',
|
|||
|
|
金额: 62.0,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
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: [] });
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div style={{ height: 290 }}>
|
|||
|
|
<Line {...config} />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|