import React , { useRef , useEffect } from 'react' ; import { connect , useIntl , Dispatch } from 'umi' ; import { Spin , Card , Tag , Divider , Row , Col } from 'antd' ; import { EChartOption } from 'echarts' ; import useEcharts from '@/hooks/useEcharts' ; import styles from '../../style.less' ; import { StateType } from '../../model' ; import { WorksChartDataType } from '../../data.d' ; const worksChartOption = { tooltip : { trigger : 'axis' , } , grid : { left : '0' , right : '0' , top : '0' , bottom : '0' , } , xAxis : { show : false , boundaryGap : false , data : [ ] , } , yAxis : { show : false , } , series : [ { name : '新增' , type : 'line' , data : [ ] , areaStyle : { color : { colorStops : [ { offset : 0 , color : '#A9F387' , } , { offset : 1 , color : '#48D8BF' , } , ] , globalCoord : false , } as any , } , lineStyle : { width : 0 , } , itemStyle : { borderWidth : 2 , } , } , ] , } ; interface WorksChartCardProps { loading : boolean ; visitData : WorksChartDataType ; dispatch : Dispatch ; } const WorksChartCard = props => { const { loading , visitData , dispatch } = props ; const { total , num , chart } = visitData ; const { formatMessage } = useIntl ( ) ; const worksChartRef = useRef < HTMLDivElement > ( null ) ; const echarts = useEcharts ( worksChartRef , worksChartOption ) ; useEffect ( ( ) => { dispatch ( { type : 'Home/queryWorksChartData' } ) ; } , [ 1 ] ) ; useEffect ( ( ) => { if ( echarts ) { const option = { xAxis : { data : chart . day , } , series : [ { name : '新增' , data : chart . num , } , ] , } ; echarts . setOption ( option ) ; } } , [ echarts , chart ] ) ; return ( < Spin spinning = { loading } size = "large" > < Card className = { styles . homeBoxCard } title = { formatMessage ( { id : 'page.home.workschartcard.card-title' } ) } extra = { < Tag color = "success" > { formatMessage ( { id : 'page.home.text-week' } ) } < /Tag>}> < div className = { styles . num } > { num ?. toLocaleString ( ) } < /div> < div className = { styles . height40 } ref = { worksChartRef } / > < Divider /> < Row > < Col span = { 12 } > { formatMessage ( { id : 'page.home.text-total' } ) } < /Col> < Col className = "text-align-right" span = { 12 } > { total ?. toLocaleString ( ) } < /Col> < /Row> < /Card> < /Spin>); } ; export default connect ( ( { Home , loading , } ) => ( { loading : loading . effects [ 'Home/queryWorksChartData' ] , visitData : Home . worksChartData , } ) ) ( WorksChartCard ) ;