VisActor/VChart

VisActor/VChart has 1,855 GitHub stars and 222 forks. GitHot measured 0 stars in 24 hours. Last checked 2026-11-08 01:11 UTC. Last push 2026-11-02.

这些数字如何统计

VChart, more than just a cross-platform charting library, but also an expressive data storyteller.

1,855 星标 222 forks

实测星标增长

24小时: 0
7天: 更新延迟
15天: 更新延迟
1个月: 更新延迟

各周期内的星标净变化，周期相互重叠，并非每日新增。缺失的测量保持空白。星标代表关注度，不代表软件质量。

README.zh-CN.md

原文

VChart

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

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

English | 简体中文 | 日本語

（演示视频）

简介

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

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

仓库简介

本仓库包含如下包：

vchart：核心包，VChart 图表
react-vchart：基于 React 封装的 VChart 图表组件
taro-vchart：基于 Taro 封装的 VChart 图表组件
lark-vchart：基于飞书小程序封装的 VChart 图表组件
block-vchart：基于飞书小组件封装的 VChart 图表组件
wx-vchart：基于微信小程序封装的 VChart 图表组件
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，比如 <div id="chart"></chart>
const vchart = new VChart(spec, { dom: 'chart' });
vchart.renderAsync();

⌨️ 开发

首先，全局安装 @microsoft/rush

$ npm i --global @microsoft/rush

接着将代码 clone 至本地：

# clone
$ git clone [email protected]: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

🔗 相关链接

💫 生态

项目	介绍
React-VChart	适用于 @VisActor/VChart 的 React 组件
OpenInula-VChart	OpenInula 的 VChart 组件
OMI	Web 组件框架
基于 vchart 和 Next.js 构建的 Vercel 模板	一个使用 vchart 和 Next.js 构建的现代仪表盘模板，拥有美观的用户界面和丰富的数据可视化组件。