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';

export default function Cdmjfb(props) {
    const [data, setData] = useState();
    const ref = useRef();
    const chart = useEcharts(ref.current);
    useEffect(() => {
        CdzyApi.minTypeAreaProportion().then(resp => {
            setData(resp.data);
        })
    }, []);
    useEffect(() => {
        if (chart && data) {
            const options = getOption(data);
            chart.setOption(options);
        }
    }, [chart, data]);
    return <>
        <LittleTitle>草地面积分布</LittleTitle>
        <div ref={ref} className="h0 fill"></div>
    </>
}