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...

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

相关推荐
满分观察网友z5 分钟前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
满分观察网友z8 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
西西木科技丨Shopify开发机构13 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙20 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1121 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆25 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er30 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0633 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444036 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆36 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js