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>
  );
}