mirror of
https://github.com/VisActor/VChart
synced 2024-11-21 07:35:35 +00:00
523a8c1afa
I created Japanese translated documents.
6.5 KiB
6.5 KiB
VChart
(演示视频)
简介
VChart 是 VisActor 可视化体系中的图表组件库,基于可视化语法库VGrammar 进行图表逻辑封装,基于可视化渲染引擎 VRender 进行组件封装。核心能力如下:
- 一码多端:自动适配桌面、H5、多个小程序环境
- 面向叙事:综合应用标注、动画、流程控制、叙事模板等一系列增强功能进行叙事可视化创作。
- 场景沉淀:面向最终用户沉淀可视化能力,解放开发者生产力
仓库简介
本仓库包含如下包:
vchart
:核心包,VChart 图表react-vchart
:基于 React 封装的 VChart 图表组件taro-vchart
:基于 Taro 封装的 VChart 图表组件lark-vchart
:基于 飞书小程序 封装的 VChart 图表组件tt-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 git@github.com:VisActor/VChart.git
$ cd VChart
# 安装依赖
$ rush update
# 开始 vchart 的本地开发
$ rush start
# 开始 react-vchart 的本地开发
$ rush react
# 开始站点的本地开发
$ rush docs
📖 Documents
安装并且更新依赖后,可以执行 docs 命令,开启 vchart 的本地文档预览
# start vchart document server
$ rush docs
🔗 相关链接
💫 生态
项目 | 介绍 |
---|---|
React-VChart | React for @VisActor/VChart |
🤝 参与贡献
细流成河,终成大海!