taihu/app/containers/DataManagerOverview/index.tsx

import React, { useEffect, useMemo, useRef, useState } from 'react'
import Helmet from 'react-helmet'
import Container from 'components/Container'
import { init, EChartOption, ECharts } from 'echarts'
import styles from './index.less'
import api from 'utils/api'
import request from 'utils/request'

const DEFAULT_COLORS = [
  '#5470c6',
  '#91cc75',
  '#fac858',
  '#ee6666',
  '#73c0de',
  '#3ba272',
  '#fc8452',
  '#9a60b4',
  '#ea7ccc'
]

// tslint:disable-next-line:interface-name
interface DataOverviewState {
  originDept: number, // 来源部门数量
  countCatalogue: number, // 近一个月目录增长数量
  originSystem: number, // 来源系统数量
  dataSource: number, // 数据资源数量
  industryData: Array<{ name: string, value: number }>, // 行业分类饼图
  originDeptData: Array<{ name: string, value: number }>, // 来源部门柱状图
}

export default function DataOverview() {
  const pieElementRef = useRef<HTMLDivElement>(null)
  const barElementRef = useRef<HTMLDivElement>(null)
  const pieRef = useRef<ECharts>(null)
  const barRef = useRef<ECharts>(null)
  const [overview, setOverview] = useState<DataOverviewState>(
    {
      originDept: 0,
      countCatalogue: 0,
      originSystem: 0,
      dataSource: 0,
      industryData: [],
      originDeptData: []
    })

  const getDataScreening = async() => {
    try {
      const data = await request(api.dataScreening, { method: 'get' })
      setOverview((data as unknown as DataOverviewState))
    } catch (e) {
      console.log(e)
    }
  }
  const pieOption = useMemo<EChartOption>(() => ({
    tooltip: {
      trigger: 'item'
    },
    color: DEFAULT_COLORS,
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'middle'
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: overview.industryData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }), [overview.industryData])
  const barOption = useMemo<EChartOption>(() => ({
    tooltip: {},
    dataset: {
      dimensions: ['name', 'value'],
      source: overview.originDeptData
    },
    xAxis: {},
    yAxis: {
      type: 'category',
      data: overview.originDeptData.map((o) => o.name)
    },
    series: [{
      type: 'bar',
      data: overview.originDeptData.map((o, idx) => ({
        value: o.value, itemStyle: {
          color: DEFAULT_COLORS[idx]
        }
      }))
    }]
  }), [overview.originDeptData])

  useEffect(() => {
    getDataScreening()
  }, [])


  useEffect(() => {
    barRef.current = init(barElementRef.current)
    barRef.current.setOption(barOption)
  }, [barOption])

  useEffect(() => {
    pieRef.current = init(pieElementRef.current)
    pieRef.current.setOption(pieOption)
  }, [pieOption])
  return (
    <Container>
      <Helmet title='数据总览' />

      <div className={styles['overview-container']}>
        <div className={styles['card-list']}>
          {[
            {
              title: '数据资源数量',
              num: overview.dataSource
            },
            {
              title: '来源部门数量',
              num: overview.originDept
            },
            {
              title: '来源系统数量',
              num: overview.originSystem
            },
            {
              title: '近一月目录新增数量',
              num: overview.countCatalogue
            }
          ].map((item) => (
            <div className={styles.item} key={item.title}>
              <div className={styles.title}>{item.title}</div>
              <div>
                <span className={styles.num}>{item.num}</span> 个
              </div>
            </div>
          ))}
        </div>
        <div className={styles.charts}>
          <div>
            <div className={styles['chart-title']}>行业分类</div>
            <div className={styles['chart-desc']}>资源目录各行业资源数量</div>
            <div ref={pieElementRef} />
          </div>
          <div>
            <div className={styles['chart-title']}>数据资源来源部门</div>
            <div className={styles['chart-desc']}>数据资源来源部门TOP10</div>
            <div ref={barElementRef} />
          </div>
        </div>
      </div>
    </Container>
  )
}