RayChart

Appearance

RayChart 组件 ​

RayChart 是核心组件，用于渲染 3D 图表。通常使用语义化组件（RayBar、RayLine 等）而非直接使用此组件。

组件属性 ​

option ​

  • 类型: RayChartOption
  • 必填: 是
  • 说明: 图表配置对象
typescript
interface RayChartOption {
  series: Series[]              // 系列数据（必填）
  xAxis3D?: Axis3D             // X 轴配置
  yAxis3D?: Axis3D             // Y 轴配置
  zAxis3D?: Axis3D             // Z 轴配置
  grid3D?: Grid3D              // 网格配置
  lights?: Light[]             // 光照配置（可选，自动配置）
  postprocessing?: Postprocessing  // 后处理效果
  controlSettings?: ControlSettings // 交互控制
}

width ​

  • 类型: string | number
  • 默认值: '100%'
  • 说明: 图表宽度

height ​

  • 类型: string | number
  • 默认值: '400px'
  • 说明: 图表高度

theme ​

  • 类型: object
  • 默认值: undefined
  • 说明: 主题配置

组件方法 ​

通过 ref 获取组件实例后，可以调用以下方法：

resize() ​

调整图表大小，通常在容器尺寸变化时调用。

vue
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const chartRef = ref()

const handleResize = () => {
  chartRef.value?.resize()
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<template>
  <RayBar ref="chartRef" :option="chartOption" />
</template>

dispose() ​

销毁图表实例，释放资源。

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

const chartRef = ref()

onUnmounted(() => {
  chartRef.value?.dispose()
})
</script>

资源清理

在组件卸载时调用 dispose() 可以避免内存泄漏，特别是在频繁创建/销毁图表的场景中。

getEngine() ​

获取底层渲染引擎实例，用于高级定制。

vue
<script setup>
const chartRef = ref()

const customizeEngine = () => {
  const engine = chartRef.value?.getEngine()
  // 进行高级定制...
}
</script>

生命周期事件 ​

RayChart 提供了完整的生命周期事件：

事件名触发时机参数
@mounted图表挂载完成-
@rendered图表渲染完成-
@beforeDestroy图表销毁前-
@destroyed图表销毁后-
vue
<template>
  <RayBar 
    :option="chartOption"
    @mounted="handleMounted"
    @rendered="handleRendered"
    @beforeDestroy="handleBeforeDestroy"
    @destroyed="handleDestroyed"
  />
</template>

<script setup>
const handleMounted = () => {
  console.log('Chart mounted')
}

const handleRendered = () => {
  console.log('Chart rendered')
}

const handleBeforeDestroy = () => {
  console.log('Chart will be destroyed')
}

const handleDestroyed = () => {
  console.log('Chart destroyed')
}
</script>

详见 生命周期

交互事件 ​

RayChart 支持丰富的交互事件，详见 事件系统。

完整示例 ​

vue
<template>
  <RayBar 
    ref="chartRef"
    :option="chartOption" 
    width="100%" 
    height="600px"
    @click="handleClick"
    @rendered="handleRendered"
  />
</template>

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

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

const handleClick = (params) => {
  console.log('Clicked:', params)
}

const handleRendered = () => {
  console.log('Chart rendered')
}

// 窗口大小改变时调整图表
const handleResize = () => {
  chartRef.value?.resize()
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  chartRef.value?.dispose()
})
</script>

TypeScript 支持 ​

RayChart 提供完整的 TypeScript 类型定义：

typescript
import type { RayChartOption, Series, Axis3D } from 'raychart'

const option: RayChartOption = {
  series: [{
    data: [120, 200, 150]
  }],
  xAxis3D: {
    data: ['A', 'B', 'C']
  }
}

相关文档 ​