tsg-web/src/views/sz/szzf/ajtj/bincharts.js

import { Space, Table, Tag, DatePicker, Form, Select, Button, Card } from 'antd';
import ReactECharts from 'echarts-for-react';
import { useEffect, useState, useMemo } from 'react';
import { httpget, httppost } from '../../../../utils/request';
import apiurl from '../../../../service/apiurl';
import dayjs from 'dayjs';
import advancedFormat from 'dayjs/plugin/advancedFormat'
import customParseFormat from 'dayjs/plugin/customParseFormat'
import localeData from 'dayjs/plugin/localeData'
import weekday from 'dayjs/plugin/weekday'
import weekOfYear from 'dayjs/plugin/weekOfYear'
import weekYear from 'dayjs/plugin/weekYear'

dayjs.extend(customParseFormat)
dayjs.extend(advancedFormat)
dayjs.extend(weekday)
dayjs.extend(localeData)
dayjs.extend(weekOfYear)
dayjs.extend(weekYear)

let obj={0:'巡查上报',1:'自主发现',2:'公共举报',3:'电话举报',4:'其他'}
const Page = ({ title = '标题' }) => {
    const [echart2, setEchart2] = useState(Object())
    const [inspectordata, setInspectorData] = useState([{}])
    const [plandata, setPlanData] = useState(Object())
    const [problemdata, setProblemData] = useState(Object())
    const [sumTotal, setSum] = useState(0)

    const getPlanOption = useMemo((name, data) => {
        // let total = 0
        // for (let i = 0; i < data.length; i++) {
        //     total = total + Number(data[i].value)
        // }
        return {
            title: {},
            tooltip: {},
            legend: {
                data:Object.values(obj)
            },
            graphic: {
                type: 'text',
                top: 'center',
                left: 'center',
                style: {
                    text: `总计\n${sumTotal}`,
                    fontSize: 20,
                    fontWeight: 'bold',
                    textAlign: 'center'
                }
            },
            series: {
                name: '圆环图系列名称',
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['60%', '80%'],
                hoverAnimation: true,
                data: plandata,
                label: {
                    normal: {
                        show: true,
                        position: 'outside',
                        formatter: '{c}'
                    }
                }
            }


        }
    }, [plandata])
    console.log(getPlanOption);

    const onOk = (event, index) => {
        if (event !== null) {
            let params = {
                stm: dayjs(new Date(event[0])).format('YYYY-MM-DD HH:mm:ss'),
                etm: dayjs(new Date(event[1])).format('YYYY-MM-DD HH:mm:ss'),
            }
            // getStm(params, index)
            getInfo(params)
        }
    }
    const getInfo=(params)=>{
        let obj1=[]
        let sum=0
        httppost(apiurl.szzf.ajtj.info+0,params).then(res=>{
            res.data.map(item=>{
                obj1.push({value:item.count,name:obj[item.type]})
                sum=sum+item.count
            })
            // debugger;
            setPlanData(obj1)
            setSum(sum)

        })
    }
    useEffect(() => {
        let params = {
            stm: dayjs().startOf("year").format('YYYY-MM-DD HH:mm:ss'),
            etm: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        }
        getInfo(params)
        
    },[])
    return (
        <>
            <div className='top' style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
                <div style={{ fontSize: 20, fontWeight: 'bold', display: 'flex', alignItems: 'center' }}>
                    <div style={{ width: 5, height: 25, backgroundColor: '#259def', marginRight: 10 }}></div>
                    案件来源
                </div>
                <DatePicker.RangePicker
                    style={{ width: 220, }}
                    onChange={(e, index) => onOk(e, 2)}
                    defaultValue={[dayjs().startOf("year"), dayjs()]}
                ></DatePicker.RangePicker>
            </div>
            <ReactECharts
                ref={(e) => setEchart2(e)}
                option={getPlanOption}
                style={{ height: 350 }}
            />
        </>
    )
}
export default Page