From 9d71e24e7982f6915e5f832512925bee9b245f35 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期二, 20 八月 2024 16:13:26 +0800
Subject: [PATCH] #
---
src/pages/right/components/task-charts.jsx | 47 ++++++++++++++++++++++++++++++++++-------------
1 files changed, 34 insertions(+), 13 deletions(-)
diff --git a/src/pages/right/components/task-charts.jsx b/src/pages/right/components/task-charts.jsx
index 66a002d..2924334 100644
--- a/src/pages/right/components/task-charts.jsx
+++ b/src/pages/right/components/task-charts.jsx
@@ -1,9 +1,37 @@
-import React from 'react';
+import { useEffect, useState } from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts/core';
+import { getTaskCharts } from '@/api/report';
const TasksCharts = () => {
- const backgroundColor = '#101736';
+ const [seriesData, setSeriesData] = useState([
+ { name: 'A1', data: [120, 132, 101, 134, 90, 230, 210] },
+ { name: 'C3', data: [220, 182, 191, 234, 290, 330, 310] },
+ { name: 'Y2', data: [150, 232, 201, 154, 190, 330, 410] },
+ { name: 'A3', data: [320, 332, 301, 334, 390, 330, 320] },
+ ]);
+
+ const [week, setWeek] = useState(['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩']);
+
+ useEffect(() => {
+ const fetchTaskCharts = () => {
+ getTaskCharts().then(res => {
+ setSeriesData(res.data);
+ setWeek(res.week);
+ })
+ }
+
+ fetchTaskCharts();
+
+ const timer = setInterval(() => {
+ fetchTaskCharts();
+ }, 60000);
+
+ return () => {
+ clearInterval(timer);
+ }
+ }, []);
+
const color = ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05']; //2涓互涓婄殑series灏遍渶瑕佺敤鍒癱olor鏁扮粍
const legend = {
//data锛屽氨鏄彇寰楁瘡涓猻eries閲岄潰鐨刵ame灞炴�с��
@@ -28,12 +56,6 @@
type: 'shadow',
},
};
- let seriesData = [
- { name: 'A1', data: [120, 132, 101, 134, 90, 230, 210] },
- { name: 'C3', data: [220, 182, 191, 234, 290, 330, 310] },
- { name: 'Y2', data: [150, 232, 201, 154, 190, 330, 410] },
- { name: 'A3', data: [320, 332, 301, 334, 390, 330, 320] },
- ];
const commonConfigFn = (index) => {
return {
type: 'line',
@@ -76,13 +98,12 @@
};
};
- seriesData = seriesData.map((item, index) => ({ ...item, ...commonConfigFn(index) }));
const option = {
color,
tooltip,
legend,
grid: {
- top: '15%',
+ top: '20%',
left: '3%',
right: '4%',
bottom: '5%',
@@ -109,7 +130,7 @@
show: false, //涓嶆樉绀篻rid绔栧悜鍒嗗壊绾�
},
- data: ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩'],
+ data: week,
},
yAxis: {
type: 'value',
@@ -127,12 +148,12 @@
},
},
- series: seriesData,
+ series: seriesData.map((item, index) => ({ ...item, ...commonConfigFn(index) })),
};
return (
<div>
- <ReactECharts style={{ height: '280px' }} option={option} />
+ <ReactECharts style={{ height: '320px' }} option={option} />
</div>
);
};
--
Gitblit v1.9.1