vislite 1.12.0-alpha.1 → 1.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AUTHORS.txt +6 -6
- package/CHANGELOG +402 -401
- package/LICENSE +20 -20
- package/README-en.md +245 -245
- package/README.md +245 -245
- package/bin/formatArgv.js +30 -30
- package/bin/help.js +17 -17
- package/bin/run +21 -21
- package/bin/skills.js +26 -26
- package/lib/BarLayout/index.es.js +348 -348
- package/lib/Buffer/index.es.js +34 -34
- package/lib/Canvas/index.es.js +804 -789
- package/lib/Canvas/index.es.min.js +1 -1
- package/lib/Cardinal/index.es.js +89 -89
- package/lib/Eoap/index.es.js +32 -32
- package/lib/Hermite/index.es.js +34 -34
- package/lib/MapCoordinate/index.es.js +199 -199
- package/lib/Matrix4/index.es.js +123 -123
- package/lib/Mercator/index.es.js +18 -18
- package/lib/PieLayout/index.es.js +115 -115
- package/lib/RawCanvas/index.es.js +736 -721
- package/lib/RawCanvas/index.es.min.js +1 -1
- package/lib/SVG/index.es.js +626 -626
- package/lib/Shader/index.es.js +34 -34
- package/lib/Texture/index.es.js +52 -52
- package/lib/TreeLayout/index.es.js +301 -301
- package/lib/animation/index.es.js +2 -2
- package/lib/assemble/index.es.js +19 -19
- package/lib/getLoopColors/index.es.js +34 -34
- package/lib/getWebGLContext/index.es.js +61 -61
- package/lib/index.umd.js +2797 -2782
- package/lib/index.umd.min.js +2 -2
- package/lib/initOption/index.es.js +5 -5
- package/lib/mergeOption/index.es.js +34 -34
- package/lib/move/index.es.js +6 -6
- package/lib/rotate/index.es.js +6 -6
- package/lib/ruler/index.es.js +136 -136
- package/lib/scale/index.es.js +5 -5
- package/minialipay/ui-canvas/drawImage.js +35 -35
- package/minialipay/ui-canvas/index.acss +4 -4
- package/minialipay/ui-canvas/index.axml +3 -3
- package/minialipay/ui-canvas/index.d.ts +1 -1
- package/minialipay/ui-canvas/index.js +100 -100
- package/minialipay/ui-canvas/index.json +6 -6
- package/miniprogram/ui-canvas/drawImage.js +35 -35
- package/miniprogram/ui-canvas/index.js +125 -125
- package/miniprogram/ui-canvas/index.json +4 -4
- package/miniprogram/ui-canvas/index.wxml +4 -4
- package/miniprogram/ui-canvas/index.wxss +5 -5
- package/package/BarLayout/index.ts +2 -2
- package/package/Buffer/index.ts +2 -2
- package/package/Canvas/index.ts +2 -2
- package/package/Cardinal/index.ts +2 -2
- package/package/Eoap/index.ts +2 -2
- package/package/Hermite/index.ts +2 -2
- package/package/MapCoordinate/index.ts +2 -2
- package/package/Matrix4/index.ts +2 -2
- package/package/Mercator/index.ts +2 -2
- package/package/PieLayout/index.ts +2 -2
- package/package/RawCanvas/index.ts +2 -2
- package/package/SVG/index.ts +2 -2
- package/package/Shader/index.ts +2 -2
- package/package/Texture/index.ts +2 -2
- package/package/TreeLayout/index.ts +2 -2
- package/package/animation/index.ts +5 -5
- package/package/assemble/index.ts +2 -2
- package/package/getLoopColors/index.ts +2 -2
- package/package/getWebGLContext/index.ts +40 -40
- package/package/index.ts +84 -84
- package/package/initOption/index.ts +2 -2
- package/package/mergeOption/index.ts +2 -2
- package/package/move/index.ts +2 -2
- package/package/rotate/index.ts +2 -2
- package/package/ruler/index.ts +2 -2
- package/package/scale/index.ts +2 -2
- package/package/throttle/index.ts +2 -2
- package/package.json +79 -79
- package/skills/vislite-lib/BarLayout.md +117 -117
- package/skills/vislite-lib/Canvas.md +183 -183
- package/skills/vislite-lib/Interpolation.md +129 -129
- package/skills/vislite-lib/Matrix.md +174 -174
- package/skills/vislite-lib/PieLayout.md +131 -131
- package/skills/vislite-lib/Projections.md +158 -158
- package/skills/vislite-lib/SKILL.md +179 -179
- package/skills/vislite-lib/SVG.md +137 -137
- package/skills/vislite-lib/TreeLayout.md +176 -176
- package/skills/vislite-lib/Utilities.md +261 -261
- package/skills/vislite-lib/WebGL.md +106 -106
- package/skills/vislite-lib/minialipay/ui-canvas.md +95 -95
- package/skills/vislite-lib/miniprogram/ui-canvas.md +98 -98
- package/skills/vislite-lib/uniapp/ui-canvas.md +113 -113
- package/src/Canvas.ts +89 -89
- package/src/Eoap.ts +66 -66
- package/src/Matrix4/index.ts +84 -84
- package/src/Matrix4/move.ts +12 -12
- package/src/Matrix4/rotate.ts +15 -15
- package/src/Matrix4/scale.ts +11 -11
- package/src/Matrix4/transform.ts +64 -64
- package/src/Mercator.ts +27 -27
- package/src/SVG.ts +86 -86
- package/src/common/assemble.ts +30 -30
- package/src/common/canvas/arc.ts +51 -51
- package/src/common/canvas/config.ts +176 -176
- package/src/common/canvas/default.ts +64 -64
- package/src/common/canvas/gradient.ts +31 -31
- package/src/common/canvas/index.ts +189 -189
- package/src/common/canvas/painter.ts +475 -454
- package/src/common/canvas/texts.ts +18 -18
- package/src/common/map/getBoundary.ts +15 -15
- package/src/common/map/tool.ts +29 -29
- package/src/common/option.ts +31 -31
- package/src/common/setStyle.ts +5 -5
- package/src/common/svg/config.ts +213 -213
- package/src/common/svg/default.ts +29 -29
- package/src/common/svg/gradient.ts +53 -53
- package/src/common/svg/index.ts +420 -420
- package/src/common/svg/tool.ts +51 -51
- package/src/common/tree/index.ts +25 -25
- package/src/common/tree/toInnerTree.ts +61 -61
- package/src/common/tree/toPlainTree.ts +135 -135
- package/src/common/type.ts +26 -26
- package/src/common/webgl/buffer.ts +79 -79
- package/src/common/webgl/getWebGLContext.ts +45 -45
- package/src/common/webgl/shader.ts +75 -75
- package/src/common/webgl/texture.ts +98 -98
- package/src/coordinate/MapCoordinate.ts +80 -80
- package/src/getLoopColors.ts +42 -42
- package/src/interpolation/Cardinal.ts +110 -110
- package/src/interpolation/Hermite.ts +65 -65
- package/src/layout/BarLayout.ts +249 -249
- package/src/layout/PieLayout.ts +146 -146
- package/src/layout/TreeLayout.ts +200 -200
- package/src/move.ts +7 -7
- package/src/rotate.ts +7 -7
- package/src/ruler.ts +209 -209
- package/src/scale.ts +6 -6
- package/types/Bar.d.ts +91 -91
- package/types/BarConfig.d.ts +4 -4
- package/types/BarLayout.d.ts +48 -48
- package/types/BarOption.d.ts +31 -31
- package/types/Buffer.d.ts +30 -30
- package/types/Canvas.d.ts +379 -379
- package/types/CanvasConfig.d.ts +61 -61
- package/types/CanvasOption.d.ts +13 -13
- package/types/CanvasOpts.d.ts +9 -9
- package/types/Cardinal.d.ts +20 -20
- package/types/Gradient.d.ts +20 -20
- package/types/Hermite.d.ts +25 -25
- package/types/Map.d.ts +9 -9
- package/types/MapConfig.d.ts +27 -27
- package/types/MapCoordinate.d.ts +22 -22
- package/types/Matrix4.d.ts +79 -79
- package/types/Pie.d.ts +73 -73
- package/types/PieConfig.d.ts +26 -26
- package/types/PieLayout.d.ts +40 -40
- package/types/PieOption.d.ts +21 -21
- package/types/SVG.d.ts +282 -282
- package/types/SVGConfig.d.ts +54 -54
- package/types/Shader.d.ts +22 -22
- package/types/Texture.d.ts +22 -22
- package/types/Tree.d.ts +74 -74
- package/types/TreeConfig.d.ts +52 -52
- package/types/TreeLayout.d.ts +71 -71
- package/types/TreeOption.d.ts +48 -48
- package/types/animation.d.ts +26 -26
- package/types/assemble.d.ts +14 -14
- package/types/getLoopColors.d.ts +13 -13
- package/types/getWebGLContext.d.ts +7 -7
- package/types/index.d.ts +220 -221
- package/types/module.d.ts +110 -110
- package/types/move.d.ts +15 -15
- package/types/option.d.ts +12 -12
- package/types/painterConfig.d.ts +14 -14
- package/types/rotate.d.ts +15 -15
- package/types/ruler.d.ts +24 -24
- package/types/scale.d.ts +15 -15
- package/types/throttle.d.ts +6 -6
- package/types/ui-canvas.d.ts +4 -4
- package/types/uni-canvas.d.ts +3 -3
- package/uni-app/drawImage.js +19 -19
- package/uni-app/ui-canvas.vue +295 -295
package/README.md
CHANGED
|
@@ -1,245 +1,245 @@
|
|
|
1
|
-
[English](./README-en.md) · **中文** · [📖 在线文档](https://oi-contrib.github.io/VISLite)
|
|
2
|
-
|
|
3
|
-
- 💘 开源不易,去 <i>[Github给个Star](https://github.com/oi-contrib/VISLite) </i>吧!
|
|
4
|
-
|
|
5
|
-
<img src='https://oi-contrib.github.io/VISLite/images/logo.png' height='300px'/>
|
|
6
|
-
|
|
7
|
-
<p>
|
|
8
|
-
<a href="https://zxl20070701.github.io/toolbox/#/npm-download?packages=vislite&interval=7">
|
|
9
|
-
<img src="https://img.shields.io/npm/dm/vislite.svg" alt="downloads">
|
|
10
|
-
</a>
|
|
11
|
-
<a href="https://www.npmjs.com/package/vislite">
|
|
12
|
-
<img src="https://img.shields.io/npm/v/vislite.svg" alt="npm">
|
|
13
|
-
</a>
|
|
14
|
-
<a href="https://www.jsdelivr.com/package/npm/vislite">
|
|
15
|
-
<img src="https://data.jsdelivr.com/v1/package/npm/vislite/badge" alt="cdn">
|
|
16
|
-
</a>
|
|
17
|
-
<a href="https://github.com/oi-contrib/VISLite/issues">
|
|
18
|
-
<img src="https://img.shields.io/github/issues/oi-contrib/VISLite" alt="issue">
|
|
19
|
-
</a>
|
|
20
|
-
<a href="https://github.com/oi-contrib/VISLite" target='_blank'>
|
|
21
|
-
<img alt="GitHub repo stars" src="https://img.shields.io/github/stars/oi-contrib/VISLite">
|
|
22
|
-
</a>
|
|
23
|
-
<a href="https://github.com/oi-contrib/VISLite">
|
|
24
|
-
<img src="https://img.shields.io/github/forks/oi-contrib/VISLite" alt="forks">
|
|
25
|
-
</a>
|
|
26
|
-
<a href="https://gitee.com/oi-contrib/VISLite" target='_blank'>
|
|
27
|
-
<img alt="Gitee repo stars" src="https://gitee.com/oi-contrib/VISLite/badge/star.svg">
|
|
28
|
-
</a>
|
|
29
|
-
<a href="https://gitee.com/oi-contrib/VISLite">
|
|
30
|
-
<img src="https://gitee.com/oi-contrib/VISLite/badge/fork.svg" alt="forks">
|
|
31
|
-
</a>
|
|
32
|
-
</p>
|
|
33
|
-
|
|
34
|
-
<img src="https://nodei.co/npm/vislite.png?downloads=true&downloadRank=true&stars=true" alt="NPM">
|
|
35
|
-
|
|
36
|
-
# VISLite
|
|
37
|
-
|
|
38
|
-
🚀 一款轻量、优雅的跨端数据可视化解决方案
|
|
39
|
-
|
|
40
|
-
`VISLite` 是一个使用 `TypeScript` 构建的高性能可视化库。官网地址:[https://oi-contrib.github.io/VISLite](https://oi-contrib.github.io/VISLite)
|
|
41
|
-
|
|
42
|
-
它提供了统一的跨端画布绘制与计算能力,让开发者只需关注业务逻辑,即可轻松实现 Web、uni-app、微信小程序、支付宝小程序等多平台的可视化应用。除初始化配置存在细微平台差异外,核心业务代码完全通用。
|
|
43
|
-
|
|
44
|
-
## 简介
|
|
45
|
-
|
|
46
|
-
🎯 轻量级数据可视化开发库 —— 助你更快速、简洁、高效地构建可视化产品。
|
|
47
|
-
|
|
48
|
-
> 本项目已在[开源中国](https://www.oschina.net/p/vislite)中开源,欢迎关注和留言。
|
|
49
|
-
|
|
50
|
-
## 快速开始
|
|
51
|
-
|
|
52
|
-
### 📦 安装
|
|
53
|
-
|
|
54
|
-
```bash
|
|
55
|
-
npm install --save vislite
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
### 🖼️ 准备画布
|
|
59
|
-
|
|
60
|
-
```html
|
|
61
|
-
<div id="root" style="width:500px;height:300px;"></div>
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
### 🎨 开始绘制
|
|
65
|
-
|
|
66
|
-
获取画笔即可绘制你需要的任意内容。例如,获取 Canvas 画笔绘制一个红色圆:
|
|
67
|
-
|
|
68
|
-
```js
|
|
69
|
-
import { Canvas } from 'vislite';
|
|
70
|
-
|
|
71
|
-
var painter = new Canvas(document.getElementById('root'));
|
|
72
|
-
|
|
73
|
-
painter.config({
|
|
74
|
-
fillStyle: "red"
|
|
75
|
-
}).fillCircle(200, 150, 100);
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
更复杂的图表?我们提供了丰富的辅助 API。以树布局为例,只需简单几步即可绘制树图:
|
|
79
|
-
|
|
80
|
-
<img src="https://oi-contrib.github.io/VISLite/images/docs/tree.png" width="500"/>
|
|
81
|
-
|
|
82
|
-
```js
|
|
83
|
-
import { Canvas, TreeLayout } from 'vislite';
|
|
84
|
-
|
|
85
|
-
var painter = new Canvas(document.getElementById('root'));
|
|
86
|
-
var treeLayout = new TreeLayout();
|
|
87
|
-
|
|
88
|
-
treeLayout.setOption({
|
|
89
|
-
type: "rect",
|
|
90
|
-
direction: "TB",
|
|
91
|
-
x: 250,
|
|
92
|
-
y: 20,
|
|
93
|
-
width: 500,
|
|
94
|
-
height: 260
|
|
95
|
-
});
|
|
96
|
-
|
|
97
|
-
var data = {
|
|
98
|
-
"name": "前端",
|
|
99
|
-
"children": [{
|
|
100
|
-
"name": "基础",
|
|
101
|
-
"children": [{
|
|
102
|
-
"name": "HTML"
|
|
103
|
-
}, {
|
|
104
|
-
"name": "CSS"
|
|
105
|
-
}, {
|
|
106
|
-
"name": "JavaScript"
|
|
107
|
-
}, {
|
|
108
|
-
"name": "DOM"
|
|
109
|
-
}]
|
|
110
|
-
}, {
|
|
111
|
-
"name": "框架"
|
|
112
|
-
}, {
|
|
113
|
-
"name": "小技术"
|
|
114
|
-
}]
|
|
115
|
-
};
|
|
116
|
-
|
|
117
|
-
var tree = treeLayout.use(data);
|
|
118
|
-
|
|
119
|
-
// 绘制连线
|
|
120
|
-
painter.config({
|
|
121
|
-
strokeStyle: 'red'
|
|
122
|
-
});
|
|
123
|
-
for (var key in tree.node) {
|
|
124
|
-
var pid = tree.node[key].pid;
|
|
125
|
-
|
|
126
|
-
if (pid) {
|
|
127
|
-
var dist = (tree.node[key].top - tree.node[pid].top) * 0.5;
|
|
128
|
-
|
|
129
|
-
painter
|
|
130
|
-
.beginPath()
|
|
131
|
-
.moveTo(tree.node[key].left, tree.node[key].top)
|
|
132
|
-
.bezierCurveTo(
|
|
133
|
-
tree.node[key].left, tree.node[key].top - dist,
|
|
134
|
-
tree.node[pid].left, tree.node[pid].top + dist,
|
|
135
|
-
tree.node[pid].left, tree.node[pid].top
|
|
136
|
-
).stroke();
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
// 绘制节点和文字
|
|
141
|
-
painter.config({
|
|
142
|
-
strokeStyle: 'red',
|
|
143
|
-
fontSize: 12
|
|
144
|
-
});
|
|
145
|
-
for (var key in tree.node) {
|
|
146
|
-
painter.config({
|
|
147
|
-
fillStyle: "white"
|
|
148
|
-
}).fullCircle(tree.node[key].left, tree.node[key].top, 10);
|
|
149
|
-
|
|
150
|
-
painter.config({
|
|
151
|
-
fillStyle: "black"
|
|
152
|
-
}).fillText(key, tree.node[key].left + 15, tree.node[key].top);
|
|
153
|
-
}
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
树布局的详细用法,请参阅:[《教程 / 树布局》](https://oi-contrib.github.io/VISLite/#/course/tree-layout)
|
|
157
|
-
|
|
158
|
-
## 核心功能
|
|
159
|
-
|
|
160
|
-
### 🧮 可视化算法库
|
|
161
|
-
|
|
162
|
-
我们封装了可视化开发中常用的算法,助你轻松绘制复杂图表。通过简单的配置,即可将任意格式的数据转换为带坐标的绘制数据:
|
|
163
|
-
|
|
164
|
-
<img src="https://oi-contrib.github.io/VISLite/images/docs/what_1.png" width="400"/>
|
|
165
|
-
|
|
166
|
-
> 示例运行地址:[从左到右树状图](https://oi-contrib.github.io/VISLite/#/example/canvas/tree-layout-lr)
|
|
167
|
-
|
|
168
|
-
除[树布局](https://oi-contrib.github.io/VISLite/#/api/treeLayout)外,还提供:[刻度尺算法](https://oi-contrib.github.io/VISLite/#/api/ruler)、[等角斜方位投影](https://oi-contrib.github.io/VISLite/#/api/eoap)、[墨卡托投影](https://oi-contrib.github.io/VISLite/#/api/mercator)、[插值函数](https://oi-contrib.github.io/VISLite/#/api/cardinal)、[变换矩阵](https://oi-contrib.github.io/VISLite/#/api/matrix4)等。
|
|
169
|
-
|
|
170
|
-
### 🖌️ 增强型画笔
|
|
171
|
-
|
|
172
|
-
画笔经过精心设计,使用更简单、功能更强大。以 Canvas 为例,抽象出「区域」概念,无论图形多么不规则,都能轻松实现交互:
|
|
173
|
-
|
|
174
|
-
<img src="https://oi-contrib.github.io/VISLite/images/docs/what_2.png" width="400"/>
|
|
175
|
-
|
|
176
|
-
> 示例运行地址:[中国地图](https://oi-contrib.github.io/VISLite/#/example/canvas/china)
|
|
177
|
-
|
|
178
|
-
画笔不仅为交互而设计区域,还对原生 API 进行了优雅封装,接口更友好直观(如 WebGL 让3D开发零门槛,SVG 无需记忆晦涩属性)。同时自动抹平浏览器兼容性差异。
|
|
179
|
-
|
|
180
|
-
### 📱 跨端支持
|
|
181
|
-
|
|
182
|
-
除 Web 端外,还支持 uni-app、微信小程序、支付宝小程序等多端,API 统一,极大提升代码复用率:
|
|
183
|
-
|
|
184
|
-
<img src="https://oi-contrib.github.io/VISLite/images/docs/what_3.png" width="600"/>
|
|
185
|
-
|
|
186
|
-
> 示例运行地址:[金额波浪球](https://oi-contrib.github.io/VISLite/#/example/svg/money-schedule)
|
|
187
|
-
|
|
188
|
-
目前 `Canvas` 已支持:Web、原生微信小程序、原生支付宝小程序、uni-app(编译为 H5、微信小程序、支付宝小程序等)。后续将持续扩展更多端和画笔类型。
|
|
189
|
-
|
|
190
|
-
## 核心优势
|
|
191
|
-
|
|
192
|
-
- **灵活的引入方式**:支持 npm 安装后的 ES Module / CommonJS 引入,以及 script 标签 CDN 方式
|
|
193
|
-
- **按需加载**:源码 TS 引入、按需 JS 引入或全量引入,多种模式按需选择
|
|
194
|
-
- **简洁与强大并存**:提供可视化基础组件可自由组合,同时也支持常见场景的封装方案
|
|
195
|
-
- **稳定可靠**:同一大版本完全向下兼容(alpha、beta 版本除外),始终保持最新版本为最优选择
|
|
196
|
-
|
|
197
|
-
> 版本规范:alpha(开发版)→ beta(测试版)→ rc(候选版)→ next(预发布版)→ 正式版
|
|
198
|
-
|
|
199
|
-
## 需求反馈
|
|
200
|
-
|
|
201
|
-
我们致力于不断完善可视化功能,期待你的宝贵建议!欢迎通过 [留言](https://github.com/oi-contrib/VISLite/issues) 与我们交流。
|
|
202
|
-
|
|
203
|
-
所有建议将在一周内得到回复。
|
|
204
|
-
|
|
205
|
-
## 更新日志
|
|
206
|
-
|
|
207
|
-
详见[正式版更新日志](./CHANGELOG),每次正式版本发布后更新。
|
|
208
|
-
|
|
209
|
-
## Roadmap
|
|
210
|
-
|
|
211
|
-
近期工作重点:
|
|
212
|
-
|
|
213
|
-
- 提供常用坐标系和布局组件,加速开发
|
|
214
|
-
- 持续优化文档(提升可读性、丰富示例、完善教程)
|
|
215
|
-
|
|
216
|
-
有想要的功能?[告诉我们](https://github.com/oi-contrib/VISLite/issues),我们会优先考虑!
|
|
217
|
-
|
|
218
|
-
## 贡献指南
|
|
219
|
-
|
|
220
|
-
欢迎通过以下方式参与项目:
|
|
221
|
-
|
|
222
|
-
- **代码维护**:处理新功能开发与 Bug 修复
|
|
223
|
-
- **文档完善**:接口文档和教程的编写与优化
|
|
224
|
-
- **测试用例**:补充 test 目录下的测试用例和 docs 目录下的示例
|
|
225
|
-
- **方向讨论**:参与项目未来发展的讨论
|
|
226
|
-
|
|
227
|
-
有意加入?请通过 [issue](https://github.com/oi-contrib/VISLite/issues) 联系我们,请简要说明情况,我们会尽快回复。
|
|
228
|
-
|
|
229
|
-
详见 [VISLite 贡献指南](./.github/CONTRIBUTING.md) 和 [AUTHORS.txt](./AUTHORS.txt)
|
|
230
|
-
|
|
231
|
-
## 示例项目
|
|
232
|
-
|
|
233
|
-
基于 VISLite 及相关插件(如 [@vislite/canvas](https://github.com/oi-contrib/vislite-plugin-canvas)、[@vislite/chart](https://github.com/oi-contrib/vislite-plugin-chart))开发的示例:
|
|
234
|
-
|
|
235
|
-
<img src="https://oi-contrib.github.io/VISLite/images/docs/examples/review1.png" style="width:700px;border:2px solid black;margin-bottom:20px;"/>
|
|
236
|
-
<img src="https://oi-contrib.github.io/VISLite/images/docs/examples/review2.png" style="width:700px;border:2px solid black;margin-bottom:20px;"/>
|
|
237
|
-
<img src="https://oi-contrib.github.io/VISLite/images/docs/examples/review3.png" style="width:300px;border:2px solid black;margin-bottom:20px;"/>
|
|
238
|
-
|
|
239
|
-
更多示例请访问:[VISLite 示例项目](https://rapid-start.github.io/VISLite-examples/index.html)
|
|
240
|
-
|
|
241
|
-
## 版权
|
|
242
|
-
|
|
243
|
-
MIT License
|
|
244
|
-
|
|
245
|
-
Copyright (c) [zxl20070701](https://zxl20070701.github.io/notebook/home.html) 走一步,再走一步
|
|
1
|
+
[English](./README-en.md) · **中文** · [📖 在线文档](https://oi-contrib.github.io/VISLite)
|
|
2
|
+
|
|
3
|
+
- 💘 开源不易,去 <i>[Github给个Star](https://github.com/oi-contrib/VISLite) </i>吧!
|
|
4
|
+
|
|
5
|
+
<img src='https://oi-contrib.github.io/VISLite/images/logo.png' height='300px'/>
|
|
6
|
+
|
|
7
|
+
<p>
|
|
8
|
+
<a href="https://zxl20070701.github.io/toolbox/#/npm-download?packages=vislite&interval=7">
|
|
9
|
+
<img src="https://img.shields.io/npm/dm/vislite.svg" alt="downloads">
|
|
10
|
+
</a>
|
|
11
|
+
<a href="https://www.npmjs.com/package/vislite">
|
|
12
|
+
<img src="https://img.shields.io/npm/v/vislite.svg" alt="npm">
|
|
13
|
+
</a>
|
|
14
|
+
<a href="https://www.jsdelivr.com/package/npm/vislite">
|
|
15
|
+
<img src="https://data.jsdelivr.com/v1/package/npm/vislite/badge" alt="cdn">
|
|
16
|
+
</a>
|
|
17
|
+
<a href="https://github.com/oi-contrib/VISLite/issues">
|
|
18
|
+
<img src="https://img.shields.io/github/issues/oi-contrib/VISLite" alt="issue">
|
|
19
|
+
</a>
|
|
20
|
+
<a href="https://github.com/oi-contrib/VISLite" target='_blank'>
|
|
21
|
+
<img alt="GitHub repo stars" src="https://img.shields.io/github/stars/oi-contrib/VISLite">
|
|
22
|
+
</a>
|
|
23
|
+
<a href="https://github.com/oi-contrib/VISLite">
|
|
24
|
+
<img src="https://img.shields.io/github/forks/oi-contrib/VISLite" alt="forks">
|
|
25
|
+
</a>
|
|
26
|
+
<a href="https://gitee.com/oi-contrib/VISLite" target='_blank'>
|
|
27
|
+
<img alt="Gitee repo stars" src="https://gitee.com/oi-contrib/VISLite/badge/star.svg">
|
|
28
|
+
</a>
|
|
29
|
+
<a href="https://gitee.com/oi-contrib/VISLite">
|
|
30
|
+
<img src="https://gitee.com/oi-contrib/VISLite/badge/fork.svg" alt="forks">
|
|
31
|
+
</a>
|
|
32
|
+
</p>
|
|
33
|
+
|
|
34
|
+
<img src="https://nodei.co/npm/vislite.png?downloads=true&downloadRank=true&stars=true" alt="NPM">
|
|
35
|
+
|
|
36
|
+
# VISLite
|
|
37
|
+
|
|
38
|
+
🚀 一款轻量、优雅的跨端数据可视化解决方案
|
|
39
|
+
|
|
40
|
+
`VISLite` 是一个使用 `TypeScript` 构建的高性能可视化库。官网地址:[https://oi-contrib.github.io/VISLite](https://oi-contrib.github.io/VISLite)
|
|
41
|
+
|
|
42
|
+
它提供了统一的跨端画布绘制与计算能力,让开发者只需关注业务逻辑,即可轻松实现 Web、uni-app、微信小程序、支付宝小程序等多平台的可视化应用。除初始化配置存在细微平台差异外,核心业务代码完全通用。
|
|
43
|
+
|
|
44
|
+
## 简介
|
|
45
|
+
|
|
46
|
+
🎯 轻量级数据可视化开发库 —— 助你更快速、简洁、高效地构建可视化产品。
|
|
47
|
+
|
|
48
|
+
> 本项目已在[开源中国](https://www.oschina.net/p/vislite)中开源,欢迎关注和留言。
|
|
49
|
+
|
|
50
|
+
## 快速开始
|
|
51
|
+
|
|
52
|
+
### 📦 安装
|
|
53
|
+
|
|
54
|
+
```bash
|
|
55
|
+
npm install --save vislite
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### 🖼️ 准备画布
|
|
59
|
+
|
|
60
|
+
```html
|
|
61
|
+
<div id="root" style="width:500px;height:300px;"></div>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### 🎨 开始绘制
|
|
65
|
+
|
|
66
|
+
获取画笔即可绘制你需要的任意内容。例如,获取 Canvas 画笔绘制一个红色圆:
|
|
67
|
+
|
|
68
|
+
```js
|
|
69
|
+
import { Canvas } from 'vislite';
|
|
70
|
+
|
|
71
|
+
var painter = new Canvas(document.getElementById('root'));
|
|
72
|
+
|
|
73
|
+
painter.config({
|
|
74
|
+
fillStyle: "red"
|
|
75
|
+
}).fillCircle(200, 150, 100);
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
更复杂的图表?我们提供了丰富的辅助 API。以树布局为例,只需简单几步即可绘制树图:
|
|
79
|
+
|
|
80
|
+
<img src="https://oi-contrib.github.io/VISLite/images/docs/tree.png" width="500"/>
|
|
81
|
+
|
|
82
|
+
```js
|
|
83
|
+
import { Canvas, TreeLayout } from 'vislite';
|
|
84
|
+
|
|
85
|
+
var painter = new Canvas(document.getElementById('root'));
|
|
86
|
+
var treeLayout = new TreeLayout();
|
|
87
|
+
|
|
88
|
+
treeLayout.setOption({
|
|
89
|
+
type: "rect",
|
|
90
|
+
direction: "TB",
|
|
91
|
+
x: 250,
|
|
92
|
+
y: 20,
|
|
93
|
+
width: 500,
|
|
94
|
+
height: 260
|
|
95
|
+
});
|
|
96
|
+
|
|
97
|
+
var data = {
|
|
98
|
+
"name": "前端",
|
|
99
|
+
"children": [{
|
|
100
|
+
"name": "基础",
|
|
101
|
+
"children": [{
|
|
102
|
+
"name": "HTML"
|
|
103
|
+
}, {
|
|
104
|
+
"name": "CSS"
|
|
105
|
+
}, {
|
|
106
|
+
"name": "JavaScript"
|
|
107
|
+
}, {
|
|
108
|
+
"name": "DOM"
|
|
109
|
+
}]
|
|
110
|
+
}, {
|
|
111
|
+
"name": "框架"
|
|
112
|
+
}, {
|
|
113
|
+
"name": "小技术"
|
|
114
|
+
}]
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
var tree = treeLayout.use(data);
|
|
118
|
+
|
|
119
|
+
// 绘制连线
|
|
120
|
+
painter.config({
|
|
121
|
+
strokeStyle: 'red'
|
|
122
|
+
});
|
|
123
|
+
for (var key in tree.node) {
|
|
124
|
+
var pid = tree.node[key].pid;
|
|
125
|
+
|
|
126
|
+
if (pid) {
|
|
127
|
+
var dist = (tree.node[key].top - tree.node[pid].top) * 0.5;
|
|
128
|
+
|
|
129
|
+
painter
|
|
130
|
+
.beginPath()
|
|
131
|
+
.moveTo(tree.node[key].left, tree.node[key].top)
|
|
132
|
+
.bezierCurveTo(
|
|
133
|
+
tree.node[key].left, tree.node[key].top - dist,
|
|
134
|
+
tree.node[pid].left, tree.node[pid].top + dist,
|
|
135
|
+
tree.node[pid].left, tree.node[pid].top
|
|
136
|
+
).stroke();
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
// 绘制节点和文字
|
|
141
|
+
painter.config({
|
|
142
|
+
strokeStyle: 'red',
|
|
143
|
+
fontSize: 12
|
|
144
|
+
});
|
|
145
|
+
for (var key in tree.node) {
|
|
146
|
+
painter.config({
|
|
147
|
+
fillStyle: "white"
|
|
148
|
+
}).fullCircle(tree.node[key].left, tree.node[key].top, 10);
|
|
149
|
+
|
|
150
|
+
painter.config({
|
|
151
|
+
fillStyle: "black"
|
|
152
|
+
}).fillText(key, tree.node[key].left + 15, tree.node[key].top);
|
|
153
|
+
}
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
树布局的详细用法,请参阅:[《教程 / 树布局》](https://oi-contrib.github.io/VISLite/#/course/tree-layout)
|
|
157
|
+
|
|
158
|
+
## 核心功能
|
|
159
|
+
|
|
160
|
+
### 🧮 可视化算法库
|
|
161
|
+
|
|
162
|
+
我们封装了可视化开发中常用的算法,助你轻松绘制复杂图表。通过简单的配置,即可将任意格式的数据转换为带坐标的绘制数据:
|
|
163
|
+
|
|
164
|
+
<img src="https://oi-contrib.github.io/VISLite/images/docs/what_1.png" width="400"/>
|
|
165
|
+
|
|
166
|
+
> 示例运行地址:[从左到右树状图](https://oi-contrib.github.io/VISLite/#/example/canvas/tree-layout-lr)
|
|
167
|
+
|
|
168
|
+
除[树布局](https://oi-contrib.github.io/VISLite/#/api/treeLayout)外,还提供:[刻度尺算法](https://oi-contrib.github.io/VISLite/#/api/ruler)、[等角斜方位投影](https://oi-contrib.github.io/VISLite/#/api/eoap)、[墨卡托投影](https://oi-contrib.github.io/VISLite/#/api/mercator)、[插值函数](https://oi-contrib.github.io/VISLite/#/api/cardinal)、[变换矩阵](https://oi-contrib.github.io/VISLite/#/api/matrix4)等。
|
|
169
|
+
|
|
170
|
+
### 🖌️ 增强型画笔
|
|
171
|
+
|
|
172
|
+
画笔经过精心设计,使用更简单、功能更强大。以 Canvas 为例,抽象出「区域」概念,无论图形多么不规则,都能轻松实现交互:
|
|
173
|
+
|
|
174
|
+
<img src="https://oi-contrib.github.io/VISLite/images/docs/what_2.png" width="400"/>
|
|
175
|
+
|
|
176
|
+
> 示例运行地址:[中国地图](https://oi-contrib.github.io/VISLite/#/example/canvas/china)
|
|
177
|
+
|
|
178
|
+
画笔不仅为交互而设计区域,还对原生 API 进行了优雅封装,接口更友好直观(如 WebGL 让3D开发零门槛,SVG 无需记忆晦涩属性)。同时自动抹平浏览器兼容性差异。
|
|
179
|
+
|
|
180
|
+
### 📱 跨端支持
|
|
181
|
+
|
|
182
|
+
除 Web 端外,还支持 uni-app、微信小程序、支付宝小程序等多端,API 统一,极大提升代码复用率:
|
|
183
|
+
|
|
184
|
+
<img src="https://oi-contrib.github.io/VISLite/images/docs/what_3.png" width="600"/>
|
|
185
|
+
|
|
186
|
+
> 示例运行地址:[金额波浪球](https://oi-contrib.github.io/VISLite/#/example/svg/money-schedule)
|
|
187
|
+
|
|
188
|
+
目前 `Canvas` 已支持:Web、原生微信小程序、原生支付宝小程序、uni-app(编译为 H5、微信小程序、支付宝小程序等)。后续将持续扩展更多端和画笔类型。
|
|
189
|
+
|
|
190
|
+
## 核心优势
|
|
191
|
+
|
|
192
|
+
- **灵活的引入方式**:支持 npm 安装后的 ES Module / CommonJS 引入,以及 script 标签 CDN 方式
|
|
193
|
+
- **按需加载**:源码 TS 引入、按需 JS 引入或全量引入,多种模式按需选择
|
|
194
|
+
- **简洁与强大并存**:提供可视化基础组件可自由组合,同时也支持常见场景的封装方案
|
|
195
|
+
- **稳定可靠**:同一大版本完全向下兼容(alpha、beta 版本除外),始终保持最新版本为最优选择
|
|
196
|
+
|
|
197
|
+
> 版本规范:alpha(开发版)→ beta(测试版)→ rc(候选版)→ next(预发布版)→ 正式版
|
|
198
|
+
|
|
199
|
+
## 需求反馈
|
|
200
|
+
|
|
201
|
+
我们致力于不断完善可视化功能,期待你的宝贵建议!欢迎通过 [留言](https://github.com/oi-contrib/VISLite/issues) 与我们交流。
|
|
202
|
+
|
|
203
|
+
所有建议将在一周内得到回复。
|
|
204
|
+
|
|
205
|
+
## 更新日志
|
|
206
|
+
|
|
207
|
+
详见[正式版更新日志](./CHANGELOG),每次正式版本发布后更新。
|
|
208
|
+
|
|
209
|
+
## Roadmap
|
|
210
|
+
|
|
211
|
+
近期工作重点:
|
|
212
|
+
|
|
213
|
+
- 提供常用坐标系和布局组件,加速开发
|
|
214
|
+
- 持续优化文档(提升可读性、丰富示例、完善教程)
|
|
215
|
+
|
|
216
|
+
有想要的功能?[告诉我们](https://github.com/oi-contrib/VISLite/issues),我们会优先考虑!
|
|
217
|
+
|
|
218
|
+
## 贡献指南
|
|
219
|
+
|
|
220
|
+
欢迎通过以下方式参与项目:
|
|
221
|
+
|
|
222
|
+
- **代码维护**:处理新功能开发与 Bug 修复
|
|
223
|
+
- **文档完善**:接口文档和教程的编写与优化
|
|
224
|
+
- **测试用例**:补充 test 目录下的测试用例和 docs 目录下的示例
|
|
225
|
+
- **方向讨论**:参与项目未来发展的讨论
|
|
226
|
+
|
|
227
|
+
有意加入?请通过 [issue](https://github.com/oi-contrib/VISLite/issues) 联系我们,请简要说明情况,我们会尽快回复。
|
|
228
|
+
|
|
229
|
+
详见 [VISLite 贡献指南](./.github/CONTRIBUTING.md) 和 [AUTHORS.txt](./AUTHORS.txt)
|
|
230
|
+
|
|
231
|
+
## 示例项目
|
|
232
|
+
|
|
233
|
+
基于 VISLite 及相关插件(如 [@vislite/canvas](https://github.com/oi-contrib/vislite-plugin-canvas)、[@vislite/chart](https://github.com/oi-contrib/vislite-plugin-chart))开发的示例:
|
|
234
|
+
|
|
235
|
+
<img src="https://oi-contrib.github.io/VISLite/images/docs/examples/review1.png" style="width:700px;border:2px solid black;margin-bottom:20px;"/>
|
|
236
|
+
<img src="https://oi-contrib.github.io/VISLite/images/docs/examples/review2.png" style="width:700px;border:2px solid black;margin-bottom:20px;"/>
|
|
237
|
+
<img src="https://oi-contrib.github.io/VISLite/images/docs/examples/review3.png" style="width:300px;border:2px solid black;margin-bottom:20px;"/>
|
|
238
|
+
|
|
239
|
+
更多示例请访问:[VISLite 示例项目](https://rapid-start.github.io/VISLite-examples/index.html)
|
|
240
|
+
|
|
241
|
+
## 版权
|
|
242
|
+
|
|
243
|
+
MIT License
|
|
244
|
+
|
|
245
|
+
Copyright (c) [zxl20070701](https://zxl20070701.github.io/notebook/home.html) 走一步,再走一步
|
package/bin/formatArgv.js
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
// 命令行参数解析
|
|
2
|
-
module.exports = function (argvs, shorts, isArray) {
|
|
3
|
-
let result = {}, keyName = "args", value = [];
|
|
4
|
-
if (isArray) result["value"] = [];
|
|
5
|
-
|
|
6
|
-
let pushValue = function () {
|
|
7
|
-
if (isArray && keyName !== "args") {
|
|
8
|
-
result["value"].push({
|
|
9
|
-
name: keyName,
|
|
10
|
-
value
|
|
11
|
-
});
|
|
12
|
-
} else {
|
|
13
|
-
result[keyName] = value;
|
|
14
|
-
}
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
for (let index = 3; index < argvs.length; index++) {
|
|
18
|
-
let argv = argvs[index];
|
|
19
|
-
|
|
20
|
-
if (/^\-/.test(argv)) {
|
|
21
|
-
pushValue();
|
|
22
|
-
keyName = shorts[argv] || argv;
|
|
23
|
-
value = [];
|
|
24
|
-
} else {
|
|
25
|
-
value.push(argv);
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
pushValue();
|
|
29
|
-
|
|
30
|
-
return result;
|
|
1
|
+
// 命令行参数解析
|
|
2
|
+
module.exports = function (argvs, shorts, isArray) {
|
|
3
|
+
let result = {}, keyName = "args", value = [];
|
|
4
|
+
if (isArray) result["value"] = [];
|
|
5
|
+
|
|
6
|
+
let pushValue = function () {
|
|
7
|
+
if (isArray && keyName !== "args") {
|
|
8
|
+
result["value"].push({
|
|
9
|
+
name: keyName,
|
|
10
|
+
value
|
|
11
|
+
});
|
|
12
|
+
} else {
|
|
13
|
+
result[keyName] = value;
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
for (let index = 3; index < argvs.length; index++) {
|
|
18
|
+
let argv = argvs[index];
|
|
19
|
+
|
|
20
|
+
if (/^\-/.test(argv)) {
|
|
21
|
+
pushValue();
|
|
22
|
+
keyName = shorts[argv] || argv;
|
|
23
|
+
value = [];
|
|
24
|
+
} else {
|
|
25
|
+
value.push(argv);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
pushValue();
|
|
29
|
+
|
|
30
|
+
return result;
|
|
31
31
|
};
|
package/bin/help.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
const packageValue = require("../package.json");
|
|
2
|
-
|
|
3
|
-
module.exports = function () {
|
|
4
|
-
console.log(`\x1b[36m
|
|
5
|
-
@vislite/cli@v${packageValue.version}
|
|
6
|
-
|
|
7
|
-
可以使用的命令如下:
|
|
8
|
-
|
|
9
|
-
【1】vislite-cli skills 关于内置skills相关操作
|
|
10
|
-
--force|-f
|
|
11
|
-
强制执行,如果目标地址已有内容,会直接强制删除已有内容
|
|
12
|
-
--copy|-c [文件夹地址]
|
|
13
|
-
复制到的skills文件夹地址
|
|
14
|
-
(eg: vislite-cli skills --copy ./skills -f )
|
|
15
|
-
|
|
16
|
-
\x1b[0m`);
|
|
17
|
-
|
|
1
|
+
const packageValue = require("../package.json");
|
|
2
|
+
|
|
3
|
+
module.exports = function () {
|
|
4
|
+
console.log(`\x1b[36m
|
|
5
|
+
@vislite/cli@v${packageValue.version}
|
|
6
|
+
|
|
7
|
+
可以使用的命令如下:
|
|
8
|
+
|
|
9
|
+
【1】vislite-cli skills 关于内置skills相关操作
|
|
10
|
+
--force|-f
|
|
11
|
+
强制执行,如果目标地址已有内容,会直接强制删除已有内容
|
|
12
|
+
--copy|-c [文件夹地址]
|
|
13
|
+
复制到的skills文件夹地址
|
|
14
|
+
(eg: vislite-cli skills --copy ./skills -f )
|
|
15
|
+
|
|
16
|
+
\x1b[0m`);
|
|
17
|
+
|
|
18
18
|
};
|
package/bin/run
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
#!/usr/bin/env node
|
|
2
|
-
|
|
3
|
-
'use strict';
|
|
4
|
-
|
|
5
|
-
process.title = 'vislite/cli';
|
|
6
|
-
|
|
7
|
-
const formatArgv = require("./formatArgv.js");
|
|
8
|
-
|
|
9
|
-
if (process.argv[2] === "skills") {
|
|
10
|
-
|
|
11
|
-
let argvObj = formatArgv(process.argv, {
|
|
12
|
-
"-f": "--force",
|
|
13
|
-
"-c": "--copy"
|
|
14
|
-
}, true);
|
|
15
|
-
|
|
16
|
-
require("./skills.js")(argvObj);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
// 默认,帮助
|
|
20
|
-
else {
|
|
21
|
-
require("./help.js")();
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
'use strict';
|
|
4
|
+
|
|
5
|
+
process.title = 'vislite/cli';
|
|
6
|
+
|
|
7
|
+
const formatArgv = require("./formatArgv.js");
|
|
8
|
+
|
|
9
|
+
if (process.argv[2] === "skills") {
|
|
10
|
+
|
|
11
|
+
let argvObj = formatArgv(process.argv, {
|
|
12
|
+
"-f": "--force",
|
|
13
|
+
"-c": "--copy"
|
|
14
|
+
}, true);
|
|
15
|
+
|
|
16
|
+
require("./skills.js")(argvObj);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
// 默认,帮助
|
|
20
|
+
else {
|
|
21
|
+
require("./help.js")();
|
|
22
22
|
}
|