VChart
VChart，不只是开箱即用的多端图表库，更是生动灵活的数据故事讲述者。
简介 •
Demo •
教程 •
API•
跨端
[](https://www.npmjs.com/package/@visactor/vchart)
[](https://www.npmjs.com/package/@visactor/vchart)
[](https://github.com/VisActor/VChart/blob/main/CONTRIBUTING.md#your-first-pull-request)
 [](https://github.com/visactor/vchart/blob/main/LICENSE)
[English](./README.md) | 简体中文 | [日本語](./README.ja-JP.md)
（演示视频）
## 简介
VChart 是 VisActor 可视化体系中的图表组件库，基于可视化语法库[VGrammar](https://github.com/VisActor/VGrammar) 进行图表逻辑封装，基于可视化渲染引擎 [VRender](https://github.com/VisActor/VRender) 进行组件封装。核心能力如下：
1. **一码多端**：自动适配桌面、H5、多个小程序环境
2. **面向叙事**：综合应用标注、动画、流程控制、叙事模板等一系列增强功能进行叙事可视化创作。
3. **场景沉淀**：面向最终用户沉淀可视化能力，解放开发者生产力
## 仓库简介
本仓库包含如下包：
1. [`vchart`](./packages/vchart/)：核心包，VChart 图表
2. [`react-vchart`](./packages/react-vchart/)：基于 [React](https://react.dev/) 封装的 VChart 图表组件
3. [`taro-vchart`](./packages/taro-vchart/)：基于 [Taro](https://docs.taro.zone/docs/) 封装的 VChart 图表组件
4. [`lark-vchart`](./packages/lark-vchart/)：基于 [飞书小程序](https://open.feishu.cn/document/client-docs/gadget/introduction/host-environment) 封装的 VChart 图表组件
5. [`tt-vchart`](./packages/lark-vchart/): 基于 [抖音小程序](https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/introduction/overview/) 封装的 VChart 图表组件
6. [`block-vchart`](./packages/block-vchart/)：基于 [飞书小组件](https://open.feishu.cn/document/client-docs/block/block-introduction) 封装的 VChart 图表组件
7. [`wx-vchart`](./packages/wx-vchart/)：基于 [微信小程序](https://developers.weixin.qq.com/miniprogram/dev/framework/) 封装的 VChart 图表组件
8. [`docs`](./docs/): VChart 站点源码，同时也包含站点所有的中英文文档、图表示例代码等内容。
## 🔨 使用
### 📦 安装
```bash
# npm
$ npm install @visactor/vchart
# yarn
$ yarn add @visactor/vchart
```
### 📊 一个简单的图表
```typescript
import VChart from '@visactor/vchart';
const spec = {
type: 'bar',
data: [
{
id: 'barData',
values: [
{ month: 'Monday', sales: 22 },
{ month: 'Tuesday', sales: 13 },
{ month: 'Wednesday', sales: 25 },
{ month: 'Thursday', sales: 29 },
{ month: 'Friday', sales: 38 }
]
}
],
xField: 'month',
yField: 'sales',
crosshair: {
xField: { visible: true }
}
};
// 'chart' 是图表 dom 容器的 id，比如
const vchart = new VChart(spec, { dom: 'chart' });
vchart.renderAsync();
```
## ⌨️ 开发
首先，全局安装 [@microsoft/rush](https://rushjs.io/pages/intro/get_started/)
```bash
$ npm i --global @microsoft/rush
```
接着将代码 clone 至本地：
```bash
# clone
$ git clone git@github.com:VisActor/VChart.git
$ cd VChart
# 安装依赖
$ rush update
# 开始 vchart 的本地开发
$ rush start
# 开始 react-vchart 的本地开发
$ rush react
# 开始站点的本地开发
$ rush docs
```
## 📖 Documents
安装并且更新依赖后，可以执行 docs 命令，开启 vchart 的本地文档预览
```bash
# start vchart document server
$ rush docs
```
## 🔗 相关链接
- [主页](https://www.visactor.io/vchart)
- [VCharts 图表示例](https://www.visactor.io/vchart/example)
- [VChart 图表教程](https://www.visactor.io/vchart/guide/tutorial_docs/VChart_Website_Guide)
- [VChart 图表配置项](https://www.visactor.io/vchart/option/)
- [VChart API](https://www.visactor.io/vchart/api/API/vchart)
- [VGrammar](https://www.visactor.io/vgrammar)
- [VRender](https://www.visactor.io/vrender)
- [FAQ](https://www.visactor.io/vchart/guide/tutorial_docs/FAQ)
- [CodeSandbox 模板](https://codesandbox.io/s/the-template-of-visactor-vchart-vl84ww?file=/src/index.ts) 用于 bug 的提交
## 💫 生态
| 项目 | 介绍 |
| ------------------------------------------------------------------------------------- | -------------------------- |
| [React-VChart](https://github.com/VisActor/VChart/tree/develop/packages/react-vchart) | React for @VisActor/VChart |
## 🤝 参与贡献 [](https://github.com/VisActor/VChart/blob/main/CONTRIBUTING.md#your-first-pull-request)
如想参与贡献，请先阅读[行为准则](./CODE_OF_CONDUCT.md) 和[贡献指南](./CONTRIBUTING.zh-CN.md)。
细流成河，终成大海！
