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

Iframe-PlotlyJs.page.vue
All checks were successful
/ build-and-deploy-to-vercel (push) Successful in 2m55s
Details
/ surge (push) Successful in 2m39s
Details
/ playwright (push) Successful in 1m15s
Details
/ lint-build-and-check (push) Successful in 5m50s
Details

Browse Source
This commit is contained in:
严浩
2025-04-17 19:28:47 +08:00
parent 95d5087b5e
commit ebed0cf4bf
7 changed files with 290548 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
public/iframe/for-plotly.html Normal file
View File

@ -0,0 +1,32 @@
<!--
XXX: Plotly 需要用 iframe 嵌套在页面中的原因:
-->
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Plotly 图表的 HTML 页面</title>
<!-- <script src="https://cdn.plot.ly/plotly-3.0.1.js"></script> -->
<script src="./plotly-3.0.1.js"></script>
</head>
<body>
<div id="PLOTLY_CHART" style="width: 100%; height: 100%"></div>
</body>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; /* 防止滚动条出现 */
}
/* 确保容器占满整个 iframe */
body > div {
width: 100%;
height: 100%;
}
</style>
</html>

257645
public/iframe/plotly-3.0.1.js Normal file
View File

File diff suppressed because one or more lines are too long

80
src/components/iframe-page-comps/Iframe-PlotlyJs-Comp.vue Normal file
View File

@ -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>

20
src/pages/Page/iframe-page/Iframe-PlotlyJs.page.vue Normal file
View File

@ -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>

32770
src/pages/Page/iframe-page/_频谱图_fftSize65536_32768条.json Normal file
View File

File diff suppressed because it is too large Load Diff

40
src/pages/PkgsUsage/PlotlyJs.page.vue
View File

@ -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>

2
typed-router.d.ts vendored
View File

@ -29,6 +29,7 @@ declare module 'vue-router/auto-routes' {
'PageDomDraggable': RouteRecordInfo<'PageDomDraggable', '/Page/Dom-Draggable', Record<never, never>, Record<never, never>>, 'PageDomDraggable': RouteRecordInfo<'PageDomDraggable', '/Page/Dom-Draggable', Record<never, never>, Record<never, never>>,
'PageFonts': RouteRecordInfo<'PageFonts', '/Page/fonts', Record<never, never>, Record<never, never>>, 'PageFonts': RouteRecordInfo<'PageFonts', '/Page/fonts', Record<never, never>, Record<never, never>>,
'PageIcons': RouteRecordInfo<'PageIcons', '/Page/Icons', Record<never, never>, Record<never, never>>, 'PageIcons': RouteRecordInfo<'PageIcons', '/Page/Icons', Record<never, never>, Record<never, never>>,
'PageIframePageIframePlotlyJs': RouteRecordInfo<'PageIframePageIframePlotlyJs', '/Page/iframe-page/Iframe-PlotlyJs', Record<never, never>, Record<never, never>>,
'PageIframePageIframeConstellationDiagram': RouteRecordInfo<'PageIframePageIframeConstellationDiagram', '/Page/iframe-page/IframeConstellationDiagram', Record<never, never>, Record<never, never>>, 'PageIframePageIframeConstellationDiagram': RouteRecordInfo<'PageIframePageIframeConstellationDiagram', '/Page/iframe-page/IframeConstellationDiagram', Record<never, never>, Record<never, never>>,
'PageIframePageSpectrogram': RouteRecordInfo<'PageIframePageSpectrogram', '/Page/iframe-page/Spectrogram', Record<never, never>, Record<never, never>>, 'PageIframePageSpectrogram': RouteRecordInfo<'PageIframePageSpectrogram', '/Page/iframe-page/Spectrogram', Record<never, never>, Record<never, never>>,
'PageJSPage': RouteRecordInfo<'PageJSPage', '/Page/JSPage', Record<never, never>, Record<never, never>>, 'PageJSPage': RouteRecordInfo<'PageJSPage', '/Page/JSPage', Record<never, never>, Record<never, never>>,
@ -36,7 +37,6 @@ declare module 'vue-router/auto-routes' {
'PageP5Js': RouteRecordInfo<'PageP5Js', '/Page/p5_js', Record<never, never>, Record<never, never>>, 'PageP5Js': RouteRecordInfo<'PageP5Js', '/Page/p5_js', Record<never, never>, Record<never, never>>,
'PageStyle': RouteRecordInfo<'PageStyle', '/Page/Style', Record<never, never>, Record<never, never>>, 'PageStyle': RouteRecordInfo<'PageStyle', '/Page/Style', Record<never, never>, Record<never, never>>,
'PkgsUsageI18n': RouteRecordInfo<'PkgsUsageI18n', '/PkgsUsage/I18n', Record<never, never>, Record<never, never>>, 'PkgsUsageI18n': RouteRecordInfo<'PkgsUsageI18n', '/PkgsUsage/I18n', Record<never, never>, Record<never, never>>,
'PkgsUsagePlotlyJs': RouteRecordInfo<'PkgsUsagePlotlyJs', '/PkgsUsage/PlotlyJs', Record<never, never>, Record<never, never>>,
'PkgsUsageTsEnumUtil': RouteRecordInfo<'PkgsUsageTsEnumUtil', '/PkgsUsage/ts-enum-util', Record<never, never>, Record<never, never>>, 'PkgsUsageTsEnumUtil': RouteRecordInfo<'PkgsUsageTsEnumUtil', '/PkgsUsage/ts-enum-util', Record<never, never>, Record<never, never>>,
'UIComponentsAntdV': RouteRecordInfo<'UIComponentsAntdV', '/UI-components/AntdV', Record<never, never>, Record<never, never>>, 'UIComponentsAntdV': RouteRecordInfo<'UIComponentsAntdV', '/UI-components/AntdV', Record<never, never>, Record<never, never>>,
'UIComponentsComponents': RouteRecordInfo<'UIComponentsComponents', '/UI-components/Components', Record<never, never>, Record<never, never>>, 'UIComponentsComponents': RouteRecordInfo<'UIComponentsComponents', '/UI-components/Components', Record<never, never>, Record<never, never>>,