VISLite 是灵活、快速、简单的数据可视化交互式跨端前端库。
这是一个轻量级的数据可视化资源库，目标是：帮助你更快速、简单、高效的开发出任意的可视化业务产品。
如何使用？
首先，需要进行安装：
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); }
关于树布局更具体的使用细节，你可以访问： 《教程 / 树布局》 一节。
常用的算法
我们通过提供可视化常用的算法来帮助你绘制复杂图表。比如下面的树图，通过简单的配置就可以把任意格式的数据变成任意绘制的带坐标的数据：
上述例子的运行地址： 从左到右树状图 。
除了 树布局 外，我们还提供了： 刻度尺算法 来帮助你计算刻度应该如何确定、 等角斜方位投影 和 墨卡托投影 来绘制地图、 Cardinal插值函数 来完成折线变光滑的曲线、 变换矩阵 提供各种坐标变换等。
画笔加强
我们对画笔进行了加强，使得其更简单好用。比如canvas、webgl，抽象出区域的概念，使得无论你绘制的图形多么的不规则，都可以很轻松的实现交互功能：
上述例子的运行地址： 中国地图 。
画笔除了像上面那样为了方便交互而补充区域的设计外，还对原来的API进行了一次抽象，使得API更友好简单 （比如WebGL，即使不会3D的人也可以轻松使用，而SVG的使用，你无需去记忆那些晦涩难懂的属性） ，同时，我们还抹平了不同版本浏览器等之间的差异。
数据驱动的3D
通过一个简单立方体JSON表达立方体意图，从而快速实现3D图表开发：
上述例子的运行地址：环图。
立方体运算
借助我们提供的立方体运算就可以快速获得常见的立方体的立方体JSON数据：
上述例子的运行地址：水分子式H2O。
支持跨端开发
除了Web端外，我们还针对uni-app、微信小程序等端进行了支持，并且不同端API保持一致，大大提高了代码的复用性：
上述例子的运行地址： 金额波浪球 。
基于实际需要，我们目前对 Canvas 提供了跨端支持，除 Web端 外，还支持 原生微信小程序 和 uni-app端 （编译成H5、微信小程序、支付宝小程序等） ，如果后续有必要，我们会对Canvas支持的端或SVG、WebGL等画笔进行更多端扩展。
你可以查看VISLite 贡献指南文件了解更多细节，查看AUTHORS.txt了解所有的贡献者。
相关项目
| Project | Status | Download | Description |
|---|---|---|---|
| PointIn |  |
 |
计算点是否存在于几何体等中（纯粹的数值计算库） |
| Snipio.js |  |
 |
支持截图、编辑和保存到本地功能，且可扩展 |
| H5Charts |  |
 |
一个基于 JavaScript 的开源可视化图表库 |
此外，我们还基于此项目维护了一个用例项目dataGUI，比如：
水分子式 H2O
手式解锁
3D环图
径向树状图
桑基图
可缩放折线图
从上到下树状图
可视化大屏
更多内容，你可以直接访问： https://oi-contrib.github.io/h5box/dataGUI/index.html
评论