生命周期

在图表不同阶段执行自定义逻辑。

支持的组件

所有语义化组件都支持：RayBar、RayLine、RayPie、RayRadar、RayScatter3D、RayLiquid、RayMap3D

生命周期钩子

mounted

图表实例创建，DOM 已挂载，尚未渲染。

vue

<template>
  <RayBar 
    :option="chartOption"
    @mounted="handleMounted"
  />
</template>

<script setup>
const handleMounted = () => {
  console.log('图表已挂载')
  // 初始化资源
}
</script>

rendered

图表渲染完成，每次数据更新后都会触发。

vue

<template>
  <RayBar 
    :option="chartOption"
    @rendered="handleRendered"
  />
</template>

<script setup>
const handleRendered = () => {
  console.log('图表已渲染')
  // 渲染后操作
}
</script>

beforeDestroy

图表即将销毁，但资源尚未释放。

vue

<template>
  <RayBar 
    :option="chartOption"
    @beforeDestroy="handleBeforeDestroy"
  />
</template>

<script setup>
const handleBeforeDestroy = () => {
  console.log('图表即将销毁')
  // 清理资源
}
</script>

destroyed

图表已销毁，所有资源已释放。

vue

<template>
  <RayBar 
    :option="chartOption"
    @destroyed="handleDestroyed"
  />
</template>

<script setup>
const handleDestroyed = () => {
  console.log('图表已销毁')
  // 清理后操作
}
</script>

生命周期流程

创建阶段:
  ↓
mounted (图表实例创建)
  ↓
rendered (首次渲染完成)
  ↓
更新阶段:
  ↓
rendered (数据更新后重新渲染)
  ↓
销毁阶段:
  ↓
beforeDestroy (即将销毁)
  ↓
destroyed (已销毁)

完整示例

柱状图示例

vue

<template>
  <div>
    <RayBar 
      v-if="showChart"
      :option="chartOption"
      @mounted="handleMounted"
      @rendered="handleRendered"
      @beforeDestroy="handleBeforeDestroy"
      @destroyed="handleDestroyed"
    />
    <n-button @click="updateData">更新数据</n-button>
    <n-button @click="toggleChart">切换显示</n-button>
  </div>
</template>

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

const showChart = ref(true)
const chartOption = ref({
  series: [{
    data: [120, 200, 150, 80, 70]
  }],
  xAxis3D: {
    data: ['A', 'B', 'C', 'D', 'E']
  }
})

const handleMounted = () => {
  console.log('✅ 图表已挂载')
  // 初始化操作
}

const handleRendered = () => {
  console.log('🎨 图表已渲染')
  // 渲染后操作
}

const handleBeforeDestroy = () => {
  console.log('⚠️ 图表即将销毁')
  // 清理操作
}

const handleDestroyed = () => {
  console.log('❌ 图表已销毁')
  // 销毁后操作
}

const updateData = () => {
  chartOption.value = {
    ...chartOption.value,
    series: [{
      data: [150, 230, 180, 90, 85]
    }]
  }
}

const toggleChart = () => {
  showChart.value = !showChart.value
}
</script>

多图表示例

vue

<template>
  <div class="charts-container">
    <RayBar 
      :option="barOption"
      @mounted="() => handleMounted('柱状图')"
      @rendered="() => handleRendered('柱状图')"
    />
    <RayLine 
      :option="lineOption"
      @mounted="() => handleMounted('折线图')"
      @rendered="() => handleRendered('折线图')"
    />
    <RayPie 
      :option="pieOption"
      @mounted="() => handleMounted('饼图')"
      @rendered="() => handleRendered('饼图')"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { RayBar, RayLine, RayPie } from 'raychart'
import 'raychart/dist/raychart.css'

const barOption = ref({
  series: [{ data: [120, 200, 150] }],
  xAxis3D: { data: ['A', 'B', 'C'] }
})

const lineOption = ref({
  series: [{ data: [120, 200, 150] }],
  xAxis3D: { data: ['A', 'B', 'C'] }
})

const pieOption = ref({
  series: [{ 
    data: [
      { name: 'A', value: 120 },
      { name: 'B', value: 200 },
      { name: 'C', value: 150 }
    ]
  }]
})

const handleMounted = (chartType: string) => {
  console.log(`✅ ${chartType}已挂载`)
}

const handleRendered = (chartType: string) => {
  console.log(`🎨 ${chartType}已渲染`)
}
</script>

<style scoped>
.charts-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
</style>

使用场景

性能监控

vue

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

const renderCount = ref(0)
const renderTimes = ref<number[]>([])
let mountTime = 0

const handleMounted = () => {
  mountTime = Date.now()
  console.log('图表挂载时间:', mountTime)
}

const handleRendered = () => {
  renderCount.value++
  const renderTime = Date.now() - mountTime
  renderTimes.value.push(renderTime)
  console.log(`第 ${renderCount.value} 次渲染，耗时: ${renderTime}ms`)
}
</script>

资源管理

vue

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

let customResources: any[] = []

const handleMounted = () => {
  // 初始化自定义资源
  customResources = [
    // ... 创建资源
  ]
}

const handleBeforeDestroy = () => {
  // 清理自定义资源
  customResources.forEach(resource => {
    resource.dispose()
  })
  customResources = []
}
</script>

数据同步

vue

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

const handleRendered = () => {
  // 渲染完成后同步状态
  syncStateToServer()
}

const syncStateToServer = async () => {
  // 同步逻辑
}
</script>

动画控制

vue

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

let animationId: number | null = null

const handleMounted = () => {
  // 启动自定义动画
  startAnimation()
}

const handleBeforeDestroy = () => {
  // 停止动画
  if (animationId) {
    cancelAnimationFrame(animationId)
    animationId = null
  }
}

const startAnimation = () => {
  const animate = () => {
    // 动画逻辑
    animationId = requestAnimationFrame(animate)
  }
  animate()
}
</script>

事件追踪

vue

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

const handleMounted = () => {
  // 追踪图表创建事件
  trackEvent('chart_mounted', {
    chartType: 'bar',
    timestamp: Date.now()
  })
}

const handleRendered = () => {
  // 追踪渲染事件
  trackEvent('chart_rendered', {
    dataCount: chartOption.value.series[0].data.length
  })
}

const handleDestroyed = () => {
  // 追踪销毁事件
  trackEvent('chart_destroyed', {
    timestamp: Date.now()
  })
}

const trackEvent = (eventName: string, data: any) => {
  // 发送到分析服务
  console.log('Event:', eventName, data)
}
</script>

注意事项

mounted vs rendered

mounted: 实例创建，尚未渲染
rendered: 完成渲染，可访问 DOM

rendered 触发时机

首次渲染触发一次
每次数据更新后触发
频繁更新会频繁触发

资源清理

在 beforeDestroy 中清理资源
避免在 destroyed 中访问实例

性能考虑

避免在 rendered 中执行耗时操作
使用防抖/节流处理频繁触发

与 Vue 生命周期的关系

vue

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

// Vue 组件挂载
onMounted(() => {
  console.log('1. Vue 组件已挂载')
})

// RayChart 挂载
const handleChartMounted = () => {
  console.log('2. RayChart 已挂载')
}

// RayChart 渲染
const handleChartRendered = () => {
  console.log('3. RayChart 已渲染')
}

// Vue 组件即将卸载
onBeforeUnmount(() => {
  console.log('4. Vue 组件即将卸载')
})

// RayChart 即将销毁
const handleChartBeforeDestroy = () => {
  console.log('5. RayChart 即将销毁')
}

// RayChart 已销毁
const handleChartDestroyed = () => {
  console.log('6. RayChart 已销毁')
}
</script>

<template>
  <RayBar 
    :option="chartOption"
    @mounted="handleChartMounted"
    @rendered="handleChartRendered"
    @beforeDestroy="handleChartBeforeDestroy"
    @destroyed="handleChartDestroyed"
  />
</template>

生命周期 ​

生命周期钩子 ​

mounted ​

rendered ​

beforeDestroy ​

destroyed ​

生命周期流程 ​

完整示例 ​

柱状图示例 ​

多图表示例 ​

使用场景 ​

性能监控 ​

资源管理 ​

数据同步 ​

动画控制 ​

事件追踪 ​

注意事项 ​

与 Vue 生命周期的关系 ​

相关链接 ​