Iframe-PlotlyJs.page.vue

src/components/iframe-page-comps/Iframe-PlotlyJs-Comp.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+const src = computed(() => `${import.meta.env.BASE_URL}iframe/for-plotly.html`);
+
+type I频谱图数据 = number[];
+type WindowWithPlotly = Window & {
+  Plotly: typeof import('plotly.js-dist-min');
+};
+
+const iframeRef = useTemplateRef<HTMLIFrameElement>('iframeRef');
+let contentWindow: null | WindowWithPlotly = null;
+let plotlyElement: import('plotly.js-dist-min').PlotlyHTMLElement | null = null;
+let _readyPromiseReslove = () => {};
+const readyPromise = new Promise<void>((resolve) => {
+  _readyPromiseReslove = resolve;
+});
+
+const 频谱图Trace = {
+  name: '频谱',
+  x: [],
+  y: [],
+  type: 'scatter',
+  line: { color: 'blue' },
+} satisfies import('plotly.js-dist-min').Data;
+
+const data = [频谱图Trace];
+
+const 频谱图layout = {
+  title: '频谱图',
+  xaxis: {
+    title: '频率 (Hz)',
+    // range: [0, 22_050],
+    showgrid: true,
+    gridcolor: '#eee',
+    tickformat: ',d', // 设置为带逗号的整数格式 (推荐，更易读)
+  },
+  yaxis: {
+    title: '幅度 (dB)',
+    showgrid: true, // 显示网格线
+    gridcolor: '#eee',
+    tickformat: ',d', // 设置为带逗号的整数格式 (推荐，更易读)
+  },
+  margin: { l: 60, r: 40, b: 60, t: 60 },
+} satisfies Partial<import('plotly.js-dist-min').Layout>;
+
+defineExpose({
+  执行画图: async (数据: I频谱图数据, FFT大小: number /* 也叫快速傅里叶变换大小 */, 采样率: number) => {
+    console.debug('[执行画图被调用]', `数据.length :>> `, 数据.length);
+    await readyPromise;
+    const 频率分辨率 = 采样率 / FFT大小;
+    const x数据 = Array.from({ length: 数据.length }, (_, i) => i * 频率分辨率);
+    contentWindow!.Plotly.addTraces(plotlyElement!, {
+      x: x数据,
+      y: 数据,
+    });
+
+    // // 清除之前的数据并添加新数据
+    // contentWindow!.Plotly.newPlot(plotlyElement!, [{
+    //   x: x数据,
+    //   y: data,
+    //   type: 'scatter',
+    //   line: { color: 'blue' },
+    //   name: '频谱'
+    // }], 频谱图layout);
+  },
+});
+
+async function onIframeLoad() {
+  console.debug('[onIframeLoad] iframe 加载完成');
+  contentWindow = iframeRef.value!.contentWindow as WindowWithPlotly;
+  plotlyElement = await contentWindow.Plotly.newPlot('PLOTLY_CHART', data, 频谱图layout);
+  _readyPromiseReslove();
+}
+onMounted(() => {
+  console.debug('[onMounted] comp 加载完成');
+});
+</script>
+
+<template>
+  <iframe ref="iframeRef" @load="onIframeLoad" :src style="width: 100%; height: 100%; border: none" />
+</template>

src/pages/Page/iframe-page/Iframe-PlotlyJs.page.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import 频谱图数据 from './_频谱图_fftSize65536_32768条.json';
+
+const compRef = useTemplateRef('compRef');
+
+onMounted(() => {
+  console.debug('[onMounted] page 加载完成');
+  compRef.value!.执行画图(
+    频谱图数据, // 实际数据点为32768
+    65_536, // FFT大小为65536
+    96_000, // 采样率为96000
+  );
+});
+</script>
+
+<template>
+  <IframePlotlyJsComp ref="compRef" style="width: 1400px; height: 400px; max-width: 100%" />
+</template>
+
+<style scoped></style>

src/pages/PkgsUsage/PlotlyJs.page.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import Plotly from 'plotly.js-dist-min';
-
-const plotRef = useTemplateRef<import('plotly.js-dist-min').PlotlyHTMLElement | null>('plotRef');
-
-// 数据
-const trace1 = {
-  x: [1, 2, 3, 4, 5],
-  y: [2, 4, 1, 5, 3],
-  type: 'scatter',
-} satisfies import('plotly.js-dist-min').Data;
-
-const data = [trace1];
-
-// 布局
-const layout = {
-  title: '简单折线图',
-  xaxis: {
-    title: 'X 轴',
-  },
-  yaxis: {
-    title: 'Y 轴',
-  },
-} satisfies Partial<import('plotly.js-dist-min').Layout>;
-
-onMounted(async () => {
-  // 绘制图表
-  Plotly.newPlot(plotRef.value!, data, layout);
-
-  plotRef.value?.on('plotly_relayout', (eventData) => {
-    console.debug(`eventData :>> `, eventData);
-  });
-});
-</script>
-
-<template>
-  <div ref="plotRef" style="width: 600px; height: 400px"></div>
-</template>
-
-<style scoped></style>