VChart 可视化图表组件库_可视化图表前端框架
VChart 是 VisActor 可视化体系中的图表组件库，基于可视化语法库 VGrammar 进行图表逻辑封装，基于可视化渲染引擎 VRender 进行组件封装。
核心能力如下：
- 一码多端：自动适配桌面、H5、多个小程序环境
- 面向叙事：综合应用标注、动画、流程控制、叙事模板等一系列增强功能进行叙事可视化创作。
- 场景沉淀：面向最终用户沉淀可视化能力，解放开发者生产力
VChart，不只是开箱即用的多端图表库，更是生动灵活的数据故事讲述者。
VChart 在 VGrammar 的基础上，首先面向传统统计图表应用，基于已有的业务沉淀，覆盖常见的图表类型。经过字节跳动 500+ 项目沉淀。
覆盖常见统计图表类型。
同时，在叙事可视化方向，借助 VGrammar 强大而灵活的接口，持续完善各种叙事特性，添加各类叙事模板，匹配更多的叙事场景。
在数据标注，动画能力上重点发力。
快速上手
在本教程中，我们将介绍如何使用 VChart 绘制一个简单的柱状图。VChart 是一款简单易用、跨平台、高性能的前端可视化图表库。图表由数据、series 系列和组件三部分组成，我们将使用配置项来声明图表。
获取 VChart
你可以通过以下几种方式获取 VChart。
使用 NPM 包
首先，你需要在项目根目录下使用以下命令安装 VChart：
# 使用 npm 安装
npm install @visactor/vchart
# 使用 yarn 安装
yarn add @visactor/vchart
使用 CDN
你还可以通过 CDN 获取构建好的 VChart 文件。将以下代码添加到 HTML 文件的 <script> 标签中：
<script src="https://unpkg.com/@visactor/vchart/build/index.min.js"></script>
引入 VChart
通过 NPM 包引入
在 JavaScript 文件顶部使用 import 引入 VChart：
import VChart from '@visactor/vchart';
使用 script 标签引入
通过直接在 HTML 文件中添加 <script> 标签，引入构建好的 vchart 文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入 vchart 文件 -->
<script src="https://unpkg.com/@visactor/vchart/build/index.min.js"></script>
</head>
</html>