import React , { useRef , useEffect } from 'react' ; import { connect , Dispatch , useIntl } from 'umi' ; import { Spin , Card , Tag , Divider , Row , Col } from 'antd' ; import { EChartOption } from 'echarts' ; import useEcharts from '@/hooks/useEcharts' ; import { StateType } from '../../model' ; import { TopicsChartDataType } from '../../data.d' ; import styles from '../../style.less' ; const topicsChartOption = { tooltip : { trigger : 'axis' , } , grid : { left : '0' , right : '0' , top : '0' , bottom : '0' , } , xAxis : { show : false , data : [ ] , } , yAxis : { show : false , } , series : [ { name : '新增' , type : 'line' , data : [ ] , lineStyle : { width : 3 , color : { type : 'linear' , colorStops : [ { offset : 0 , color : '#A9F387' , } , { offset : 1 , color : '#48D8BF' , } , ] , globalCoord : false , } as any , shadowColor : 'rgba(72,216,191, 0.3)' , shadowBlur : 10 , shadowOffsetY : 20 , } , itemStyle : { borderWidth : 6 , borderColor : '#A9F387' , } , smooth : true , } , ] , } ; interface TopicsChartCardProps { loading : boolean ; visitData : TopicsChartDataType ; dispatch : Dispatch ; } const TopicsChartCard = props => { const { loading , visitData , dispatch } = props ; const { total , num , chart } = visitData ; const { formatMessage } = useIntl ( ) ; const topicsChartRef = useRef < HTMLDivElement > ( null ) ; const echarts = useEcharts ( topicsChartRef , topicsChartOption ) ; useEffect ( ( ) => { dispatch ( { type : 'Home/queryTopicsChartData' } ) ; } , [ 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.topicschartcard.card-title' } ) } extra = { < Tag color = "warning" > { formatMessage ( { id : 'page.home.text-month' } ) } < /Tag>}> < div className = { styles . num } > { num ?. toLocaleString ( ) } < /div> < div className = { styles . height40 } ref = { topicsChartRef } / > < 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/queryTopicsChartData' ] , visitData : Home . topicsChartData , } ) ) ( TopicsChartCard ) ;