feat: 完成逻辑分析仪前后端交互

src/components/LogicAnalyzer/LogicalWaveFormDisplay.vue

@@ -106,9 +106,20 @@ const updateOptions = shallowRef({
 const option = computed((): EChartsOption => {
   if (isUndefined(analyzer.logicData.value)) return {};
 
-  const channelCount = analyzer.logicData.value.y.length;
+  // 只获取启用的通道
+  const enabledChannels = analyzer.enabledChannels.value;
+  const enabledChannelIndices = analyzer.channels
+    .map((channel, index) => (channel.enabled ? index : -1))
+    .filter((index) => index !== -1);
+
+  const channelCount = enabledChannels.length;
   const channelSpacing = 2; // 每个通道之间的间距
 
+  // 如果没有启用的通道，返回空配置
+  if (channelCount === 0) {
+    return {};
+  }
+
   // 使用单个网格
   const grids: GridComponentOption[] = [
     {
@@ -134,7 +145,7 @@ const option = computed((): EChartsOption => {
     },
   ];
 
-  // 单个Y轴，范围根据通道数量调整
+  // 单个Y轴，范围根据启用通道数量调整
   const yAxis: YAXisOption[] = [
     {
       type: "value",
@@ -145,7 +156,7 @@ const option = computed((): EChartsOption => {
         formatter: (value: number) => {
           const channelIndex = Math.round(value / channelSpacing);
           return channelIndex < channelCount
-            ? analyzer.channelNames.value[channelIndex]
+            ? enabledChannels[channelIndex].label
             : "";
         },
       },
@@ -153,28 +164,27 @@ const option = computed((): EChartsOption => {
     },
   ];
 
-  // 创建系列数据，每个通道有不同的Y偏移
-  const series: LineSeriesOption[] = analyzer.logicData.value.y.map(
-    (channelData: number[], index: number) => ({
-      name: analyzer.channelNames.value[index],
+  // 创建系列数据，只包含启用的通道
+  const series: LineSeriesOption[] = enabledChannelIndices.map(
+    (originalIndex: number, displayIndex: number) => ({
+      name: enabledChannels[displayIndex].label,
       type: "line",
-      data: channelData.map(
-        (value: number) => value + index * channelSpacing + 0.2,
+      data: analyzer.logicData.value!.y[originalIndex].map(
+        (value: number) => value + displayIndex * channelSpacing + 0.2,
       ),
       step: "end",
       lineStyle: {
         width: 2,
+        color: enabledChannels[displayIndex].color,
       },
       areaStyle: {
         opacity: 0.3,
-        origin: index * channelSpacing,
+        origin: displayIndex * channelSpacing,
+        color: enabledChannels[displayIndex].color,
       },
       symbol: "none",
       // 优化性能配置
       sampling: "lttb",
-      // large: true,
-      // largeThreshold: 2000,
-      // progressive: 2000,
       // 减少动画以避免闪烁
       animation: false,
     }),
@@ -200,16 +210,15 @@ const option = computed((): EChartsOption => {
 
           let tooltip = `Time: ${timeValue.toFixed(3)}${analyzer.logicData.value!.xUnit}<br/>`;
 
-          // 显示所有通道在当前时间点的原始数值（0或1）
-          if (analyzer.logicData.value) {
-            analyzer.channelNames.value.forEach(
-              (channelName: string, index: number) => {
-                const originalValue =
-                  analyzer.logicData.value!.y[index][dataIndex];
-                tooltip += `${channelName}: ${originalValue}<br/>`;
-              },
-            );
-          }
+          // 只显示启用通道在当前时间点的原始数值（0或1）
+          enabledChannelIndices.forEach(
+            (originalIndex: number, displayIndex: number) => {
+              const channelName = enabledChannels[displayIndex].label;
+              const originalValue =
+                analyzer.logicData.value!.y[originalIndex][dataIndex];
+              tooltip += `${channelName}: ${originalValue}<br/>`;
+            },
+          );
 
           return tooltip;
         }
@@ -243,5 +252,4 @@ const option = computed((): EChartsOption => {
     series: series,
   };
 });
-
 </script>