import { useState, useEffect, useRef } from 'react'
import useEcharts from '../../../../../hooks/useEcharts';
import CdzyApi from '../../../../../../utils/apis/CdzyApi';
import { getOption } from './echartsOptions';
import LittleTitle from '../../../../../common/LittleTitle';
import YhswApi from '../../../../../../utils/apis/YhswApi';

export default function Whqmjtj(props) {
    const [data, setData] = useState();
    const ref = useRef();
    const chart = useEcharts(ref.current);
    useEffect(() => {
        YhswApi.whq().then(resp => {
            setData(resp.data);
        })
    }, []);
    useEffect(() => {
        if (chart && data) {
            const options = getOption(data);
            chart.setOption(options);
        }
    }, [chart, data]);
    return <div className='fill h0 layout-v'>
        <LittleTitle>危害区面积统计</LittleTitle>
        <div ref={ref} className="h0 fill"></div>
    </div>
}