91 lines
2.9 KiB
JavaScript
91 lines
2.9 KiB
JavaScript
|
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';
|
||
|
|
|
||
|
|
const Page = ({title}) => {
|
||
|
|
const [echart2, setEchart2] = useState(Object())
|
||
|
|
const [inspectordata, setInspectorData] = useState([{}])
|
||
|
|
const [plandata, setPlanData] = useState(Object())
|
||
|
|
const [problemdata, setProblemData] = useState(Object())
|
||
|
|
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: name
|
||
|
|
// },
|
||
|
|
graphic: {
|
||
|
|
type: 'text',
|
||
|
|
top: 'center',
|
||
|
|
left: 'center',
|
||
|
|
style: {
|
||
|
|
text: `总计\n${0}`,
|
||
|
|
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'),
|
||
|
|
etm: dayjs(new Date(event[1])).format('YYYY-MM-DD'),
|
||
|
|
}
|
||
|
|
// getStm(params, index)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
useEffect(()=>{
|
||
|
|
let data = [
|
||
|
|
{ value: 1048, name: 'Search Engine' },
|
||
|
|
{ value: 735, name: 'Direct' },
|
||
|
|
{ value: 580, name: 'Email' },
|
||
|
|
{ value: 484, name: 'Union Ads' },
|
||
|
|
{ value: 300, name: 'Video Ads' }
|
||
|
|
]
|
||
|
|
setPlanData(data)
|
||
|
|
})
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className='top' style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
|
||
|
|
<div style={{ fontSize: 20, fontWeight: 'bold' }}>{title}</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
|