|  |  |  | 
|---|
|  |  |  | import React from 'react'; | 
|---|
|  |  |  | import { useEffect, useState } from 'react'; | 
|---|
|  |  |  | import ReactECharts from 'echarts-for-react'; | 
|---|
|  |  |  | import * as echarts from 'echarts/core'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const getLatestDateArr = () => { | 
|---|
|  |  |  | let dates = []; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | for (let i = 0; i < 5; i++) { | 
|---|
|  |  |  | let d = new Date(); | 
|---|
|  |  |  | d.setDate(d.getDate() - i); | 
|---|
|  |  |  | let month = (d.getMonth() + 1).toString().padStart(2, '0'); // getMonth() 返回值为 0(一月) 到 11(十二月) | 
|---|
|  |  |  | let day = d.getDate().toString().padStart(2, '0'); | 
|---|
|  |  |  | dates.unshift(`${month}/${day}`); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return dates; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const StatCharts = () => { | 
|---|
|  |  |  | const [xdata, setXdata] = useState([]); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | useEffect(() => { | 
|---|
|  |  |  | const dates = getLatestDateArr(); | 
|---|
|  |  |  | setXdata(dates); | 
|---|
|  |  |  | }, []); | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | let chartData = { | 
|---|
|  |  |  | xdata: ['01/01', '01/02', '01/03', '01/04', '01/05'], | 
|---|
|  |  |  | xdata: xdata, | 
|---|
|  |  |  | currentYearList: [10, 20, 30, 40, 50], | 
|---|
|  |  |  | lastYearList: [20, 10, 30, 40, 20], | 
|---|
|  |  |  | rateDataOne: [10, 40, 20, 30, 50], | 
|---|
|  |  |  | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <> | 
|---|
|  |  |  | <div> | 
|---|
|  |  |  | <ReactECharts style={{ height: '250px' }} option={option} /> | 
|---|
|  |  |  | <ReactECharts style={{ height: '270px' }} option={option} /> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </> | 
|---|
|  |  |  | ); | 
|---|