examples/vue-ts-example
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Iframe-PlotlyJs-Comp.vue

Browse Source
This commit is contained in:
严浩
2025-04-18 12:05:53 +08:00
parent ebed0cf4bf
commit 1f959b1d1b
3 changed files with 50 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
public/iframe/for-plotly.html
View File

@ -11,7 +11,8 @@ XXX: Plotly 需要用 iframe 嵌套在页面中的原因:
<script src="./plotly-3.0.1.js"></script> <script src="./plotly-3.0.1.js"></script>
</head> </head>
<body> <body>
<div id="PLOTLY_CHART" style="width: 100%; height: 100%"></div> <div id="PLOTLY_CHART_spectrogram" style="width: 100%; height: 100%"></div>
<div id="PLOTLY_CHART_waterfall" style="width: 100%; height: 100%"></div>
</body> </body>
<style> <style>
html, html,
@ -24,9 +25,11 @@ XXX: Plotly 需要用 iframe 嵌套在页面中的原因:
} }
/* 确保容器占满整个 iframe */ /* 确保容器占满整个 iframe */
body > div { body {
width: 100%; display: flex;
height: 100%; flex-direction: column;
justify-content: center;
align-items: center;
} }
</style> </style>
</html> </html>

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

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

4
src/pages/Page/iframe-page/Iframe-PlotlyJs.page.vue
View File

@ -5,7 +5,7 @@ const compRef = useTemplateRef('compRef');
onMounted(() => { onMounted(() => {
console.debug('[onMounted] page 加载完成'); console.debug('[onMounted] page 加载完成');
compRef.value!.执行画图( compRef.value!.添加数据(
频谱图数据, // 实际数据点为32768 频谱图数据, // 实际数据点为32768
65_536, // FFT大小为65536 65_536, // FFT大小为65536
96_000, // 采样率为96000 96_000, // 采样率为96000
@ -14,7 +14,7 @@ onMounted(() => {
</script> </script>
<template> <template>
<IframePlotlyJsComp ref="compRef" style="width: 1400px; height: 400px; max-width: 100%" /> <IframePlotlyJsComp ref="compRef" style="width: 1400px; height: 600px; max-width: 100%" />
</template> </template>
<style scoped></style> <style scoped></style>