diff --git a/apps/web-antd/src/views/device/device/detail/components/running/RealtimeChart.vue b/apps/web-antd/src/views/device/device/detail/components/running/RealtimeChart.vue
index ba5fd6b..c6ad3a9 100644
--- a/apps/web-antd/src/views/device/device/detail/components/running/RealtimeChart.vue
+++ b/apps/web-antd/src/views/device/device/detail/components/running/RealtimeChart.vue
@@ -28,7 +28,7 @@ const renderChart = () => {
if (props.data.length === 0) return;
// 按时间升序排序
- const sortedData = [...props.data].sort((a, b) => a.timestamp - b.timestamp);
+ const sortedData = [...props.data].reverse();
// ECharts时间序列数据格式:[时间, 数值]
const seriesData = sortedData.map((item) => [
@@ -36,30 +36,35 @@ const renderChart = () => {
Number.parseFloat(item.value),
]);
+ // 动态优化参数
+ const dataCount = seriesData.length;
+ let sampling = 'false';
+ let showSymbol = true;
+ let animation = true;
+ let dataZoomStart = 0;
+
+ if (dataCount > 2000) {
+ sampling = 'lttb';
+ showSymbol = false;
+ animation = false;
+ dataZoomStart = 90; // 只显示最后10%
+ } else if (dataCount > 500) {
+ sampling = 'average';
+ showSymbol = false;
+ animation = false;
+ dataZoomStart = 80;
+ } else {
+ sampling = 'false';
+ showSymbol = true;
+ animation = true;
+ dataZoomStart = 0;
+ }
+
renderEcharts({
+ animation,
tooltip: {
// 提示框组件
trigger: 'axis',
- formatter(params) {
- const item = params[0];
- const date = new Date(item.value[0]);
- const timeStr = `${date.getFullYear()}-${(date.getMonth() + 1)
- .toString()
- .padStart(
- 2,
- '0',
- )}-${date.getDate().toString().padStart(2, '0')} ${date
- .getHours()
- .toString()
- .padStart(
- 2,
- '0',
- )}:${date.getMinutes().toString().padStart(2, '0')}:${date
- .getSeconds()
- .toString()
- .padStart(2, '0')}`;
- return `时间: ${timeStr}
值: ${item.value[1]}`;
- },
},
grid: {
top: 30,
@@ -70,7 +75,11 @@ const renderChart = () => {
name: '时间',
axisLabel: {
rotate: 30,
- formatter(value: number) {
+ hideOverlap: true, // 自动隐藏重叠标签
+ interval: 'auto', // 自动间隔显示
+ align: 'center', // 让多行内容居中
+ margin: 32,
+ formatter(value) {
const date = new Date(value);
return `${date.getFullYear()}-${(date.getMonth() + 1)
.toString()
@@ -100,7 +109,7 @@ const renderChart = () => {
show: true, // 显示组件
xAxisIndex: [0], // 控制第一个x轴
top: '90%', // 放置在底部
- start: 0, // 初始起始范围比例为0%
+ start: dataZoomStart, // 初始起始范围比例为0%
end: 100, // 初始结束范围比例为100%
left: '17%',
width: '65%',
@@ -108,16 +117,18 @@ const renderChart = () => {
{
type: 'inside', // 内置型
xAxisIndex: [0], // 控制第一个x轴
- start: 0,
+ start: dataZoomStart,
end: 100,
},
],
series: [
{
- name: '数据系列',
+ name: '值',
type: 'line',
data: seriesData,
// 可选:配置线条样式
+ sampling,
+ showSymbol,
lineStyle: {
color: '#5470C6',
},
diff --git a/apps/web-antd/src/views/device/device/detail/components/running/RealtimePanel.vue b/apps/web-antd/src/views/device/device/detail/components/running/RealtimePanel.vue
index 623cd37..02e02b8 100644
--- a/apps/web-antd/src/views/device/device/detail/components/running/RealtimePanel.vue
+++ b/apps/web-antd/src/views/device/device/detail/components/running/RealtimePanel.vue
@@ -1,4 +1,6 @@