相机与交互
三维图的视角由一台轨道相机控制:相机绕目标点环绕(yaw 方位角 / pitch 仰角 / distance 距离),所有交互本质都是在改这三个量(外加 target 看向哪里)。
指针交互
| 手势 | 行为 |
|---|---|
| 拖拽 | 环绕视角(向下拖看到更多顶面) |
| Shift + 拖拽 | 平移画面(移动 target) |
| 滚轮 | 缩放(拉近 / 推远) |
| 双指捏合 | 缩放(触屏) |
| 双击 | 复位到初始视角 |
| 悬浮 | 拾取数据,弹出 tooltip |
关闭某项能力:
js
{
interaction: {
zoom: false, // 关滚轮/捏合缩放
resetOnDblClick: false // 关双击复位
}
}自动旋转
autoRotateSpeed 单位是度/秒,正负决定方向;拖拽时自动暂停,松手后继续。
初始视角
camera 里的四个量决定开场构图,全部可省略:
yaw:方位角(度),默认 -52,即从左前上方看;pitch:仰角(度),默认 27,限制在 2–88 之间,不会钻到地下;distance:相机距离,默认 3.6,装不下数据时会自动外推(autoFit);target:看向的世界坐标点,默认略高于地面。
用户一旦手动拖拽或缩放,autoFit 即停止,避免和用户操作打架;双击或 resetCamera() 可回到配置的初始视角。
键盘
图表容器可聚焦(Tab 进入),方向键环绕、+ / - 缩放、Home 复位、Esc 清除悬浮、 Enter 触发点选。
事件与实例方法
vue
<template>
<EvChart3d ref="chart" :options="options" @camera-change="onCamera" />
</template>
<script setup>
import { ref } from 'vue'
const chart = ref(null)
function onCamera(cam) {
// { yaw, pitch, distance, target }
console.log(cam.yaw, cam.pitch)
}
// 命令式控制
chart.value.setCamera({ yaw: -30, pitch: 40 })
chart.value.resetCamera()
</script>相机变化只会重绘画面,不会重放进场动画;camera-change 在拖拽结束时补发一次终态, 拖拽过程中不刷事件。