pc-admin/src/pages/Welcome/components/LineCard.jsx

import React, { useEffect, useRef, useState } from 'react'
import moment from 'moment';
import { Button, Card, DatePicker, Space } from 'antd';
import ECharts from '@/components/ECharts'
import echarts from '@/components/ECharts/echarts'
import { assignOption } from '@/components/ECharts/utils'
import request from '@/utils/request'
import Title from './Title'

const lineOption = {
  xAxis: {
    type: 'category',
  },
  yAxis: {
    type: 'value'
  },
  series: {
    type: 'line',
    areaStyle: {
      opacity: 0.8,
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(55, 162, 255)'
      }, {
          offset: 1,
          color: 'rgba(1, 191, 236)'
      }])
    },
    smooth: true,
    lineStyle: {
      width: 0
    }
  }
}

const Condition = (props) => {
  const [dtRange, setDtRange] = useState()

  const handleWeek = () => {
    setDtRange([
      moment().startOf('week'),
      moment(),
    ])
  }

  const handleMonth = () => {
    setDtRange([
      moment().startOf('month'),
      moment(),
    ])
  }

  const handleChange = (vals) => {
    setDtRange(vals)
  }

  useEffect(() => {
    props.onChange(dtRange)
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dtRange])
  
  useEffect(() => {
    // 默认本周
    handleWeek()
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])


  return (
    <Space>
      <Button onClick={handleMonth}>本月</Button>
      <Button onClick={handleWeek}>本周</Button>
      <DatePicker.RangePicker value={dtRange} onChange={handleChange}/>
    </Space>
  )
}

export default (props) => {
  const chartRef = useRef()
  const [loading, setLoading] = useState(false)
  const [data, setData] = useState([])
  const [option, setOption] = useState(lineOption)
  const [dtRange, setDtRange] = useState()
  const [params, setParams] = useState()

  useEffect(() => {
    if (dtRange) {
      setParams({
        startDate: dtRange[0].format('YYYY-MM-DD'),      
        endDate: dtRange[1].format('YYYY-MM-DD')
      })
    }
  }, [dtRange])
  
  useEffect(() => {
    if (params) {
      setLoading(true)
      request(props.api, { params }).then(res => {
        setData(res)
        setLoading(false)
      }).catch(() => {
        setLoading(false)
      })
    }
  }, [params, props.api])

  useEffect(() => {
    const opt = assignOption(lineOption, {
      xAxis: {
        data: data.map((item) => item.dt)
      },
      series: {
        data: data.map((item) => item.val)
      }
    })

    setOption(opt)
  }, [data])

  return (
    <Card
      title={<Title text={props.title} icon={props.icon} />}
      extra={<Condition value={dtRange} onChange={(vals) => setDtRange(vals)} />}
      style={props.style}
    >
      <div style={{ margin: '0 auto', width: props.width || '100%'}}>
        <ECharts loading={loading} ref={chartRef} option={option} width={props.width || '100%'} />
      </div>
    </Card>
  )
}