feats

package.json

@@ -54,6 +54,7 @@
     "antd": "^4.12.0",
     "array-move": "^3.0.1",
     "classnames": "^2.2.6",
+    "echarts": "^5.1.0",
     "lodash": "^4.17.11",
     "md5": "^2.3.0",
     "moment": "^2.25.3",

src/components/ECharts/index.jsx

@@ -0,0 +1,39 @@
+// echarts 包太大, 因此需要按需引入
+import React, { useEffect, useRef, useImperativeHandle } from 'react';
+// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
+import * as echarts from 'echarts/core';
+// 引入柱状图图表，图表后缀都为 Chart
+import {
+    BarChart
+} from 'echarts/charts';
+// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
+import {
+    TitleComponent,
+    TooltipComponent,
+    GridComponent
+} from 'echarts/components';
+
+// 注册必须的组件
+echarts.use(
+  [TitleComponent, TooltipComponent, GridComponent, BarChart]
+);
+
+export default React.forwardRef((props, ref) => {
+  const el = useRef()
+  const chartRef = useRef()
+
+  // 向父组件公开 echarts 实例
+  useImperativeHandle(ref, () => ({
+    chart: chartRef.current,
+  }))
+
+  useEffect(() => {
+    const chart = echarts.init(el.current)
+    chart.setOption(props.option)
+    chartRef.current = chart
+
+    return () => chart.dispose()
+  }, [props.option])
+
+  return <div ref={el}></div>
+})

src/pages/Welcome/components/HeaderContent.jsx

@@ -1,10 +1,24 @@
-import React from 'react'
-import { Image, Statistic, Row, Col, Badge, Divider } from 'antd'
+import React, { useState, useEffect } from 'react'
+import { Image, Statistic, Spin, Badge } from 'antd'
 import { connect } from 'umi'
+import request from '@/utils/request'
 import { defaultAvatar } from '@/utils/utils';
 import Styles from '../style.less'
 
 const HeaderContent = (props) => {
+  const [loading, setLoading] = useState(false)
+  const [statis, setStatis] = useState({})
+
+  useEffect(() => {
+    setLoading(true)
+    request('/index/post-data').then((res) => {
+      setStatis(res)
+      setLoading(false)
+    }).catch((e) => {
+      setLoading(false)
+    })
+  }, [])
+
   return (
     <div className={Styles['header-content']}>
       <div className={Styles['ctt-header']}>
@@ -18,11 +32,13 @@ const HeaderContent = (props) => {
         </p>
       </div>
       <div className={Styles['ctt-footer']}>
-        <div className={Styles['st-wrapper']}>
-          <div className={Styles['st-item']}><Statistic title="科普数量" value={112893} /></div>
-          <div className={Styles['st-item']}><Statistic title="浏览总数" value={112893} /></div>
-          <div className={Styles['st-item']}><Statistic title="学生总数" value={112893} /></div>
-        </div>
+        <Spin spinning={loading}>
+          <div className={Styles['st-wrapper']}>
+            <div className={Styles['st-item']}><Statistic title="科普数量" value={statis.total} /></div>
+            <div className={Styles['st-item']}><Statistic title="浏览总数" value={statis.pv} /></div>
+            <div className={Styles['st-item']}><Statistic title="学生总数" value={statis.student} /></div>
+          </div>
+        </Spin>
       </div>
     </div>
   )