工具方法

RayChart 提供了一些实用的工具方法。

性能监控

globalMonitor

全局性能监控实例。

import { globalMonitor } from 'raychart'

// 获取性能统计
const stats = globalMonitor.getStats()
console.log('FPS:', stats.fps)
console.log('Memory:', stats.memory)
console.log('Render time:', stats.renderTime)

start / end

性能计时。

import { globalMonitor } from 'raychart'

// 开始计时
const startTime = globalMonitor.start('myOperation')

// 执行操作
// ...

// 结束计时
globalMonitor.end('myOperation', startTime)

// 获取统计
const stats = globalMonitor.getOperationStats('myOperation')
console.log('Average time:', stats.averageTime)
console.log('Total calls:', stats.totalCalls)

getStats

获取性能统计信息。

const stats = globalMonitor.getStats()

// stats.fps - 帧率
// stats.memory - 内存使用
// stats.renderTime - 渲染时间
// stats.operations - 操作统计

数据验证

DataValidator

数据验证器。

import { DataValidator } from 'raychart'

// 验证数据
const isValid = DataValidator.validate(data, schema)

if (!isValid) {
  console.error('Invalid data:', DataValidator.getErrors())
}

validateOrThrow

验证数据，失败时抛出异常。

import { DataValidator } from 'raychart'

try {
  DataValidator.validateOrThrow(data, schema)
} catch (error) {
  console.error('Validation failed:', error.message)
}

工具函数

dispose

清理 Three.js 资源。

import { dispose } from 'raychart'

// 清理场景
dispose(scene)

// 清理材质
dispose(material)

// 清理几何体
dispose(geometry)

createMaterial

创建材质。

import { createMaterial } from 'raychart'

const material = createMaterial({
  color: '#42b883',
  metalness: 0.3,
  roughness: 0.5
})

createGeometry

创建几何体。

import { createGeometry } from 'raychart'

const geometry = createGeometry({
  type: 'box',
  width: 1,
  height: 2,
  depth: 1
})

完整示例

<template>
  <div>
    <RayBar ref="chartRef" :option="chartOption" />
    <div class="stats">
      <div>FPS: {{ stats.fps }}</div>
      <div>Memory: {{ stats.memory }}MB</div>
      <div>Render Time: {{ stats.renderTime }}ms</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { RayBar, globalMonitor } from 'raychart'
import 'raychart/dist/raychart.css'

const chartRef = ref()
const stats = ref({
  fps: 0,
  memory: 0,
  renderTime: 0
})

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

let timer = null

onMounted(() => {
  // 定期更新性能统计
  timer = setInterval(() => {
    const currentStats = globalMonitor.getStats()
    stats.value = {
      fps: Math.round(currentStats.fps),
      memory: Math.round(currentStats.memory / 1024 / 1024),
      renderTime: Math.round(currentStats.renderTime)
    }
  }, 1000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
  
  // 清理图表资源
  chartRef.value?.dispose()
})
</script>

<style scoped>
.stats {
  margin-top: 20px;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
}

.stats div {
  margin: 5px 0;
  font-size: 14px;
}
</style>

TypeScript 支持

所有工具方法都提供完整的 TypeScript 类型定义：

import type { 
  PerformanceStats,
  ValidationSchema,
  MaterialOptions,
  GeometryOptions
} from 'raychart'

// 使用类型
const stats: PerformanceStats = globalMonitor.getStats()