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

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

let obj =
{
    0: '违建',
    1: '毁林垦荒',
    2: '筑坝拦汊',
    3: '填占库容',
    4: '违法取水',
    5: '其他'
}

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 {
            legend: {
                data: Object.values(obj)
            },
            angleAxis: {
                type: 'category',
                data: Object.values(obj)
            },
            // radar: [
            //     {
            //         indicator: [
            //             { text: '' },
            //             { text: '' },
            //             { text: '' },
            //             { text: '' },
            //             { text: '' },
            //             { text: '' },
            //             { text: '' },
            //         ],
            //         radius: '80%',
            //         splitNumber: 12,
            //         shape: 'circle',
            //         splitArea: {
            //             areaStyle: {
            //                 color: '#fff',
            //             }
            //         },
            //         axisLine: {
            //             lineStyle: {
            //                 color: '#d4d4d4'
            //             }
            //         },
            //     },
            // ],
            radiusAxis: {
                min: 0,
                max: 20,
                interval: 2,
                // 刻度
                axisTick: {
                    show: false
                },
                //刻度数值
                axisLabel: {
                    show: false
                },
                // 线
                axisLine: {
                    show: false
                },
            },
            polar: {},
            series: [
                {
                    stack: 'a',
                    type: 'pie',
                    center: ['50%', '50%'],
                    selectedOffset: 0,
                    radius: [0, 140],
                    roseType: 'area',
                    itemStyle: {　 //去除饼图的指示折线label
                        normal: {
                            label: {
                                show: false,
                            },
                            borderRadius: 8
                        },
                    },
                    data: plandata
                }
            ]
        }
    }, [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 + 1, 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