RayChart

Appearance

交互控制 ​

包括相机控制和事件监听。

相机控制 ​

vue
<script setup>
const chartOption = ref({
  series: [{ data: [120, 200, 150] }],
  xAxis3D: { data: ['A', 'B', 'C'] },
  controlSettings: {
    enableRotate: true,
    enableZoom: true,
    enablePan: true,
    autoRotate: false
  }
})
</script>

基础控制 ​

配置项类型默认值说明
enableRotatebooleantrue启用旋转
enableZoombooleantrue启用缩放
enablePanbooleantrue启用平移
autoRotatebooleanfalse自动旋转
autoRotateSpeednumber2.0自动旋转速度（度/秒）

高级控制 ​

旋转控制
javascript
controlSettings: {
  enableRotate: true,
  rotateSpeed: 1.0,           // 旋转速度
  minPolarAngle: 0,           // 俯仰角下限
  maxPolarAngle: Math.PI,     // 俯仰角上限
  minAzimuthAngle: -Infinity, // 水平旋转下限
  maxAzimuthAngle: Infinity   // 水平旋转上限
}
缩放控制
javascript
controlSettings: {
  enableZoom: true,
  zoomSpeed: 1.0,      // 缩放速度
  minDistance: 10,     // 最近距离
  maxDistance: 100     // 最远距离
}
平移控制
javascript
controlSettings: {
  enablePan: true,
  panSpeed: 1.0,              // 平移速度
  screenSpacePanning: false   // 屏幕空间平移
}

事件监听 ​

支持 Vue 声明式事件监听，详见 事件系统。

vue
<template>
  <RayBar 
    :option="chartOption"
    @click="handleClick"
    @mouseover="handleMouseOver"
    @mouseout="handleMouseOut"
  />
</template>

<script setup>
const handleClick = (params) => {
  console.log('点击:', params.name, params.value)
}

const handleMouseOver = (params) => {
  console.log('悬停:', params.dataIndex)
}

const handleMouseOut = () => {
  console.log('离开')
}
</script>

常见场景 ​

禁用所有交互 ​

javascript
controlSettings: {
  enableRotate: false,
  enableZoom: false,
  enablePan: false
}

限制交互范围 ​

javascript
controlSettings: {
  enableRotate: true,
  minPolarAngle: Math.PI / 4,      // 限制最小仰角 45°
  maxPolarAngle: Math.PI * 3 / 4,  // 限制最大仰角 135°
  minDistance: 20,                  // 限制最近距离
  maxDistance: 80                   // 限制最远距离
}

自动旋转展示 ​

javascript
controlSettings: {
  autoRotate: true,
  autoRotateSpeed: 2.0,  // 每秒旋转 2 度
  enableRotate: true,    // 允许用户手动旋转
  enableZoom: true
}

自动旋转

用户交互时自动旋转会暂停，交互结束后恢复。

点击高亮 ​

vue
<template>
  <RayBar :option="chartOption" @click="handleClick" />
</template>

<script setup>
import { ref } from 'vue'

const selectedIndex = ref(-1)

const chartOption = ref({
  series: [{ data: [120, 200, 150, 80, 70, 110, 130] }],
  xAxis3D: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }
})

const handleClick = (params) => {
  selectedIndex.value = params.dataIndex
  console.log(`选中: ${params.name} = ${params.value}`)
}
</script>

触摸控制 ​

RayChart 自动支持触摸设备：

手势操作
单指拖动旋转视角
双指捏合缩放
双指拖动平移

移动端优化 ​

javascript
controlSettings: {
  enableRotate: true,
  enableZoom: true,
  enablePan: true,
  rotateSpeed: 0.5,    // 移动端降低旋转速度
  zoomSpeed: 0.5,      // 移动端降低缩放速度
  touchZoomSpeed: 0.3  // 触摸缩放速度
}

完整示例 ​

vue
<template>
  <div class="chart-container">
    <RayBar 
      :option="chartOption" 
      @click="handleClick"
      @mouseover="handleMouseOver"
      @mouseout="handleMouseOut"
    />
    <div v-if="hoveredData" class="tooltip">
      {{ hoveredData.name }}: {{ hoveredData.value }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { RayBar } from 'raychart'

const hoveredData = ref(null)

const chartOption = ref({
  series: [{ data: [120, 200, 150, 80, 70, 110, 130] }],
  xAxis3D: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
  controlSettings: {
    enableRotate: true,
    enableZoom: true,
    enablePan: true,
    autoRotate: false,
    rotateSpeed: 1.0,
    zoomSpeed: 1.0,
    minDistance: 20,
    maxDistance: 100
  }
})

const handleClick = (params) => {
  console.log('点击:', params.name, params.value)
}

const handleMouseOver = (params) => {
  hoveredData.value = params
}

const handleMouseOut = () => {
  hoveredData.value = null
}
</script>

<style scoped>
.chart-container {
  position: relative;
}

.tooltip {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
}
</style>

性能建议 ​

  1. 避免频繁更新 - 事件处理中避免频繁更新配置
  2. 使用防抖 - 高频事件（mousemove）使用防抖
  3. 合理设置范围 - 限制交互范围提升体验
  4. 移动端优化 - 降低移动端交互速度

相关文档 ​