RayChart

Appearance

简介 ​

RayChart 是一个基于 Three.js 和 Vue 3 的 3D 图表库，让你用最简单的方式创建炫酷的 3D 数据可视化。

核心理念

最简配置即可使用，需要时再深入定制

为什么用 3D 图表 ​

看得更清楚 ​

  • 空间深度让数据关系一目了然
  • 三个维度同时展示，信息密度更高
  • 光影效果强化数据层次

玩得更有趣 ​

  • 旋转、缩放、平移，像玩游戏一样探索数据
  • 多角度观察，更容易发现规律
  • 沉浸式体验让数据分析不再枯燥

看起来更酷 ​

  • 真实光照让图表更生动
  • 金属、磨砂等材质赋予质感
  • 辉光、景深等特效提升视觉冲击

适合什么场景 ​

场景典型应用
数据大屏会议室、展厅展示，视觉冲击力强
数据分析多维数据探索，更容易发现规律
产品演示教学、展示场景，互动性强
商业报表年报、业绩展示，专业有质感

一分钟上手 ​

bash
npm install raychart
bash
yarn add raychart
bash
pnpm add raychart
vue
<template>
  <RayBar :option="option" />
</template>

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

const option = {
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130]
  }],
  xAxis3D: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  }
}
</script>

就这么简单

光照、颜色、交互都有智能默认值，开箱即用

接下来做什么 ​

  • 快速上手 - 5 分钟创建第一个图表 → 开始
  • 深入学习 - 配置、交互、性能优化 → 指南
  • 看看示例 - 所有图表类型和案例 → 示例