English · 中文 · 📖 在线文档

• 💘 开源不易，去 Github给个Star 吧！

VISLite

🚀 一款轻量、优雅的跨端数据可视化解决方案

VISLite 是一个使用 TypeScript 构建的高性能可视化库。官网地址：https://oi-contrib.github.io/VISLite

它提供了统一的跨端画布绘制与计算能力，让开发者只需关注业务逻辑，即可轻松实现 Web、uni-app、微信小程序、支付宝小程序等多平台的可视化应用。除初始化配置存在细微平台差异外，核心业务代码完全通用。

简介

🎯 轻量级数据可视化开发库 —— 助你更快速、简洁、高效地构建可视化产品。

本项目已在开源中国中开源，欢迎关注和留言。

快速开始

📦 安装

npm install --save vislite

🖼️ 准备画布

<div id="root" style="width:500px;height:300px;"></div>

🎨 开始绘制

获取画笔即可绘制你需要的任意内容。例如，获取 Canvas 画笔绘制一个红色圆：

import { Canvas } from 'vislite';

var painter = new Canvas(document.getElementById('root'));

painter.config({
    fillStyle: "red"
}).fillCircle(200, 150, 100);

更复杂的图表？我们提供了丰富的辅助 API。以树布局为例，只需简单几步即可绘制树图：

import { Canvas, TreeLayout } from 'vislite';

var painter = new Canvas(document.getElementById('root'));
var treeLayout = new TreeLayout();

treeLayout.setOption({
    type: "rect",
    direction: "TB",
    x: 250,
    y: 20,
    width: 500,
    height: 260
});

var data = {
    "name": "前端",
    "children": [{
        "name": "基础",
        "children": [{
            "name": "HTML"
        }, {
            "name": "CSS"
        }, {
            "name": "JavaScript"
        }, {
            "name": "DOM"
        }]
    }, {
        "name": "框架"
    }, {
        "name": "小技术"
    }]
};

var tree = treeLayout.use(data);

// 绘制连线
painter.config({
    strokeStyle: 'red'
});
for (var key in tree.node) {
    var pid = tree.node[key].pid;

    if (pid) {
        var dist = (tree.node[key].top - tree.node[pid].top) * 0.5;

        painter
            .beginPath()
            .moveTo(tree.node[key].left, tree.node[key].top)
            .bezierCurveTo(
                tree.node[key].left, tree.node[key].top - dist,
                tree.node[pid].left, tree.node[pid].top + dist,
                tree.node[pid].left, tree.node[pid].top
            ).stroke();
    }
}

// 绘制节点和文字
painter.config({
    strokeStyle: 'red',
    fontSize: 12
});
for (var key in tree.node) {
    painter.config({
        fillStyle: "white"
    }).fullCircle(tree.node[key].left, tree.node[key].top, 10);

    painter.config({
        fillStyle: "black"
    }).fillText(key, tree.node[key].left + 15, tree.node[key].top);
}

树布局的详细用法，请参阅：《教程 / 树布局》

核心功能

🧮 可视化算法库

我们封装了可视化开发中常用的算法，助你轻松绘制复杂图表。通过简单的配置，即可将任意格式的数据转换为带坐标的绘制数据：

示例运行地址：从左到右树状图

除树布局外，还提供：刻度尺算法、等角斜方位投影、墨卡托投影、插值函数、变换矩阵等。

🖌️ 增强型画笔

画笔经过精心设计，使用更简单、功能更强大。以 Canvas 为例，抽象出「区域」概念，无论图形多么不规则，都能轻松实现交互：

示例运行地址：中国地图

画笔不仅为交互而设计区域，还对原生 API 进行了优雅封装，接口更友好直观（如 WebGL 让3D开发零门槛，SVG 无需记忆晦涩属性）。同时自动抹平浏览器兼容性差异。

📱 跨端支持

除 Web 端外，还支持 uni-app、微信小程序、支付宝小程序等多端，API 统一，极大提升代码复用率：

示例运行地址：金额波浪球

目前 Canvas 已支持：Web、原生微信小程序、原生支付宝小程序、uni-app（编译为 H5、微信小程序、支付宝小程序等）。后续将持续扩展更多端和画笔类型。

核心优势

• 灵活的引入方式：支持 npm 安装后的 ES Module / CommonJS 引入，以及 script 标签 CDN 方式
• 按需加载：源码 TS 引入、按需 JS 引入或全量引入，多种模式按需选择
• 简洁与强大并存：提供可视化基础组件可自由组合，同时也支持常见场景的封装方案
• 稳定可靠：同一大版本完全向下兼容（alpha、beta 版本除外），始终保持最新版本为最优选择

版本规范：alpha（开发版）→ beta（测试版）→ rc（候选版）→ next（预发布版）→ 正式版

需求反馈

我们致力于不断完善可视化功能，期待你的宝贵建议！欢迎通过 留言 与我们交流。

所有建议将在一周内得到回复。

更新日志

详见正式版更新日志，每次正式版本发布后更新。

Roadmap

近期工作重点：

• 提供常用坐标系和布局组件，加速开发
• 持续优化文档（提升可读性、丰富示例、完善教程）

有想要的功能？告诉我们，我们会优先考虑！

贡献指南

欢迎通过以下方式参与项目：

• 代码维护：处理新功能开发与 Bug 修复
• 文档完善：接口文档和教程的编写与优化
• 测试用例：补充 test 目录下的测试用例和 docs 目录下的示例
• 方向讨论：参与项目未来发展的讨论

有意加入？请通过 issue 联系我们，请简要说明情况，我们会尽快回复。

详见 VISLite 贡献指南 和 AUTHORS.txt

示例项目

基于 VISLite 及相关插件（如 @vislite/canvas、@vislite/chart）开发的示例：

更多示例请访问：VISLite 示例项目

版权

MIT License

Copyright (c) zxl20070701 走一步，再走一步