vislite-lib

name	vislite-lib
description	VISLite数据可视化库开发助手。当用户需要创建Canvas/SVG/WebGL图表、实现树布局/饼图/柱状图布局、使用坐标投影（墨卡托/等角斜方位）、矩阵变换、插值函数等可视化算法时使用。

VISLite 数据可视化库

VISLite 是一款轻量、优雅的跨端数据可视化解决方案，支持 Web、uni-app、微信小程序、支付宝小程序等多平台。

官网: https://oi-contrib.github.io/VISLite

GitHub: https://github.com/oi-contrib/VISLite

安装

npm install --save vislite

模块索引

画笔 (Brushes)

跨平台 Canvas（H5 / 微信 / 支付宝 / uni-app）

• Canvas.md - 统一 API，初始化方式因平台而异
• minialipay/ui-canvas.md - 支付宝小程序 Canvas 组件
• miniprogram/ui-canvas.md - 微信小程序 Canvas 组件
• uniapp/ui-canvas.md - uni-app 跨平台使用指南

H5 专用画笔

• SVG.md - SVG 矢量图形绘制（仅 H5）
• WebGL.md - WebGL 3D 图形渲染（仅 H5）

布局算法 (Layouts)

• TreeLayout.md - 树状布局，支持 TB/LR/RL/BT 方向
• PieLayout.md - 饼图/环形图布局
• BarLayout.md - 柱状图/条形图布局

坐标投影 (Projections)

• Projections.md - Mercator 墨卡托投影、Eoap 等角斜方位投影、MapCoordinate 地图坐标系

变换与插值

• Matrix.md - 4x4 矩阵变换（平移/旋转/缩放）
• Interpolation.md - Cardinal/Hermite 三次插值函数

工具函数

• Utilities.md - ruler 刻度尺、animation 动画、getLoopColors 循环颜色、throttle 节流

画笔平台支持说明

画笔	H5	微信小程序	支付宝小程序	uni-app
Canvas	✅ new Canvas(el)	✅ 组件方式	✅ 组件方式	✅ 组件方式
SVG	✅ new SVG(el)	❌	❌	❌
WebGL	✅ getWebGLContext()	❌	❌	❌
RawCanvas	✅	✅	✅	✅

注意: SVG 和 WebGL 仅支持 H5 端。Canvas 在不同平台的 API 完全一致，但初始化方式不同：

• H5: new Canvas(domElement)
• 小程序: 通过 ui-canvas 组件的 fetch() 方法获取实例

快速使用

H5 端使用 Canvas

import { Canvas } from 'vislite';

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

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

// 设置区域用于交互
painter.setRegion('circle');
painter.bind('click', (regionName, x, y) => {
    console.log(regionName, x, y);
});

小程序端使用 Canvas

详见各小程序平台的文档：

• 微信小程序 Canvas
• 支付宝小程序 Canvas
• uni-app Canvas

树布局

import { Canvas, TreeLayout } from 'vislite';

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

var tree = treeLayout.use(data);

// 绘制连线
for (var key in tree.node) {
    var pid = tree.node[key].pid;
    if (pid) {
        painter.beginPath()
            .moveTo(tree.node[key].left, tree.node[key].top)
            .bezierCurveTo(...)
            .stroke();
    }
}

// 绘制节点
painter.fullCircle(tree.node[key].left, tree.node[key].top, 10);

核心导出

import {
    // 画笔
    Canvas,          // 跨平台（初始化方式不同）
    SVG,             // 仅 H5
    RawCanvas,       // 跨平台

    // 布局
    TreeLayout,
    PieLayout,
    BarLayout,

    // 投影
    Mercator,
    Eoap,
    MapCoordinate,

    // 变换
    Matrix4,
    rotate,
    move,
    scale,

    // 插值
    Cardinal,
    Hermite,

    // 工具
    ruler,
    animation,
    getLoopColors,
    throttle,
    assemble,

    // WebGL（仅 H5）
    getWebGLContext,
    Shader,
    Texture,
    Buffer
} from 'vislite';

典型场景

• 创建跨平台图表（柱状图、饼图、树图）
• 地图可视化（墨卡托/等角斜方位投影）
• 画布/SVG/WebGL 图形绑制
• 数据可视化算法应用
• 矩阵变换与插值计算
• 小程序/uni-app 多端开发