介绍
推荐一个超强魅力的开源可视化库：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 install @visactor/vchart
# 使用 yarn 安装
yarn add @visactor/vchart
或者
<script src="https://unpkg.com/@visactor/vchart/build/index.min.js"></script>
- 使用
import VChart from '@visactor/vchart';
3. 绘制一个简单的图表：
<body>
<!-- 为 vchart 准备一个具备大小（宽高）的 DOM，当然你也可以在 spec 配置中指定 -->
<div id="chart" style="width: 600px;height:400px;"></div>
</body>
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…
谢谢！同学的观看。点赞，留言，咱们下期再见。
