feat: add Plotly.js usage page

src/pages/PkgsUsage/PlotlyJs.page.vue

@@ -0,0 +1,40 @@
+<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>