FPGA_WebLab/src/components/LogicAnalyzer/LogicalWaveFormDisplay.vue

<template>
  <div
    class="w-full"
    :class="{
      'h-48': !analyzer.logicData.value,
      'h-150': analyzer.logicData.value,
    }"
  >
    <v-chart
      v-if="analyzer.logicData.value"
      class="w-full h-full"
      :option="option"
      autoresize
      :update-options="updateOptions"
    />
    <div
      v-else
      class="w-full h-full flex flex-col gap-6 items-center justify-center"
    >
      <div class="text-center">
        <h3 class="text-xl font-semibold text-slate-600 mb-2">
          暂无逻辑分析数据
        </h3>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, shallowRef } from "vue";
import VChart from "vue-echarts";

// Echarts
import { use } from "echarts/core";
import { LineChart } from "echarts/charts";
import {
  TooltipComponent,
  GridComponent,
  DataZoomComponent,
  AxisPointerComponent,
  ToolboxComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import type { ComposeOption } from "echarts/core";
import type { LineSeriesOption } from "echarts/charts";
import type {
  AxisPointerComponentOption,
  TooltipComponentOption,
  GridComponentOption,
  DataZoomComponentOption,
} from "echarts/components";
import type {
  ToolboxComponentOption,
  XAXisOption,
  YAXisOption,
} from "echarts/types/dist/shared";
import { useLogicAnalyzerState } from "./LogicAnalyzerManager";
import { useRequiredInjection } from "@/utils/Common";
import { isUndefined } from "lodash";

use([
  TooltipComponent,
  ToolboxComponent,
  GridComponent,
  AxisPointerComponent,
  DataZoomComponent,
  LineChart,
  CanvasRenderer,
]);

type EChartsOption = ComposeOption<
  | AxisPointerComponentOption
  | TooltipComponentOption
  | ToolboxComponentOption
  | GridComponentOption
  | DataZoomComponentOption
  | LineSeriesOption
>;

const analyzer = useRequiredInjection(useLogicAnalyzerState);

// 添加更新选项来减少重绘
const updateOptions = shallowRef({
  notMerge: false,
  lazyUpdate: true,
  silent: false,
});

const option = computed((): EChartsOption => {
  if (isUndefined(analyzer.logicData.value)) return {};

  // 只获取启用的通道
  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[] = [
    {
      left: "5%",
      right: "5%",
      top: "5%",
      bottom: "15%",
    },
  ];

  // 单个X轴
  const xAxis: XAXisOption[] = [
    {
      type: "category",
      boundaryGap: false,
      data: analyzer.logicData.value.x.map((x) => x.toFixed(3)),
      axisLabel: {
        formatter: (value: string) =>
          analyzer.logicData.value
            ? `${value}${analyzer.logicData.value.xUnit}`
            : `${value}`,
      },
    },
  ];

  // 单个Y轴，范围根据启用通道数量调整
  const yAxis: YAXisOption[] = [
    {
      type: "value",
      min: -0.5,
      max: channelCount * channelSpacing - 0.5,
      interval: channelSpacing,
      axisLabel: {
        formatter: (value: number) => {
          const channelIndex = Math.round(value / channelSpacing);
          return channelIndex < channelCount
            ? enabledChannels[channelIndex].label
            : "";
        },
      },
      splitLine: { show: false },
    },
  ];

  // 创建系列数据，只包含启用的通道
  const series: LineSeriesOption[] = enabledChannelIndices.map(
    (originalIndex: number, displayIndex: number) => ({
      name: enabledChannels[displayIndex].label,
      type: "line",
      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: displayIndex * channelSpacing,
        color: enabledChannels[displayIndex].color,
      },
      symbol: "none",
      // 优化性能配置
      sampling: "lttb",
      // 减少动画以避免闪烁
      animation: false,
    }),
  );

  return {
    // 全局动画配置
    animation: false,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
        label: {
          backgroundColor: "#6a7985",
        },
        // 减少axisPointer的动画
        animation: false,
      },
      formatter: (params: any) => {
        if (Array.isArray(params) && params.length > 0) {
          const timeValue = analyzer.logicData.value!.x[params[0].dataIndex];
          const dataIndex = params[0].dataIndex;

          let tooltip = `Time: ${timeValue.toFixed(3)}${analyzer.logicData.value!.xUnit}<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;
        }
        return "";
      },
      // 优化tooltip性能
      hideDelay: 100,
    },
    toolbox: {
      feature: {
        restore: {},
      },
    },
    grid: grids,
    xAxis: xAxis,
    yAxis: yAxis,
    dataZoom: [
      {
        show: true,
        realtime: true,
        start: 0,
        end: 100,
      },
      {
        type: "inside",
        realtime: true,
        start: 0,
        end: 100,
      },
    ],
    series: series,
  };
});
</script>