Iframe-PlotlyJs.page.vue

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>