feat: 图表视图增加继电器输出状态系列

- 新增 buildRelaySeries() 函数构建继电器阶梯线系列
  (type=line, step=end, 红色三角标记)
- 新增第4 Y轴(继电器输出),刻度 0-3,标签解码为
  无输出/存在信号/脉冲信号/存在+脉冲
- tooltip 中继电器值自动解码为可读文本
- grid right 扩大到 200px 容纳第4 Y轴
This commit is contained in:
wangfq
2026-06-05 15:03:17 +08:00
parent aadd498851
commit 87752f12e6

View File

@@ -241,6 +241,27 @@ const CHART_SERIES = {
],
};
// 继电器系列(添加到任意视图的图表末尾)
function buildRelaySeries(records) {
return {
name: '继电器输出',
type: 'line',
step: 'end',
yAxisIndex: 3,
symbol: 'triangle',
symbolSize: 8,
lineStyle: { type: 'dotted', width: 2, color: '#e74c3c' },
itemStyle: { color: '#e74c3c' },
data: records.map(r => r.relay_code ?? null),
// tooltip 中显示解码后的文本
tooltip: {
valueFormatter: function (value) {
return RELAY_MAP[value] || `未知(${value})`;
}
},
};
}
function toggleChart() {
const container = document.getElementById('chart-container');
const btn = document.getElementById('btn-chart');
@@ -317,6 +338,9 @@ async function loadChart() {
connectNulls: false,
}));
// 添加继电器状态系列
series.push(buildRelaySeries(records));
// 渲染 ECharts
if (chartInstance) chartInstance.dispose();
chartInstance = echarts.init(container);
@@ -344,7 +368,7 @@ async function loadChart() {
},
},
},
grid: { left: 60, right: 140, top: 60, bottom: 80 },
grid: { left: 60, right: 200, top: 60, bottom: 80 },
xAxis: {
type: 'category',
data: times,
@@ -358,6 +382,15 @@ async function loadChart() {
{ type: 'value', name: '距离(mm)', nameTextStyle: { fontSize: 11 } },
{ type: 'value', name: '速度(dm/s)',nameTextStyle: { fontSize: 11 },
offset: 80 },
{ type: 'value', name: '继电器输出', nameTextStyle: { fontSize: 11 },
min: -0.5, max: 3.5, interval: 1,
offset: 160,
axisLabel: {
formatter: function (v) {
return RELAY_MAP[v] || '';
},
fontSize: 10,
}},
],
dataZoom: [
{ type: 'slider', start: 0, end: 100, height: 20, bottom: 30 },