项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。

相机与交互 ​

三维图的视角由一台轨道相机控制:相机绕目标点环绕(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 在拖拽结束时补发一次终态, 拖拽过程中不刷事件。