QBI Charts

一个基于 Vue 3 的图表组件库，支持多种图表类型，包括折线图、面积图等。

特性

• 🚀 基于 Vue 3 开发
• 📊 支持多种图表类型
• 🎨 支持 SASS 样式
• 📦 支持按需加载
• 🔍 完整的 TypeScript 支持
• 📝 详细的文档

目录结构

qbi-charts/
├── docs/                # 文档目录
├── examples/            # 示例项目
├── packages/            # 组件源码
│   ├── Area/           # 面积图组件
│   ├── Line/           # 折线图组件
│   ├── Test/           # 测试组件
│   └── index.ts        # 组件入口文件
├── components/         # 公共组件
├── types/              # 公共类型定义
├── utils/              # 公共工具函数
├── hooks/              # 公共HOOKS
├── vite.config.ts      # Vite 配置
└── package.json        # 项目配置

快速开始

安装

# 使用 npm
npm install qbi-charts

# 使用 yarn
yarn add qbi-charts

# 使用 pnpm
pnpm add qbi-charts

使用

<template>
  <Line :data="chartData" :config="chartConfig" />
</template>

<script setup>
import { Line } from "qbi-charts";
import "qbi-charts/dist/style.css";

const chartData = [
  { x: "2021", y: 100 },
  { x: "2022", y: 200 },
  { x: "2023", y: 300 },
];

const chartConfig = {
  // 图表配置
};
</script>

开发指南

环境要求

• Node.js >= 16
• pnpm >= 7

安装依赖

pnpm install

开发

# 启动开发服务器
pnpm dev

# 启动文档服务器
pnpm docs:dev

构建

# 构建组件库
pnpm build

# 构建文档
pnpm docs:build

发布

# 登录 npm
npm login

# 发布包
npm publish

组件开发规范

1. 每个组件应该放在 packages 目录下的独立文件夹中
2. 组件文件夹结构：

   ComponentName/
   ├── index.vue      # 组件主文件
   ├── index.ts       # 组件导出文件
   ├── style.scss     # 组件样式
   ├── components     # 组件自己的使用的子组件
   └── mock.ts        # 组件示例数据

3. 使用 TypeScript 编写组件
4. 使用 SASS 编写样式
5. 提供必要的文档和示例