使用 Plotly.js 在 Vue 中创建交互式散点图

<template>
  <div id="scatter-plot"></div>
</template>
 
<script>
import Plotly from 'plotly.js/dist/plotly';
import { onMounted } from 'vue';
 
export default {
  setup() {
    onMounted(() => {
      const plotEl = document.getElementById('scatter-plot');
      const data = [{
        x: [1, 2, 3, 4, 5],
        y: [1, 2, 1, 2, 1],
        mode: 'markers',
        marker: {
          color: 'blue',
          size: 10
        }
      }];
      const layout = {
        width: 600,
        height: 400,
        title: '简单散点图示例'
      };
      Plotly.newPlot(plotEl, data, layout);
    });
  }
};
</script>
 
<style>
#scatter-plot {
  width: 100%;
  height: 400px;
}
</style>

这段代码使用了Vue 3的Composition API中的setup函数和onMounted生命周期钩子来初始化和渲染Plotly散点图。在<script>标签中，我们首先导入了Plotly.js库和Vue的生命周期钩子。在setup函数中，我们确保在组件挂载后获取到DOM元素，并使用Plotly.js的newPlot函数来创建散点图。这个例子展示了如何在Vue中使用Plotly.js创建基本的交互式图表。