raychart

RayChart

简单、易用、有趣的 Vue 3D 图表库，基于 Vue 3 和 Three.js

官网 • 文档 • 快速开始 • 更新日志

✨ 特性

• 📊 丰富的图表类型：16+ 种 3D 图表，覆盖柱状、折线、饼图、散点、雷达、曲面、漏斗、仪表、水球、词云、关系图、3D 地图等
• 🗺️ 3D 地图：支持地图投影、飞线/流动线/路径图层、热力与柱状叠加
• 🎨 高度可定制：灵活的配置项，支持自定义样式、颜色和交互
• 🚀 Vue 3 原生：使用 Vue 3 Composition API 构建
• 📦 TypeScript：完整的类型定义，提供更好的开发体验
• ⚡ 性能优化：智能材质分级、按需渲染、对象池优化
• 🎯 专业光照：四点光照系统，ACES 色调映射

📦 安装

npm install raychart

🚀 快速开始

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import RayChart from 'raychart'
import 'raychart/dist/raychart.css'

const app = createApp(App)
app.use(RayChart)
app.mount('#app')

按需引入

<script setup lang="ts">
import { RayBar } from 'raychart'
import 'raychart/dist/raychart.css'

const option = {
  series: [{
    type: 'bar',
    data: [120, 200, 150, 80, 70, 110, 130]
  }]
}
</script>

<template>
  <div style="height: 500px">
    <RayBar :option="option" />
  </div>
</template>

📊 图表类型

• RayBar - 3D 柱状图
• RayBar3DGrid - 3D 柱状图（网格布局）
• RayLine - 3D 折线图
• RayArea3D - 3D 面积图
• RayPie - 3D 饼图
• RayScatter3D - 3D 散点图
• RayScatter3DXyz - 3D 散点图（XYZ 坐标）
• RayRadar - 3D 雷达图
• RaySurface3D - 3D 曲面图
• RayFunnel - 3D 漏斗图
• RayGauge - 3D 仪表盘
• RayLiquid - 3D 水球图
• RayWordCloud - 3D 词云
• RayGraph3D - 3D 关系图
• RayHeatmap3D - 3D 热力图
• RayMap3D - 3D 地图

📚 文档

完整文档请访问：https://docs.raychart.cn

• 快速上手
• 图表类型
• API 参考
• 高级功能

🛠️ 开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 类型检查
npm run type-check

# 构建库
npm run build

# 构建站点
npm run build:site

# 打包分析
npm run analyze

# 清理构建产物
npm run clean

# 文档开发
npm run docs:dev

# 文档构建
npm run docs:build

📋 更新日志

详细的更新日志请查看 CHANGELOG.md

🔗 相关链接

• 官方网站
• 在线文档
• npm 包
• 更新日志

⚙️ 环境要求

• Node.js >= 18.0.0
• npm >= 9.0.0
• Vue >= 3.5.0
• Three.js >= 0.184.0

📄 许可证

商业使用许可

Copyright © 2024-2026 RayChart Team. All Rights Reserved.

Made with ❤️ by RayChart Team