VChart

VChart，不只是开箱即用的多端图表库，更是生动灵活的数据故事讲述者。

简介 • Demo • 教程 • API• 跨端

English | 简体中文 | 日本語

（演示视频）

简介

VChart 是 VisActor 可视化体系中的图表组件库，基于可视化语法库VGrammar 进行图表逻辑封装，基于可视化渲染引擎 VRender 进行组件封装。核心能力如下：

1. 一码多端：自动适配桌面、H5、多个小程序环境
2. 面向叙事：综合应用标注、动画、流程控制、叙事模板等一系列增强功能进行叙事可视化创作。
3. 场景沉淀：面向最终用户沉淀可视化能力，解放开发者生产力

仓库简介

本仓库包含如下包：

1. vchart：核心包，VChart 图表
2. react-vchart：基于 React 封装的 VChart 图表组件
3. taro-vchart：基于 Taro 封装的 VChart 图表组件
4. lark-vchart：基于 飞书小程序 封装的 VChart 图表组件
5. block-vchart：基于 飞书小组件 封装的 VChart 图表组件
6. wx-vchart：基于 微信小程序 封装的 VChart 图表组件
7. docs: VChart 站点源码，同时也包含站点所有的中英文文档、图表示例代码等内容。

🔨 使用

📦 安装

# npm
$ npm install @visactor/vchart

# yarn
$ yarn add @visactor/vchart

📊 一个简单的图表

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，比如 

</chart>
const vchart = new VChart(spec, { dom: 'chart' });
vchart.renderAsync();

⌨️ 开发

首先，全局安装 @microsoft/rush

$ npm i --global @microsoft/rush

接着将代码 clone 至本地：

# clone
$ git clone git@github.com:VisActor/VChart.git
$ cd VChart
# 安装依赖
$ rush update
# 开始 vchart 的本地开发
$ rush start
# 开始 react-vchart 的本地开发
$ rush react
# 开始站点的本地开发
$ rush docs

📖 Documents

After installation & clone & update, run docs to preview VTable documents locally.

# start vtable document server. execute in file path: ./
$ rush update
$ rush build
$ rush docs

如果有依赖问题

$ rush purge
$ rush update

🔗 相关链接

• 主页
• VCharts 图表示例
• VChart 图表教程
• VChart 图表配置项
• VChart API
• VGrammar
• VRender
• FAQ
• CodeSandbox 模板 用于 bug 的提交

💫 生态

💖 Thanks

感谢 semi 提供主题可视化定制解决方案

🤝 参与贡献

如想参与贡献，请先阅读行为准则 和贡献指南。

细流成河，终成大海！