VChart

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

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

English | 简体中文

（演示视频）

简介

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

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

仓库简介

本仓库包含如下包：

vchart：核心包，VChart 图表
react-vchart：基于 React 封装的 VChart 图表组件
taro-vchart：基于 Taro 封装的 VChart 图表组件
lark-vchart：基于飞书小程序封装的 VChart 图表组件
tt-vchart: 基于抖音小程序封装的 VChart 图表组件
block-vchart：基于飞书小组件封装的 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 git@github.com:VisActor/VChart.git
$ cd VChart
# 安装依赖
$ rush update
# 开始 vchart 的本地开发
$ rush start
# 开始 react-vchart 的本地开发
$ rush react

🔗 相关链接

💫 生态

项目	介绍
智能生成组件	基于 AI 的智能图表生成组件

🤝 参与贡献

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

细流成河，终成大海！

5.1 KiB Raw Blame History Unescape Escape