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为例,其他两个方案也是一样的。

  1. 安装
npm包 复制代码
# 使用 npm 安装
npm install @visactor/vchart

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

或者

cdn安装 复制代码
<script src="https://unpkg.com/@visactor/vchart/build/index.min.js"></script>
  1. 使用
javascript 复制代码
import VChart from '@visactor/vchart';
  1. 绘制一个简单的图表:
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...

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

相关推荐
万少几秒前
最新 HarmonyOS API 20 知识库 重磅推出
前端
蓝易云7 分钟前
CentOS 7上安装X virtual framebuffer (Xvfb) 的步骤以及如何解决无X服务器的问题
前端·后端·centos
到底起什么网名才能不重名8 分钟前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html
然我8 分钟前
面试必问:JS 事件机制从绑定到委托,一篇吃透所有考点
前端·javascript·面试
小蜜蜂嗡嗡17 分钟前
flutter封装vlcplayer的控制器
前端·javascript·flutter
一tiao咸鱼20 分钟前
如何简单使用 prompt
前端·aigc
cdbqss125 分钟前
VB.net编写的身份证类
前端·.net
骑自行车的码农42 分钟前
React短文系列 遍历fiber树 App的创建
前端·react.js
AskSky1 小时前
为了搞一个完美的健身APP,我真是费尽心机
前端
斯~内克1 小时前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf