pay-company/src/pages/index/charts/FinancialAnalysisLine.tsx

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