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 { toPng } from '../../../../../../utils/helper/helper';

export default function Zhzbgdz(props) {
    const [data, setData] = useState();
    const ref = useRef();
    const chart = useEcharts(ref.current);
    useEffect(() => {
        CdzyApi.comprehensiveVegetationCoverage().then(resp => {
            setData(resp.data);
        })
    }, []);
    useEffect(() => {
        if (chart && data) {
            const options = getOption(data);
            chart.setOption(options);
        }
    }, [chart, data]);
    return <div className='fill layout-v relative'>
        <LittleTitle>综合植被盖度值</LittleTitle>
        <div ref={ref} className="h0 fill" style={{
            zIndex: 1
        }}></div>
        {/* <div style={{
            width: "100%",
            height: 65
        }}></div> */}
        <div style={{
            background: `url(${toPng('底')})`,
            width: 400,
            height: 65,
            backgroundSize: "100% 100%",
            position: "absolute",
            bottom: 30,
            left: 20,
        }}></div>
    </div>
}