RayChart

Appearance

安装 ​

📦 环境要求

  • Vue 3.0+
  • 支持 WebGL 的现代浏览器
  • Node.js 14+（开发环境）

包管理器安装 ​

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

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

CDN 引入 ​

⚠️ 生产环境

CDN 适合快速原型，生产环境建议用包管理器，性能更好。

使用 unpkg ​

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

<!-- 引入 RayChart -->
<link rel="stylesheet" href="https://unpkg.com/raychart/dist/raychart.css">
<script src="https://unpkg.com/raychart"></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
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/raychart/dist/raychart.css">
<script src="https://cdn.jsdelivr.net/npm/raychart"></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 柱状图，说明安装成功！

常见问题 ​

找不到模块？ ​

确保正确导入了 CSS 文件：

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

TypeScript 类型错误？ ​

RayChart 内置类型定义，如果仍有问题：

bash
# 清除缓存重新安装
rm -rf node_modules package-lock.json
npm install

Vite 项目报错？ ​

在 vite.config.ts 中添加优化配置：

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

下一步 ​

📚 继续

安装完成，查看 快速上手 开始使用。