1.4K+ star！字节Visactor开源数据可视化解决方案

介绍

推荐一个超强魅力的开源可视化库：Visactor

字节跳动Visactor团队推出的开源可视化方案，包含：

Vtable 可视化表格

VCahrt 可视化图表

VMind 智能可视化组件

核心优势

基于可视化引擎VRender构建的全场景解决方案。

跨端能力：支持Canvas/SVG双渲染模式
丰富图表：内置20+基础图表和10+高阶图表类型
灵活扩展：通过VGrammar实现自定义可视化语法
极致性能：WebGL加速渲染，轻松应对百万级数据
跨端王者：自适应PC、移动端、小程序端

功能特性

丰富的图表类型：内置20 + 基础图表和10 + 高阶图表类型，能满足各种复杂的数据可视化需求。
自定义可视化语法：通过VGrammar实现自定义可视化语法，开发者可以根据需求创建独特的可视化效果，扩展性强。
跨端能力：支持Web、小程序、SSR等多端场景，方便开发者在不同平台上使用。

竞品对比

特性	VisActor	ECharts	AntV系列
渲染引擎	VRender (Canvas/SVG)	ZRender	G (统一图形引擎)
模块化	高度解耦	一体化	家族式产品
语法扩展	VGrammar语法扩展	插件系统	注册机制
事件系统	细粒度事件代理	组件事件	数据驱动事件
状态管理	内置状态机	配置驱动	数据映射
动画控制	多轨道动画	单时间轴	属性动画
主题定制	动态主题切换	静态主题	数据驱动主题
插件系统	模块化插件	扩展插件	注册机制
社区支持	快速成长	成熟稳定	蚂蚁生态

快速安装

这里以VChart为例，其他两个方案也是一样的。

安装

npm包复制代码

# 使用 npm 安装
npm install @visactor/vchart

# 使用 yarn 安装
yarn add @visactor/vchart

或者

cdn安装复制代码

<script src="https://unpkg.com/@visactor/vchart/build/index.min.js"></script>

使用

javascript 复制代码

import VChart from '@visactor/vchart';

绘制一个简单的图表：

html 复制代码

<body>
  <!-- 为 vchart 准备一个具备大小（宽高）的 DOM，当然你也可以在 spec 配置中指定 -->
  <div id="chart" style="width: 600px;height:400px;"></div>
</body>

js 复制代码

const spec = {
  data: [
    {
      id: 'barData',
      values: [
        { month: 'Monday', sales: 22 },
        { month: 'Tuesday', sales: 13 },
        { month: 'Wednesday', sales: 25 },
        { month: 'Thursday', sales: 29 },
        { month: 'Friday', sales: 38 }
      ]
    }
  ],
  type: 'bar',
  xField: 'month',
  yField: 'sales'
};

// 创建 vchart 实例

/**
 * 说明：cdn 方式引入的时候，VChart 的引用方式需要注意：
 * const vchart = new VChart.default(spec, { dom: 'chart' });
 */
const vchart = new VChart(spec, { dom: 'chart' });
// 绘制
vchart.renderSync();

就可以看到图表结果了：

最后

visactor官网：visactor.com/

基于visactor的低代码可视化系统（码云）：gitee.com/yhm_my/goda...

谢谢！同学的观看。点赞，留言，咱们下期再见。