Vue3和Plotly.js绘制交互式3D热力图

<template>
  <div ref="plotlyChart" style="height: 400px;"></div>
</template>
 
<script>
import { onMounted, ref } from 'vue';
import Plotly from '@/assets/js/plotly.min.js'; // 引入Plotly.js
 
export default {
  setup() {
    const plotlyChart = ref(null);
 
    onMounted(() => {
      const data = [
        {
          type: 'heatmap',
          x: ['A', 'B', 'C', 'D'],
          y: ['1', '2', '3', '4'],
          z: [[1, 20, 30, 50], [20, 1, 60, 80], [30, 60, 1, -10], [50, 80, -10, 1]],
          colorscale: [[0, 'rgb(223, 223, 223)'], [1, 'rgb(45, 45, 72)']],
          colorbar: {title: 'Intensity'},
        }
      ];
      const layout = {
        width: 400,
        height: 400,
        xaxis: {
          ticks: '',
          side: 'top'
        },
        yaxis: {
          ticks: '',
          ticksuffix: ' ',
          showticklabels: false
        },
        autosize: false
      };
 
      Plotly.newPlot(plotlyChart.value, data, layout, {displayModeBar: false});
    });
 
    return { plotlyChart };
  }
};
</script>

这段代码使用Vue3的Composition API和Plotly.js创建了一个简单的3D热力图。它首先引入了Plotly.js库，然后在setup函数中使用onMounted生命周期钩子来初始化Plotly图表。plotlyChart是一个响应式引用，指向用于渲染图表的DOM元素，在元素准备好后，会使用Plotly.js的newPlot函数来创建热力图。这个例子展示了如何在Vue3项目中集成Plotly.js进行数据可视化。