vchart-development-assistant
visactor/vchart · skills.sh
Open source Repository Open in the app JSON README (API)
About
Skill publicada por visactor/vchart no skills.sh. Instale com: npx skills add visactor/vchart@vchart-development-assistant
Details
- Kind
- Agent skills
- Publisher
- visactor
- Origin
- skillssh
- Category
- ferramentas
- Stars
- 1,844
- Forks
- 220
- Open pull requests
- 9
- Last push
- 2026-09-28T08:11:07Z
- Repository state
- ativo
- Language
- TypeScript
- License
- MIT
- Added
- 2026-10-07 05:20:02
- Updated
- 2026-10-07 05:20:02
- Origin id
visactor/vchart/vchart-development-assistant
README
<div align="center">
<a href="https://github.com/VisActor#gh-light-mode-only" target="_blank">
<img alt="VisActor Logo" width="200" src="https://github.com/VisActor/.github/blob/main/profile/logo_500_200_light.svg"/>
</a>
<a href="https://github.com/VisActor#gh-dark-mode-only" target="_blank">
<img alt="VisActor Logo" width="200" src="https://github.com/VisActor/.github/blob/main/profile/logo_500_200_dark.svg"/>
</a>
</div>
<div align="center">
<h1>VChart</h1>
</div>
<div align="center">
VChart, more than just a cross-platform charting library, but also an expressive data storyteller.
<p align="center">
<a href="https://www.visactor.io/vchart">Introduction</a> •
<a href="https://www.visactor.io/vchart/example">Demo</a> •
<a href="https://www.visactor.io/vchart/guide/tutorial_docs/VChart_Website_Guide">Tutorial</a> •
<a href="https://www.visactor.io/vchart/option/barChart">API</a>•
<a href="https://www.visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/node">Cross-Platform</a>
</p>
[](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)
</div>
<div align="center">
English | [简体中文](https://github.com/visactor/vchart/blob/HEAD/README.zh-CN.md) | [日本語](https://github.com/visactor/vchart/blob/HEAD/README.ja-JP.md)
</div>
<div align="center">
（video）
</div>
## Introduction
VChart is a charting component library in VisActor visualization system. It wraps the charting logic based on visual grammar library [VGrammar](https://github.com/VisActor/VGrammar) and the component encapsulation based on visual rendering engine [VRender](https://github.com/VisActor/VRender). The core capabilities are as follows:
1. **Cross-platform**: Automatically adapt to desktop, H5, and multiple small program environments
2. **Storytelling**: Comprehensive annotation, animation, flow control, narrative templates, and other enhanced features for visual storytelling
3. **Scenes**: Deliver visual storytelling capabilities to end-users, unlock developer productivity
### Repository Introduction
This repository includes the following packages:
1. [`vchart`](https://github.com/visactor/vchart/blob/HEAD/packages/vchart/): The core code repository of VChart
2. [`react-vchart`](https://github.com/visactor/vchart/blob/HEAD/packages/react-vchart/): The VChart component encapsulated based on [React](https://react.dev/)
3. [`taro-vchart`](https://github.com/visactor/vchart/blob/HEAD/packages/taro-vchart/): The VChart component encapsulated based on [Taro](https://docs.taro.zone/docs/)
4. [`lark-vchart`](https://github.com/visactor/vchart/blob/HEAD/packages/lark-vchart/): The VChart component encapsulated based on [Lark miniAPP](https://open.feishu.cn/document/client-docs/gadget/introduction/host-environment)
5. [`block-vchart`](https://github.com/visactor/vchart/blob/HEAD/packages/block-vchart/): The VChart component encapsulated based on [Lark Block](https://open.feishu.cn/document/client-docs/block/block-introduction)
6. [`wx-vchart`](https://github.com/visactor/vchart/blob/HEAD/packages/wx-vchart/)：The VChart component encapsulated based on [Wx miniAPP](https://developers.weixin.qq.com/miniprogram/dev/framework/)
7. [`docs`](https://github.com/visactor/vchart/blob/HEAD/docs/): VChart site source code, and also contains all Chinese and English documents, chart sample codes, etc. of the site.
## 🔨 Usage
### 📦 Installation
```bash
# npm
$ npm install @visactor/vchart
# yarn
$ yarn add @visactor/vchart
```
### 📊 A Chart Example
<img src="https://user-images.githubusercontent.com/135952300/246996854-95cf0db3-42a2-41f9-8f15-8b7bbec1794c.png" style="width: 500px">
```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' is the id of your dom container, such as <div id="chart"></chart>
const vchart = new VChart(spec, { dom: 'chart' });
vchart.renderAsync();
```
## ⌨️ Development
First of all, please install [@microsoft/rush](https://rushjs.io/pages/intro/get_started/)
```bash
$ npm i --global @microsoft/rush
```
Then clone locally:
```bash
# clone
$ git clone git@github.com:VisActor/VChart.git
$ cd VChart
# install dependencies
$ rush update
# start vchart development server
$ rush start
# start react-vchart development server
$ rush react
# start site development server
$ rush docs
```
# 📖 Documents
After installation & clone & update, run docs to preview VTable documents locally.
```bash
# start vtable document server. execute in file path: ./
$ rush update
$ rush build
$ rush docs
```
# If you meet dependency problems
```bash
$ rush purge
$ rush update
```
## 🔗 Related Links
- [Homepage](https://www.visactor.io/vchart)
- [VCharts Gallery](https://www.visactor.io/vchart/example)
- [VChart Tutorials](https://www.visactor.io/vchart/guide/tutorial_docs/VChart_Website_Guide)
- [VChart Options](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/faq/)
- [CodeSandbox Template](https://codesandbox.io/s/the-template-of-visactor-vchart-vl84ww?file=/src/index.ts) for bug reports
## 💫 Ecosystem
| Project | Description |
| ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| [React-VChart](https://github.com/VisActor/VChart/tree/develop/packages/react-vchart) | React interface for @VisActor/VChart |
| [OpenInula-VChart](https://www.visactor.io/vchart/example-openinula) | OpenInula VChart Components |
| [OMI](https://omi.cdn-go.cn/home/latest) | Web Components Framework |
| [A vercel template built with vchart and Next.js](https://vercel.com/templates/next.js/visactor-nextjs-template) | A modern dashboard template built with vchart and Next.js, featuring a beautiful UI and rich data visualization components. |
## Star History
<a href="https://gitdata.xuanhun520.com/#visactor/vchart&Date">
<picture >
<img style="width: 800px; height: 533px;" alt="Star History Chart" src="https://gitdata.xuanhun520.com/api/starimg?repos=visactor/vchart&type=Date&theme=dark" />
</picture>
</a>
## 💖 Thanks
<div>
<a href="https://semi.design/#gh-dark-mode-only" target="_blank">
<img alt="VisActor Logo" height="60" src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/visactor/semi-dark.svg"/>
</a>
<a href="https://semi.design/#gh-light-mode-only" target="_blank">
<img alt="VisActor Logo" height="60" src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/visactor/semi.svg"/>
</a>
</div>
Thanks to [Semi](https://semi.design/) for providing the theme visualization customization solution.
## 🤝 Contribution [](https://github.com/VisActor/VChart/blob/main/CONTRIBUTING.md#your-first-pull-request)
If you would like to contribute, please read the [Code of Conduct](https://github.com/visactor/vchart/blob/HEAD/CODE_OF_CONDUCT.md) and our [contributing guide](https://github.com/visactor/vchart/blob/HEAD/CONTRIBUTING.md) first。
Small streams converge to make great rivers and seas!
<a href="https://github.com/visactor/vchart/graphs/contributors"><img src="https://contrib.rocks/image?repo=visactor/vchart" /></a>