XW-AIOT/iot-device-management-frontend
4
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

优化：告警趋势图从堆叠面积改为独立折线图

Browse Source 
去掉 stack + areaStyle，每种告警类型独立一条折线，
都从 Y 轴 0 开始，更直观易读。
This commit is contained in:
16337
2026-03-19 11:42:50 +08:00
parent 8bce09a17a
commit a0d4e6d05d
1 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/web-antd/src/views/aiot/alarm/summary/chart-options.ts
View File

@@ -28,7 +28,7 @@ const LEVEL_COLORS: Record<number, string> = {
3: '#8c8c8c', 3: '#8c8c8c',
}; };
/** 告警趋势面积图 */ /** 告警趋势折线图（每种类型独立一条线，都从0开始） */
export function getTrendChartOptions(data: AiotAlarmApi.TrendItem[]): any { export function getTrendChartOptions(data: AiotAlarmApi.TrendItem[]): any {
const dates = data.map((d) => d.date.slice(5)); // MM-DD const dates = data.map((d) => d.date.slice(5)); // MM-DD
const types = Object.keys(TYPE_NAMES); const types = Object.keys(TYPE_NAMES);
@@ -36,7 +36,7 @@ export function getTrendChartOptions(data: AiotAlarmApi.TrendItem[]): any {
return { return {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }, axisPointer: { type: 'line' },
}, },
legend: { legend: {
data: types.map((t) => TYPE_NAMES[t]), data: types.map((t) => TYPE_NAMES[t]),
@@ -53,10 +53,11 @@ export function getTrendChartOptions(data: AiotAlarmApi.TrendItem[]): any {
name: TYPE_NAMES[type], name: TYPE_NAMES[type],
type: 'line', type: 'line',
smooth: true, smooth: true,
stack: 'total', symbol: 'circle',
areaStyle: { opacity: 0.25 }, symbolSize: 6,
emphasis: { focus: 'series' }, emphasis: { focus: 'series' },
itemStyle: { color: TYPE_COLORS[type] }, itemStyle: { color: TYPE_COLORS[type] },
lineStyle: { width: 2 },
data: data.map((d) => (d[type] as number) || 0), data: data.map((d) => (d[type] as number) || 0),
})), })),
}; };