FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Perf(Statistics): Optimize chart display performance for online users

Browse Source 
Optimize the display performance of online user icons when selecting for a long time
This commit is contained in:
Fat Snake
2024-04-22 15:18:20 +08:00
parent 0f90560144
commit f55e5281f4
1 changed files with 56 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/pages/System/Statistics/OnlineInfo.tsx
View File

@@ -59,13 +59,53 @@ const OnlineInfo = () => {
const dataList = getTimesBetweenTwoTimes( const dataList = getTimesBetweenTwoTimes(
data.history[0].time, data.history[0].time,
data.history[data.history.length - 1].time, data.history[data.history.length - 1].time,
'minute' _scope === 'DAY'
).map((time) => [ ? 'minute'
time, : _scope === 'WEEK'
data.history.find( ? 'minute'
(value) => value.time.substring(0, 16) === time.substring(0, 16) : _scope === 'MONTH'
)?.record ?? 0 ? 'hour'
]) : 'day'
).map((time) => {
const records = data.history
.filter(
(value) =>
value.time.substring(
0,
_scope === 'DAY'
? 16
: _scope === 'WEEK'
? 16
: _scope === 'MONTH'
? 13
: 10
) ===
time.substring(
0,
_scope === 'DAY'
? 16
: _scope === 'WEEK'
? 16
: _scope === 'MONTH'
? 13
: 10
)
)
.map((item) => Number(item.record))
return [
time.substring(
0,
_scope === 'DAY'
? 16
: _scope === 'WEEK'
? 16
: _scope === 'MONTH'
? 13
: 10
),
records.length ? Math.max(...records) : 0
]
})
onlineInfoEChartsRef.current = echarts.init( onlineInfoEChartsRef.current = echarts.init(
onlineInfoDivRef.current, onlineInfoDivRef.current,
@@ -77,7 +117,15 @@ const OnlineInfo = () => {
...lineEChartsBaseOption, ...lineEChartsBaseOption,
tooltip: { tooltip: {
...lineEChartsBaseOption.tooltip, ...lineEChartsBaseOption.tooltip,
formatter: getTooltipTimeFormatter('yyyy-MM-DD HH:mm') formatter: getTooltipTimeFormatter(
_scope === 'DAY'
? 'yyyy-MM-DD HH:mm'
: _scope === 'WEEK'
? 'yyyy-MM-DD HH:mm'
: _scope === 'MONTH'
? 'yyyy-MM-DD HH时'
: 'yyyy-MM-DD'
)
}, },
xAxis: { xAxis: {
...lineEChartsBaseOption.xAxis ...lineEChartsBaseOption.xAxis