Plotly.js 是一个功能强大的JavaScripT图表库，支持多种图表类型，包括3D地图、SVG地图、统计图等，共有40多种图表类型。它特别适用于创建交互式和动态的数据可视化图表，支持丰富的交互功能如鼠标悬停、缩放、拖拽等操作，并且可以实时更新图表数据。
<template><div><div ref="plotlyContainer" style="width: 100%; height: 600px;"></div></div>
</template><script>
import Plotly from 'plotly.js-dist';export default {mounted() {this.createContourPlot();},methods: {createContourPlot() {// 示例数据const data = [{z: [[1, 20, 30],[20, 1, 60],[30, 60, 1],],type: 'contour',showscale: true, // 控制尺度表是否显示，可取false或true，默认为true。colorbar: {// title: '颜色标尺', // 颜色标尺的标题// titleside: 'right', // 标题位置tickfont: {family: 'Arial, sans-serif',size: 12,color: 'black',},// thickness: 20, // 颜色标尺的厚度// len: 0.6, // 颜色标尺的长度（相对于图表高度）// x: 1.1, // 颜色标尺的水平位置// y: 0.5, // 颜色标尺的垂直位置tickvals: [0, 15, 20, 30, 45, 60], // 指定颜色标尺上的刻度值ticktext: [0, 15, 20, 30, 45, 60], // 指定刻度值对应的标签},colorscale: 'Jet', // 使用 Jet 颜色标尺.指定颜色比例尺，用于表示数据值。Viridis// contours: 120, // 设置等值线密度，数值越大，等值线越紧密（密度越高）。contours: {showlabels: true, // 显示等高线标签// labelfont: { //字体样式// family: 'Arial, sans-serif',// size: 12,// color: 'white',// },// showtickprefix: 'auto', // 自动显示刻度前缀// start: 0, // 等高线的起始值// end: 60, // 等高线的结束值// size: 5, // 等高线的间隔// showlines: true, // 显示等高线// coloring: 'fill', // 填充颜色},},];// 配置const layout = {title: '等线图示例',xaxis: { title: 'X 轴' },yaxis: { title: 'Y 轴' },};// 绘制图表Plotly.newPlot(this.$refs.plotlyContainer, data, layout);},},
};
</script>