diff --git a/src/components/WaveformDisplay/WaveformDisplay.vue b/src/components/WaveformDisplay/WaveformDisplay.vue
index 55ca783..730f4bc 100644
--- a/src/components/WaveformDisplay/WaveformDisplay.vue
+++ b/src/components/WaveformDisplay/WaveformDisplay.vue
@@ -95,15 +95,15 @@ const option = computed((): EChartsOption => {
.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%",
@@ -147,34 +147,84 @@ const option = computed((): EChartsOption => {
},
];
- // 创建系列数据,只包含启用的通道
- const series: LineSeriesOption[] = enabledChannelIndices.map(
- (originalIndex: number, displayIndex: number) => ({
- name: enabledChannels[displayIndex].name,
- type: "line",
- data: analyzer.logicData.value!.y[originalIndex].value.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,
- }),
- );
+ // 创建系列数据
+ const series: LineSeriesOption[] = [];
+ enabledChannelIndices.forEach((originalIndex: number, displayIndex: number) => {
+ const channel = analyzer.logicData.value!.y[originalIndex];
+ if (channel.type === "logic") {
+ // logic类型,原样显示
+ series.push({
+ name: channel.name,
+ type: "line",
+ data: channel.value.map(
+ (value: number) => value + displayIndex * channelSpacing + 0.2,
+ ),
+ step: "end",
+ lineStyle: {
+ width: 2,
+ color: channel.color,
+ },
+ areaStyle: {
+ opacity: 0.3,
+ origin: displayIndex * channelSpacing,
+ color: channel.color,
+ },
+ symbol: "none",
+ sampling: "lttb",
+ animation: false,
+ });
+ } else if (channel.type === "number") {
+ // number类型,VCD仿真样式:两个线条(1和0),变化时有斜率(过渡点),无areaStyle
+ const values = channel.value;
+ const xArr = analyzer.logicData.value!.x;
+ // 构造带过渡的点序列
+ function buildVcdLine(valArr: number[], high: number, low: number) {
+ const points: {x: number, y: number}[] = [];
+ for (let i = 0; i < valArr.length; i++) {
+ const v = valArr[i] > 0 ? high : low;
+ points.push({x: xArr[i], y: v});
+ // 检查下一个点是否变化,若变化则插入过渡点
+ if (i < valArr.length - 1 && valArr[i] !== valArr[i+1]) {
+ // 过渡点,x略微偏移(如+0.3),y为下一个值
+ const nextV = valArr[i+1] > 0 ? high : low;
+ points.push({x: xArr[i]+0.3, y: nextV});
+ }
+ }
+ // 返回y数组,x由category轴控制
+ return points.map(p => p.y);
+ }
+ // 1线条
+ series.push({
+ name: channel.name + "_1",
+ type: "line",
+ data: buildVcdLine(values, displayIndex * channelSpacing + 1, displayIndex * channelSpacing),
+ step: false, // 关闭step,允许斜率
+ lineStyle: {
+ width: 2,
+ color: channel.color,
+ },
+ symbol: "none",
+ sampling: "lttb",
+ animation: false,
+ });
+ // 0线条
+ series.push({
+ name: channel.name + "_0",
+ type: "line",
+ data: buildVcdLine(values, displayIndex * channelSpacing, displayIndex * channelSpacing + 1),
+ step: false,
+ lineStyle: {
+ width: 2,
+ color: channel.color,
+ },
+ symbol: "none",
+ sampling: "lttb",
+ animation: false,
+ });
+ }
+ });
return {
- // 全局动画配置
animation: false,
tooltip: {
trigger: "axis",
@@ -183,31 +233,29 @@ const option = computed((): EChartsOption => {
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}
`;
-
- // 只显示启用通道在当前时间点的原始数值(0或1)
- enabledChannelIndices.forEach(
- (originalIndex: number, displayIndex: number) => {
- const channelName = enabledChannels[displayIndex].name;
- const originalValue =
- analyzer.logicData.value!.y[originalIndex].value[dataIndex];
+ enabledChannelIndices.forEach((originalIndex: number, displayIndex: number) => {
+ const channel = analyzer.logicData.value!.y[originalIndex];
+ if (channel.type === "logic") {
+ const channelName = channel.name;
+ const originalValue = channel.value[dataIndex];
tooltip += `${channelName}: ${originalValue}
`;
- },
- );
-
+ } else if (channel.type === "number") {
+ const channelName = channel.name;
+ const originalValue = channel.value[dataIndex];
+ tooltip += `${channelName}: ${originalValue}
`;
+ }
+ });
return tooltip;
}
return "";
},
- // 优化tooltip性能
hideDelay: 100,
},
toolbox: {