网站首页 > 技术文章正文

VChart 可视化图表组件库

yimeika 2025-06-20 22:16:20 技术文章 7 ℃

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>

上一篇： Fusioncharts教程之图表组件导出图片和PDF文件
下一篇：可视化:前端数据可视化插件大盘点图表/图谱/地图/关系图

网站首页 > 技术文章 正文