RayChart

Appearance

安装 ​

📦 环境要求

  • Vue 3.5+（peer 依赖，需自行安装）
  • Three.js 0.184+（peer 依赖，需自行安装）
  • 支持 WebGL 的现代浏览器
  • Node.js 18+（开发环境）

包管理器安装 ​

推荐用包管理器，和构建工具配合更好。

bash
npm install raychart
bash
yarn add raychart
bash
pnpm add raychart

CDN 引入 ​

⚠️ CDN 引入说明

CDN 适合快速原型验证，生产环境建议用包管理器，便于版本管理与构建优化。

RayChart 将 vue 与 three 外部化（peer 依赖），CDN 方式需依次引入 Vue、Three.js、RayChart 的 UMD 包，并导入样式。

使用 unpkg ​

html
<!-- 引入 Vue 3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<!-- 引入 Three.js -->
<script src="https://unpkg.com/three@0.184.0/build/three.min.js"></script>

<!-- 引入 RayChart 样式与 UMD 包 -->
<link rel="stylesheet" href="https://unpkg.com/raychart/dist/raychart.css">
<script src="https://unpkg.com/raychart/dist/raychart.umd.cjs"></script>

<script>
  const { createApp } = Vue
  const { RayBar } = RayChart
  
  createApp({
    components: { RayBar },
    data() {
      return {
        chartOption: {
          series: [{ data: [120, 200, 150] }],
          xAxis3D: { data: ['A', 'B', 'C'] }
        }
      }
    }
  }).mount('#app')
</script>

使用 jsDelivr ​

html
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/raychart/dist/raychart.css">
<script src="https://cdn.jsdelivr.net/npm/raychart/dist/raychart.umd.cjs"></script>

验证安装 ​

创建简单示例验证：

vue
<template>
  <div style="height: 600px">
    <RayBar :option="chartOption" />
  </div>
</template>

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

const chartOption = ref({
  series: [{
    data: [120, 200, 150, 80, 70]
  }],
  xAxis3D: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
  }
})
</script>

✅ 安装成功

如果看到一个 3D 柱状图，说明安装成功！

常见问题 ​

找不到模块？ ​

确认包已安装，并正确导入样式：

javascript
import 'raychart/dist/raychart.css'  // ⚠️ 必须导入

TypeScript 类型错误？ ​

RayChart 内置类型定义。若编辑器仍报错，尝试重新安装依赖：

bash
npm ci  # 按 package-lock.json 精确安装

Vite 项目报错？ ​

若出现 "Failed to resolve import"，在 vite.config.ts 中添加：

typescript
export default defineConfig({
  optimizeDeps: {
    include: ['raychart']
  }
})

下一步 ​

📚 继续学习

安装完成！根据您的需求选择：

相关链接 ​