vislite 1.9.1 → 1.11.0-alpha.0

package/CHANGELOG

@@ -372,3 +372,15 @@ v1.9.1:
         1、调整打包若干细节
         2、优化uni-app（Vue3版本）的在支付宝小程序中不合理的警告提示
         3、针对SVG画笔优化初始化方式
+v1.10.0:
+    date:2026-05-01
+    changes:
+      - 优化改造
+        1、校对或补充types相关文件
+        2、简化依赖
+v1.11.0:
+    date:
+    changes:
+      - 新增功能
+        1、添加skills技能
+            * vislite-lib 说明本库如何使用

package/README.md

@@ -33,31 +33,35 @@
 
 # VISLite
 
-`VISLite`是一个使用`TypeScript`开发的可视化库。官网地址：[https://oi-contrib.github.io/VISLite](https://oi-contrib.github.io/VISLite)
+🚀 一款轻量、优雅的跨端数据可视化解决方案
 
-主要提供了跨端的画布和计算，开发人员只需要按照文档的描述就可以非常简单的完成包括Web、uni-app、微信小程序、支付宝小程序等平台的可视化开发，除了初始化时可能存在一些差异外，主要的业务代码部分在不同端完全一致。
+`VISLite` 是一个使用 `TypeScript` 构建的高性能可视化库。官网地址：[https://oi-contrib.github.io/VISLite](https://oi-contrib.github.io/VISLite)
+
+它提供了统一的跨端画布绘制与计算能力，让开发者只需关注业务逻辑，即可轻松实现 Web、uni-app、微信小程序、支付宝小程序等多平台的可视化应用。除初始化配置存在细微平台差异外，核心业务代码完全通用。
 
 ## 简介
 
-这是一个轻量级的数据可视化资源库，目标是：帮助你更快速、简单、高效的开发出任意的可视化业务产品。
+🎯 轻量级数据可视化开发库 —— 助你更快速、简洁、高效地构建可视化产品。
 
 > 本项目已在[开源中国](https://www.oschina.net/p/vislite)中开源，欢迎关注和留言。
 
-## 如何使用？
+## 快速开始
 
-首先，需要进行安装：
+### 📦 安装
 
-```js
+```bash
 npm install --save vislite
 ```
 
-然后，准备好画布：
+### 🖼️ 准备画布
 
 ```html
 <div id="root" style="width:500px;height:300px;"></div>
 ```
 
-现在，就可以获取画笔绘制自己需要的内容了。比如获取canvas画笔，绘制一个红色的圆：
+### 🎨 开始绘制
+
+获取画笔即可绘制你需要的任意内容。例如，获取 Canvas 画笔绘制一个红色圆：
 
 ```js
 import { Canvas } from 'vislite';
@@ -69,12 +73,10 @@ painter.config({
 }).fillCircle(200, 150, 100);
 ```
 
-更复杂的图表，我们也提供了丰富的辅助API。比如使用树布局，可以非常快速的绘制一个树图：
+更复杂的图表？我们提供了丰富的辅助 API。以树布局为例，只需简单几步即可绘制树图：
 
 <img src="https://oi-contrib.github.io/VISLite/images/docs/tree.png" width="500"/>
 
-具体代码如下：
-
 ```js
 import { Canvas, TreeLayout } from 'vislite';
 
@@ -119,7 +121,6 @@ painter.config({
 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;
 
@@ -150,90 +151,90 @@ for (var key in tree.node) {
 }
 ```
 
-关于树布局更具体的使用细节，你可以访问：[ 《教程 / 树布局》 ](https://oi-contrib.github.io/VISLite/#/course/tree-layout)一节。
+树布局的详细用法，请参阅：[《教程 / 树布局》](https://oi-contrib.github.io/VISLite/#/course/tree-layout)
 
-## 部分功能
+## 核心功能
 
-### 常用的算法
+### 🧮 可视化算法库
 
-我们通过提供可视化常用的算法来帮助你绘制复杂图表。比如下面的树图，通过简单的配置就可以把任意格式的数据变成任意绘制的带坐标的数据：
+我们封装了可视化开发中常用的算法，助你轻松绘制复杂图表。通过简单的配置，即可将任意格式的数据转换为带坐标的绘制数据：
 
 <img src="https://oi-contrib.github.io/VISLite/images/docs/what_1.png" width="400"/>
 
-> 上述例子的运行地址：[从左到右树状图](https://oi-contrib.github.io/VISLite/#/example/canvas/tree-layout-lr)。
+> 示例运行地址：[从左到右树状图](https://oi-contrib.github.io/VISLite/#/example/canvas/tree-layout-lr)
 
-除了[树布局](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)提供各种坐标变换等。
+除[树布局](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)等。
 
-### 画笔加强
+### 🖌️ 增强型画笔
 
-我们对画笔进行了加强，使得其更简单好用。比如canvas，抽象出区域的概念，使得无论你绘制的图形多么的不规则，都可以很轻松的实现交互功能：
+画笔经过精心设计，使用更简单、功能更强大。以 Canvas 为例，抽象出「区域」概念，无论图形多么不规则，都能轻松实现交互：
 
 <img src="https://oi-contrib.github.io/VISLite/images/docs/what_2.png" width="400"/>
 
-> 上述例子的运行地址：[中国地图](https://oi-contrib.github.io/VISLite/#/example/canvas/china)。
+> 示例运行地址：[中国地图](https://oi-contrib.github.io/VISLite/#/example/canvas/china)
 
-画笔除了像上面那样为了方便交互而补充区域的设计外，还对原来的API进行了一次抽象，使得API更友好简单`（比如WebGL，即使不会3D的人也可以轻松使用，而SVG的使用，你无需去记忆那些晦涩难懂的属性）`，同时，我们还抹平了不同版本浏览器等之间的差异。
+画笔不仅为交互而设计区域，还对原生 API 进行了优雅封装，接口更友好直观（如 WebGL 让3D开发零门槛，SVG 无需记忆晦涩属性）。同时自动抹平浏览器兼容性差异。
 
-### 支持跨端开发
+### 📱 跨端支持
 
-除了Web端外，我们还针对uni-app、微信小程序、支付宝小程序等端进行了支持，并且不同端API保持一致，大大提高了代码的复用性：
+除 Web 端外，还支持 uni-app、微信小程序、支付宝小程序等多端，API 统一，极大提升代码复用率：
 
 <img src="https://oi-contrib.github.io/VISLite/images/docs/what_3.png" width="600"/>
 
-> 上述例子的运行地址：[金额波浪球](https://oi-contrib.github.io/VISLite/#/example/svg/money-schedule)。
+> 示例运行地址：[金额波浪球](https://oi-contrib.github.io/VISLite/#/example/svg/money-schedule)
 
-基于实际需要，我们目前对 `Canvas` 提供了跨端支持，除 `Web端` 外，还支持 `原生微信小程序` 、 `原生支付宝小程序` 和 `uni-app端` （编译成H5、微信小程序、支付宝小程序等） ，如果后续有必要，我们会对Canvas支持的端或SVG、WebGL等画笔进行更多端扩展。
+目前 `Canvas` 已支持：Web、原生微信小程序、原生支付宝小程序、uni-app（编译为 H5、微信小程序、支付宝小程序等）。后续将持续扩展更多端和画笔类型。
 
-## 特点
+## 核心优势
 
--   灵活的引入方式：包括npm安装后按照`ES Module`或`CommonJS`规范引入或直接使用script标签的`CDN`方式。
--   按需引入或全局引入：支持源码TS引入、按需JS引入或者全量引入等多种方式。
--   简单与复杂共存：一方面我们提供了可视化需要的基础功能，你可以按照自己的需要组合使用；另一方面，为了加速开发，我们针对常见的可视化业务场景进行了封装，可以帮助你快速完成，你可以根据实际情况进行选择。
--   向下兼容：我们向你保证，同一个大版本下始终向下兼容`（alpha和beta版本为测试版本，不包括）`，因此，无论何时，在同一个大版本号下，最新版本总是最好的选择。
+-   **灵活的引入方式**：支持 npm 安装后的 ES Module / CommonJS 引入，以及 script 标签 CDN 方式
+-   **按需加载**：源码 TS 引入、按需 JS 引入或全量引入，多种模式按需选择
+-   **简洁与强大并存**：提供可视化基础组件可自由组合，同时也支持常见场景的封装方案
+-   **稳定可靠**：同一大版本完全向下兼容（alpha、beta 版本除外），始终保持最新版本为最优选择
 
-> 版本说明：alpha为开发阶段、beta为发布前测试、rc为候选版本、next为未来版本、无后缀的为正式版本。
+> 版本规范：alpha（开发版）→ beta（测试版）→ rc（候选版）→ next（预发布版）→ 正式版
 
-## 需求墙
+## 需求反馈
 
-我们的目标是不断完善丰富可视化功能，非常希望获得你宝贵的建议和批评，无论任何想法，都可以给我们[留言](https://github.com/oi-contrib/VISLite/issues)告诉我们。
+我们致力于不断完善可视化功能，期待你的宝贵建议！欢迎通过 [留言](https://github.com/oi-contrib/VISLite/issues) 与我们交流。
 
-你所提的任何建议我们都会在最长一周内进行反馈说明。
+所有建议将在一周内得到回复。
 
 ## 更新日志
 
-详见[正式版更新日志](./CHANGELOG)，我们会在每次发布完正式版本后更新其内容。
+详见[正式版更新日志](./CHANGELOG)，每次正式版本发布后更新。
 
-## 下一步
+## Roadmap
 
-我们会在这里列出接下来的工作重心：
+近期工作重点：
 
--   为加速开发，提供常用坐标系和布局
--   文档优化（提高可读性、丰富用例、补充教程）
+-   提供常用坐标系和布局组件，加速开发
+-   持续优化文档（提升可读性、丰富示例、完善教程）
 
-给我们[留言](https://github.com/oi-contrib/VISLite/issues)告诉我们你希望快速扩展的功能，我们会优先你的建议考虑哦～
+有想要的功能？[告诉我们](https://github.com/oi-contrib/VISLite/issues)，我们会优先考虑！
 
-## 参与贡献
+## 贡献指南
 
-你可以选择下列一项或多项进行参与：
+欢迎通过以下方式参与项目：
 
--   代码维护：由于新功能或一些BUG的出现，对代码进行维护和升级。
--   文档编辑：主要是接口文档和教程需要编辑，这很重要。
--   用例开发和测试：在项目的test文件夹下有一些测试，而在docs文档中存在一些例子需要补充。
--   参与讨论：主要是讨论未来如何发展，改造的方向等。
+-   **代码维护**：处理新功能开发与 Bug 修复
+-   **文档完善**：接口文档和教程的编写与优化
+-   **测试用例**：补充 test 目录下的测试用例和 docs 目录下的示例
+-   **方向讨论**：参与项目未来发展的讨论
 
-如果有意向加入我们，你可以通过提 [issue](https://github.com/oi-contrib/VISLite/issues) 和我们取到联系，请简单说明一下情况，我们会尽快回复。
+有意加入？请通过 [issue](https://github.com/oi-contrib/VISLite/issues) 联系我们，请简要说明情况，我们会尽快回复。
 
-你可以查看[VISLite 贡献指南](./.github/CONTRIBUTING.md)文件了解更多细节，查看[AUTHORS.txt](./AUTHORS.txt)了解所有的贡献者。
+详见 [VISLite 贡献指南](./.github/CONTRIBUTING.md) 和 [AUTHORS.txt](./AUTHORS.txt)
 
-## 例子项目
+## 示例项目
 
-主要是基于本项目及相关项目（比如 [ @vislite/canvas](https://github.com/oi-contrib/vislite-plugin-canvas) 、 [ @vislite/chart](https://github.com/oi-contrib/vislite-plugin-chart)）开发的一些用例：
+基于 VISLite 及相关插件（如 [@vislite/canvas](https://github.com/oi-contrib/vislite-plugin-canvas)、[@vislite/chart](https://github.com/oi-contrib/vislite-plugin-chart)）开发的示例：
 
 <img src="https://oi-contrib.github.io/VISLite/images/docs/examples/review1.png" style="width:700px;border:2px solid black;margin-bottom:20px;"/>
 <img src="https://oi-contrib.github.io/VISLite/images/docs/examples/review2.png" style="width:700px;border:2px solid black;margin-bottom:20px;"/>
 <img src="https://oi-contrib.github.io/VISLite/images/docs/examples/review3.png" style="width:300px;border:2px solid black;margin-bottom:20px;"/>
 
-更多内容，你可以直接访问： [VISLite 例子项目](https://rapid-start.github.io/VISLite-examples/index.html)
+更多示例请访问：[VISLite 示例项目](https://rapid-start.github.io/VISLite-examples/index.html)
 
 ## 版权
 

package/lib/BarLayout/index.es.js

@@ -144,11 +144,11 @@ function ruler (maxValue, minValue, num, option) {
 }
 
 //当前正在运动的动画的tick函数堆栈
-var $timers = [];
+let $timers = [];
 //唯一定时器的定时间隔
-var $interval = 13;
+let $interval = 13;
 //定时器ID
-var $timerId;
+let $timerId;
 
 /**
  * 动画轮播
@@ -162,16 +162,19 @@ function animation(doback, duration, callback) {
     if (arguments.length < 2) duration = 400;
     if (arguments.length < 3) callback = function () { };
 
-    var clock = {
+    let clock = {
         //把tick函数推入堆栈
         "timer": function (tick, duration, callback) {
             if (!tick) {
                 throw new Error('Tick is required!');
             }
-            var id = new Date().valueOf() + "_" + (Math.random() * 1000).toFixed(0);
+            let id = new Date().valueOf() + "_" + (Math.random() * 1000).toFixed(0);
             $timers.push({
                 "id": id,
-                "createTime": new Date(),
+                "createTime": new Date(), // 开始时间
+                "pauseTime": -1, // 暂停的时间，继续运行的时候，借助此计算暂停的时间差
+                "pauseKeepTime": 0, // 暂停用去的时间
+                "status": "running", // running(运行中), paused(暂停中)
                 "tick": tick,
                 "duration": duration,
                 "callback": callback
@@ -200,7 +203,7 @@ function animation(doback, duration, callback) {
 
         //被定时器调用，遍历timers堆栈
         "tick": function () {
-            var createTime, flag, tick, callback, timer, duration, passTime, timers = $timers;
+            let createTime, flag, tick, callback, timer, duration, passTime, timers = $timers;
 
             $timers = [];
             $timers.length = 0;
@@ -214,15 +217,21 @@ function animation(doback, duration, callback) {
                 callback = timer.callback;
 
                 //执行
-                passTime = (+new Date().valueOf() - createTime.valueOf()) / duration;
+                passTime = (+new Date().valueOf() - createTime.valueOf() - timer.pauseKeepTime) / duration;
                 passTime = passTime > 1 ? 1 : passTime;
-                tick(passTime);
-                if (passTime < 1 && timer.id) {
+
+                if (timer.status === "running") {
+                    tick(passTime);
+                }
+
+                // 只有当动画没有结束或者动画处于暂停状态时，才继续添加到timers堆栈
+                if ((passTime < 1 || timer.status === "paused") && timer.id) {
                     //动画没有结束再添加
                     $timers.push(timer);
                 } else {
                     callback(passTime);
                 }
+
             }
             if ($timers.length <= 0) {
                 clock.stop();
@@ -243,20 +252,40 @@ function animation(doback, duration, callback) {
         }
     };
 
-    var id = clock.timer(function (deep) {
+    let id = clock.timer(function (deep) {
         //其中deep为0-1，表示改变的程度
         doback(deep);
     }, duration, callback);
 
     return {
-        // 一个函数
-        // 用于在动画结束前结束动画
+        // 结束动画
         stop: function () {
-            var i;
-            for (i in $timers) {
+            for (let i in $timers) {
                 if ($timers[i].id == id) {
                     $timers[i].id = void 0;
-                    return;
+                }
+            }
+        },
+        // 暂停动画
+        pause: function () {
+            for (let i in $timers) {
+                if ($timers[i].id == id) {
+                    if ($timers[i].pauseTime === -1) {
+                        $timers[i].pauseTime = new Date();
+                        $timers[i].status = "paused";
+                    }
+                }
+            }
+        },
+        // 继续动画
+        resume: function () {
+            for (let i in $timers) {
+                if ($timers[i].id == id) {
+                    if ($timers[i].pauseTime !== -1) {
+                        $timers[i].pauseKeepTime += (new Date().valueOf() - $timers[i].pauseTime.valueOf());
+                        $timers[i].pauseTime = -1;
+                        $timers[i].status = "running";
+                    }
                 }
             }
         }

package/lib/BarLayout/index.es.min.js

@@ -1 +1 @@
-function t(t,i){for(var a in t)i[a]=t[a];return i}var i,a=[];var e=function(){function e(i){void 0===i&&(i={}),this.name="BarLayout",this.__option={x:50,y:350,width:400,height:300,category:"xAxis",duration:200},this.__config=t(i,{})}return e.prototype.setOption=function(i){return t(i,this.__option),this},e.prototype.use=function(t){var i={coordinate:{x:this.__option.x,y:this.__option.y,width:this.__option.width,height:this.__option.height,xAxis:{type:"xAxis"===this.__option.category?"category":"value",data:[]},yAxis:{type:"xAxis"===this.__option.category?"value":"category",data:[]}},node:[]},a=void 0,e=void 0;if(t.data)for(var n=0,r=t.data;n<r.length;n++){var o=r[n];(void 0===a||o>a)&&(a=o),(void 0===e||o<e)&&(e=o)}else{if(!t.value)throw new Error("No data leads to parsing errors");for(var h=0,u=t.value;h<u.length;h++)for(var l=0,s=u[h].data;l<s.length;l++){o=s[l];(void 0===a||o>a)&&(a=o),(void 0===e||o<e)&&(e=o)}}var _,d,f=function(t,i,a,e){if(t<i){var n=i;i=t,t=n}else if(t==i)return[t];var r=function(t){for(var i=t<100&&t>-100?10:.1,a=-1,e=t;10==i?e>=-100&&e<=100:e<=-100||e>=100;)a+=1,e*=i;if(10==i)return Math.pow(10,a);for(var n="0.",r=1;r<a;r++)n+="0";return+(n+"1")}(t-i),o=Math.ceil((t-i)*r/a),h=function(a){var e=({3:2,4:5,6:5,7:5,8:10,9:10,11:10,12:10,13:15,14:15,16:15,17:15,18:20,19:20,21:20,22:20,23:25,24:25,26:25,27:25}[o+a]||o+a)/r,n=Math.floor(i/e)*e,h=[];h.push(n);for(var u=1;h[h.length-1]<t;u++)h.push(n+e*u);return h},u=h(0),l=function(){for(var t=[],a=u[u.length-1]-(null==e?void 0:e.max),n=0;n<u.length;n++)n+1<u.length&&u[n+1]-a<i||t.push(u[n]-a);return t},s=function(){for(var i=[],a=u[0]-(null==e?void 0:e.min),n=0;n<u.length&&(i[n]=u[n]-a,!(t<=i[n]));n++);return i};if(e){if("max"in e&&"min"in e&&e.max>=t&&e.min<=i){var _=function(){if(u[0]>=e.min&&u[u.length-1]<=e.max)return!0;var t=l();if(t[0]>=e.min&&t[t.length-1]<=e.max)return u=t,!0;var i=s();return i[0]>=e.min&&i[t.length-1]<=e.max?(u=i,!0):void 0};if(_())return u;for(var d=1;d<100;d++){if(u=h(d),_())return u;if(u=h(-d),_())return u}}"max"in e&&e.max>=t?e.max<u[u.length-1]&&(u=l()):"min"in e&&e.min<=i&&e.min>u[0]&&(u=s())}for(var f=0;f<u.length;f++){var c=u[f]+"";/\./.test(c)&&(/9{7,}$/.test(c)?(c=c.replace(/9{7,}$/,""),u[f]=+(c.substring(0,c.length-1)+(+c[c.length-1]+1))):/0{7,}\d$/.test(c)&&(u[f]=+c.replace(/0{7,}\d$/,"")))}return u}(a||0,e||0,5);"xAxis"===this.__option.category?(i.coordinate.xAxis.data=t.category,i.coordinate.yAxis.data=f,_=this.__option.width,d=-1*this.__option.height):(i.coordinate.xAxis.data=f,i.coordinate.yAxis.data=t.category,_=this.__option.height,d=this.__option.width);var c=[],v=_/t.category.length,p=.9*v,g=.05*v;if(t.data)for(var x=0;x<t.data.length;x++)c.push([g+v*x,p]);else{var m=p/t.value.length,y=.9*m,b=.05*m;for(x=0;x<t.value[0].data.length;x++){c[x]=[];for(var w=0;w<t.value.length;w++)c[x].push([g+v*x+m*w+b,y])}}var A=d/(f[f.length-1]-f[0]),k=function(t){return A*(t-f[0])};if("xAxis"===this.__option.category)if(t.data){var B=[];for(x=0;x<t.data.length;x++)B.push({x:this.__option.x+c[x][0],y:this.__option.y,width:c[x][1],height:k(t.data[x]),value:t.data[x]});i.node.push({bar:B})}else for(w=0;w<t.value.length;w++){for(B=[],x=0;x<t.value[w].data.length;x++)B.push({x:this.__option.x+c[x][w][0],y:this.__option.y,width:c[x][w][1],height:k(t.value[w].data[x]),value:t.value[w].data[x]});i.node.push({name:t.value[w].name,bar:B})}else if(t.data){for(B=[],x=0;x<t.data.length;x++)B.push({x:this.__option.x,y:this.__option.y-this.__option.height+c[x][0],width:k(t.data[x]),height:c[x][1],value:t.data[x]});i.node.push({bar:B})}else for(w=0;w<t.value.length;w++){for(B=[],x=0;x<t.value[w].data.length;x++)B.push({x:this.__option.x,y:this.__option.y-this.__option.height+c[x][w][0],width:k(t.value[w].data[x]),height:c[x][w][1],value:t.value[w].data[x]});i.node.push({name:t.value[w].name,bar:B})}return i},e.prototype.bind=function(t,i){return this.__rback=i,this.__oralBar=t,this.__preBar=this.use(this.__oralBar),this.__rback(this.__preBar),this},e.prototype.unbind=function(){return this.__rback=function(){return null},this.__oralBar=null,this.__preBar=null,this},e.prototype.doUpdate=function(){var t=this,e=this.use(this.__oralBar),n=JSON.parse(JSON.stringify(e));return function(t,e,n){arguments.length<2&&(e=400),arguments.length<3&&(n=function(){});var r={timer:function(t,i,e){if(!t)throw new Error("Tick is required!");var n=(new Date).valueOf()+"_"+(1e3*Math.random()).toFixed(0);return a.push({id:n,createTime:new Date,tick:t,duration:i,callback:e}),r.start(),n},start:function(){if(!i)try{i=globalThis&&globalThis.requestAnimationFrame?globalThis.requestAnimationFrame((function t(){r.tick(),i&&(i=globalThis.requestAnimationFrame(t))})):setInterval(r.tick,13)}catch(t){i=setInterval(r.tick,13)}},tick:function(){var t,i,e,n,o,h,u,l=a;for((a=[]).length=0,i=0;i<l.length;i++)t=(o=l[i]).createTime,e=o.tick,h=o.duration,n=o.callback,e(u=(u=(+(new Date).valueOf()-t.valueOf())/h)>1?1:u),u<1&&o.id?a.push(o):n(u);a.length<=0&&r.stop()},stop:function(){if(i){try{globalThis&&globalThis.requestAnimationFrame?globalThis.cancelAnimationFrame(i):clearInterval(i)}catch(t){clearInterval(i)}i=null}}},o=r.timer((function(i){t(i)}),e,n)}((function(i){t.__preBar||t.__rback(n)}),this.__option.duration,(function(){t.__preBar=e,t.__rback(t.__preBar)})),this},e}();export{e as default};
+function t(t,i){for(var a in t)i[a]=t[a];return i}let i,a=[];var e=function(){function e(i){void 0===i&&(i={}),this.name="BarLayout",this.__option={x:50,y:350,width:400,height:300,category:"xAxis",duration:200},this.__config=t(i,{})}return e.prototype.setOption=function(i){return t(i,this.__option),this},e.prototype.use=function(t){var i={coordinate:{x:this.__option.x,y:this.__option.y,width:this.__option.width,height:this.__option.height,xAxis:{type:"xAxis"===this.__option.category?"category":"value",data:[]},yAxis:{type:"xAxis"===this.__option.category?"value":"category",data:[]}},node:[]},a=void 0,e=void 0;if(t.data)for(var n=0,r=t.data;n<r.length;n++){var o=r[n];(void 0===a||o>a)&&(a=o),(void 0===e||o<e)&&(e=o)}else{if(!t.value)throw new Error("No data leads to parsing errors");for(var h=0,s=t.value;h<s.length;h++)for(var u=0,l=s[h].data;u<l.length;u++){o=l[u];(void 0===a||o>a)&&(a=o),(void 0===e||o<e)&&(e=o)}}var _,d,p=function(t,i,a,e){if(t<i){var n=i;i=t,t=n}else if(t==i)return[t];var r=function(t){for(var i=t<100&&t>-100?10:.1,a=-1,e=t;10==i?e>=-100&&e<=100:e<=-100||e>=100;)a+=1,e*=i;if(10==i)return Math.pow(10,a);for(var n="0.",r=1;r<a;r++)n+="0";return+(n+"1")}(t-i),o=Math.ceil((t-i)*r/a),h=function(a){var e=({3:2,4:5,6:5,7:5,8:10,9:10,11:10,12:10,13:15,14:15,16:15,17:15,18:20,19:20,21:20,22:20,23:25,24:25,26:25,27:25}[o+a]||o+a)/r,n=Math.floor(i/e)*e,h=[];h.push(n);for(var s=1;h[h.length-1]<t;s++)h.push(n+e*s);return h},s=h(0),u=function(){for(var t=[],a=s[s.length-1]-(null==e?void 0:e.max),n=0;n<s.length;n++)n+1<s.length&&s[n+1]-a<i||t.push(s[n]-a);return t},l=function(){for(var i=[],a=s[0]-(null==e?void 0:e.min),n=0;n<s.length&&(i[n]=s[n]-a,!(t<=i[n]));n++);return i};if(e){if("max"in e&&"min"in e&&e.max>=t&&e.min<=i){var _=function(){if(s[0]>=e.min&&s[s.length-1]<=e.max)return!0;var t=u();if(t[0]>=e.min&&t[t.length-1]<=e.max)return s=t,!0;var i=l();return i[0]>=e.min&&i[t.length-1]<=e.max?(s=i,!0):void 0};if(_())return s;for(var d=1;d<100;d++){if(s=h(d),_())return s;if(s=h(-d),_())return s}}"max"in e&&e.max>=t?e.max<s[s.length-1]&&(s=u()):"min"in e&&e.min<=i&&e.min>s[0]&&(s=l())}for(var p=0;p<s.length;p++){var f=s[p]+"";/\./.test(f)&&(/9{7,}$/.test(f)?(f=f.replace(/9{7,}$/,""),s[p]=+(f.substring(0,f.length-1)+(+f[f.length-1]+1))):/0{7,}\d$/.test(f)&&(s[p]=+f.replace(/0{7,}\d$/,"")))}return s}(a||0,e||0,5);"xAxis"===this.__option.category?(i.coordinate.xAxis.data=t.category,i.coordinate.yAxis.data=p,_=this.__option.width,d=-1*this.__option.height):(i.coordinate.xAxis.data=p,i.coordinate.yAxis.data=t.category,_=this.__option.height,d=this.__option.width);var f=[],c=_/t.category.length,v=.9*c,g=.05*c;if(t.data)for(var m=0;m<t.data.length;m++)f.push([g+c*m,v]);else{var x=v/t.value.length,y=.9*x,b=.05*x;for(m=0;m<t.value[0].data.length;m++){f[m]=[];for(var w=0;w<t.value.length;w++)f[m].push([g+c*m+x*w+b,y])}}var A=d/(p[p.length-1]-p[0]),k=function(t){return A*(t-p[0])};if("xAxis"===this.__option.category)if(t.data){var T=[];for(m=0;m<t.data.length;m++)T.push({x:this.__option.x+f[m][0],y:this.__option.y,width:f[m][1],height:k(t.data[m]),value:t.data[m]});i.node.push({bar:T})}else for(w=0;w<t.value.length;w++){for(T=[],m=0;m<t.value[w].data.length;m++)T.push({x:this.__option.x+f[m][w][0],y:this.__option.y,width:f[m][w][1],height:k(t.value[w].data[m]),value:t.value[w].data[m]});i.node.push({name:t.value[w].name,bar:T})}else if(t.data){for(T=[],m=0;m<t.data.length;m++)T.push({x:this.__option.x,y:this.__option.y-this.__option.height+f[m][0],width:k(t.data[m]),height:f[m][1],value:t.data[m]});i.node.push({bar:T})}else for(w=0;w<t.value.length;w++){for(T=[],m=0;m<t.value[w].data.length;m++)T.push({x:this.__option.x,y:this.__option.y-this.__option.height+f[m][w][0],width:k(t.value[w].data[m]),height:f[m][w][1],value:t.value[w].data[m]});i.node.push({name:t.value[w].name,bar:T})}return i},e.prototype.bind=function(t,i){return this.__rback=i,this.__oralBar=t,this.__preBar=this.use(this.__oralBar),this.__rback(this.__preBar),this},e.prototype.unbind=function(){return this.__rback=function(){return null},this.__oralBar=null,this.__preBar=null,this},e.prototype.doUpdate=function(){var t=this,e=this.use(this.__oralBar),n=JSON.parse(JSON.stringify(e));return function(t,e,n){arguments.length<2&&(e=400),arguments.length<3&&(n=function(){});let r={timer:function(t,i,e){if(!t)throw new Error("Tick is required!");let n=(new Date).valueOf()+"_"+(1e3*Math.random()).toFixed(0);return a.push({id:n,createTime:new Date,pauseTime:-1,pauseKeepTime:0,status:"running",tick:t,duration:i,callback:e}),r.start(),n},start:function(){if(!i)try{i=globalThis&&globalThis.requestAnimationFrame?globalThis.requestAnimationFrame((function t(){r.tick(),i&&(i=globalThis.requestAnimationFrame(t))})):setInterval(r.tick,13)}catch(t){i=setInterval(r.tick,13)}},tick:function(){let t,i,e,n,o,h,s,u=a;for(a=[],a.length=0,i=0;i<u.length;i++)o=u[i],t=o.createTime,e=o.tick,h=o.duration,n=o.callback,s=(+(new Date).valueOf()-t.valueOf()-o.pauseKeepTime)/h,s=s>1?1:s,"running"===o.status&&e(s),(s<1||"paused"===o.status)&&o.id?a.push(o):n(s);a.length<=0&&r.stop()},stop:function(){if(i){try{globalThis&&globalThis.requestAnimationFrame?globalThis.cancelAnimationFrame(i):clearInterval(i)}catch(t){clearInterval(i)}i=null}}},o=r.timer((function(i){t(i)}),e,n)}((function(i){t.__preBar||t.__rback(n)}),this.__option.duration,(function(){t.__preBar=e,t.__rback(t.__preBar)})),this},e}();export{e as default};

package/lib/PieLayout/index.es.js

@@ -14,11 +14,11 @@ function rotate (cx, cy, deg, x, y) {
 }
 
 //当前正在运动的动画的tick函数堆栈
-var $timers = [];
+let $timers = [];
 //唯一定时器的定时间隔
-var $interval = 13;
+let $interval = 13;
 //定时器ID
-var $timerId;
+let $timerId;
 
 /**
  * 动画轮播
@@ -32,16 +32,19 @@ function animation(doback, duration, callback) {
     if (arguments.length < 2) duration = 400;
     if (arguments.length < 3) callback = function () { };
 
-    var clock = {
+    let clock = {
         //把tick函数推入堆栈
         "timer": function (tick, duration, callback) {
             if (!tick) {
                 throw new Error('Tick is required!');
             }
-            var id = new Date().valueOf() + "_" + (Math.random() * 1000).toFixed(0);
+            let id = new Date().valueOf() + "_" + (Math.random() * 1000).toFixed(0);
             $timers.push({
                 "id": id,
-                "createTime": new Date(),
+                "createTime": new Date(), // 开始时间
+                "pauseTime": -1, // 暂停的时间，继续运行的时候，借助此计算暂停的时间差
+                "pauseKeepTime": 0, // 暂停用去的时间
+                "status": "running", // running(运行中), paused(暂停中)
                 "tick": tick,
                 "duration": duration,
                 "callback": callback
@@ -70,7 +73,7 @@ function animation(doback, duration, callback) {
 
         //被定时器调用，遍历timers堆栈
         "tick": function () {
-            var createTime, flag, tick, callback, timer, duration, passTime, timers = $timers;
+            let createTime, flag, tick, callback, timer, duration, passTime, timers = $timers;
 
             $timers = [];
             $timers.length = 0;
@@ -84,15 +87,21 @@ function animation(doback, duration, callback) {
                 callback = timer.callback;
 
                 //执行
-                passTime = (+new Date().valueOf() - createTime.valueOf()) / duration;
+                passTime = (+new Date().valueOf() - createTime.valueOf() - timer.pauseKeepTime) / duration;
                 passTime = passTime > 1 ? 1 : passTime;
-                tick(passTime);
-                if (passTime < 1 && timer.id) {
+
+                if (timer.status === "running") {
+                    tick(passTime);
+                }
+
+                // 只有当动画没有结束或者动画处于暂停状态时，才继续添加到timers堆栈
+                if ((passTime < 1 || timer.status === "paused") && timer.id) {
                     //动画没有结束再添加
                     $timers.push(timer);
                 } else {
                     callback(passTime);
                 }
+
             }
             if ($timers.length <= 0) {
                 clock.stop();
@@ -113,20 +122,40 @@ function animation(doback, duration, callback) {
         }
     };
 
-    var id = clock.timer(function (deep) {
+    let id = clock.timer(function (deep) {
         //其中deep为0-1，表示改变的程度
         doback(deep);
     }, duration, callback);
 
     return {
-        // 一个函数
-        // 用于在动画结束前结束动画
+        // 结束动画
         stop: function () {
-            var i;
-            for (i in $timers) {
+            for (let i in $timers) {
                 if ($timers[i].id == id) {
                     $timers[i].id = void 0;
-                    return;
+                }
+            }
+        },
+        // 暂停动画
+        pause: function () {
+            for (let i in $timers) {
+                if ($timers[i].id == id) {
+                    if ($timers[i].pauseTime === -1) {
+                        $timers[i].pauseTime = new Date();
+                        $timers[i].status = "paused";
+                    }
+                }
+            }
+        },
+        // 继续动画
+        resume: function () {
+            for (let i in $timers) {
+                if ($timers[i].id == id) {
+                    if ($timers[i].pauseTime !== -1) {
+                        $timers[i].pauseKeepTime += (new Date().valueOf() - $timers[i].pauseTime.valueOf());
+                        $timers[i].pauseTime = -1;
+                        $timers[i].status = "running";
+                    }
                 }
             }
         }

package/lib/PieLayout/index.es.min.js

@@ -1 +1 @@
-function t(t,i){for(var e in t)i[e]=t[e];return i}function i(t,i,e,n,r){var o=Math.cos(e),a=Math.sin(e);return[(n-t)*o-(r-i)*a+t,(n-t)*a+(r-i)*o+i]}var e,n=[];var r=function(){function r(i){void 0===i&&(i={}),this.name="PieLayout",this.__option={cx:200,cy:200,radius:[50,100],duration:200},this.__hoverIndex=-1,this.__config=t(i,{name:function(t,i){return t.name},value:function(t,i){return t.value}})}return r.prototype.setOption=function(i){return t(i,this.__option),this},r.prototype.use=function(t,e){void 0===e&&(e=-1);for(var n={count:t.length,cx:this.__option.cx,cy:this.__option.cy,radius:this.__option.radius,hoverIndex:e,node:[]},r=0,o=[],a=[],s=0;s<t.length;s++)o[s]=this.__config.name(t[s],t),a[s]=this.__config.value(t[s],t),r+=a[s];var u,_=-.5*Math.PI;for(s=0;s<t.length;s++){u=a[s]/r*Math.PI*2;var h=[this.__option.radius[0]*(1+(this.__option.radius[0]>0&&e===s?-.1:0)),this.__option.radius[1]*(1+(e===s?.05:0))],c=_+.5*u,l=Math.max(this.__option.radius[0],this.__option.radius[1]),d=i(n.cx,n.cy,c,n.cx+l,n.cy),p=i(n.cx,n.cy,c,n.cx+l+15,n.cy),f=d[0]>n.cx?1:-1,v=[p[0]+20*f,p[1]],g=[p[0]+25*f,p[1]];n.node[s]={value:a[s],name:o[s],beginDeg:_,deg:u,isHover:e===s,radius:h,label:{line:[d,p,v],position:g,align:-1===f?"right":"left"}},_+=u}return n},r.prototype.bind=function(t,i){return this.__rback=i,this.__oralPie=t,this.__prePie=this.use(this.__oralPie,this.__hoverIndex),this.__rback(this.__prePie),this},r.prototype.unbind=function(){return this.__rback=function(){return null},this.__oralPie=null,this.__prePie=null,this.__hoverIndex=-1,this},r.prototype.setHover=function(t){return this.__prePie&&this.__hoverIndex!==t?(this.__hoverIndex=t,this.doUpdate(),this):this},r.prototype.doUpdate=function(){var t=this,i=this.use(this.__oralPie,this.__hoverIndex),r=JSON.parse(JSON.stringify(i));return function(t,i,r){arguments.length<2&&(i=400),arguments.length<3&&(r=function(){});var o={timer:function(t,i,e){if(!t)throw new Error("Tick is required!");var r=(new Date).valueOf()+"_"+(1e3*Math.random()).toFixed(0);return n.push({id:r,createTime:new Date,tick:t,duration:i,callback:e}),o.start(),r},start:function(){if(!e)try{e=globalThis&&globalThis.requestAnimationFrame?globalThis.requestAnimationFrame((function t(){o.tick(),e&&(e=globalThis.requestAnimationFrame(t))})):setInterval(o.tick,13)}catch(t){e=setInterval(o.tick,13)}},tick:function(){var t,i,e,r,a,s,u,_=n;for((n=[]).length=0,i=0;i<_.length;i++)t=(a=_[i]).createTime,e=a.tick,s=a.duration,r=a.callback,e(u=(u=(+(new Date).valueOf()-t.valueOf())/s)>1?1:u),u<1&&a.id?n.push(a):r(u);n.length<=0&&o.stop()},stop:function(){if(e){try{globalThis&&globalThis.requestAnimationFrame?globalThis.cancelAnimationFrame(e):clearInterval(e)}catch(t){clearInterval(e)}e=null}}},a=o.timer((function(i){t(i)}),i,r)}((function(e){if(t.__prePie)for(var n=0;n<r.count;n++)r.node[n].radius[0]=t.__prePie.node[n].radius[0]+(i.node[n].radius[0]-t.__prePie.node[n].radius[0])*e,r.node[n].radius[1]=t.__prePie.node[n].radius[1]+(i.node[n].radius[1]-t.__prePie.node[n].radius[1])*e;t.__rback(r)}),this.__option.duration,(function(){t.__prePie=i,t.__rback(t.__prePie)})),this},r}();export{r as default};
+function t(t,i){for(var e in t)i[e]=t[e];return i}function i(t,i,e,n,r){var o=Math.cos(e),a=Math.sin(e);return[(n-t)*o-(r-i)*a+t,(n-t)*a+(r-i)*o+i]}let e,n=[];var r=function(){function r(i){void 0===i&&(i={}),this.name="PieLayout",this.__option={cx:200,cy:200,radius:[50,100],duration:200},this.__hoverIndex=-1,this.__config=t(i,{name:function(t,i){return t.name},value:function(t,i){return t.value}})}return r.prototype.setOption=function(i){return t(i,this.__option),this},r.prototype.use=function(t,e){void 0===e&&(e=-1);for(var n={count:t.length,cx:this.__option.cx,cy:this.__option.cy,radius:this.__option.radius,hoverIndex:e,node:[]},r=0,o=[],a=[],s=0;s<t.length;s++)o[s]=this.__config.name(t[s],t),a[s]=this.__config.value(t[s],t),r+=a[s];var u,_=-.5*Math.PI;for(s=0;s<t.length;s++){u=a[s]/r*Math.PI*2;var h=[this.__option.radius[0]*(1+(this.__option.radius[0]>0&&e===s?-.1:0)),this.__option.radius[1]*(1+(e===s?.05:0))],c=_+.5*u,l=Math.max(this.__option.radius[0],this.__option.radius[1]),d=i(n.cx,n.cy,c,n.cx+l,n.cy),p=i(n.cx,n.cy,c,n.cx+l+15,n.cy),f=d[0]>n.cx?1:-1,v=[p[0]+20*f,p[1]],g=[p[0]+25*f,p[1]];n.node[s]={value:a[s],name:o[s],beginDeg:_,deg:u,isHover:e===s,radius:h,label:{line:[d,p,v],position:g,align:-1===f?"right":"left"}},_+=u}return n},r.prototype.bind=function(t,i){return this.__rback=i,this.__oralPie=t,this.__prePie=this.use(this.__oralPie,this.__hoverIndex),this.__rback(this.__prePie),this},r.prototype.unbind=function(){return this.__rback=function(){return null},this.__oralPie=null,this.__prePie=null,this.__hoverIndex=-1,this},r.prototype.setHover=function(t){return this.__prePie&&this.__hoverIndex!==t?(this.__hoverIndex=t,this.doUpdate(),this):this},r.prototype.doUpdate=function(){var t=this,i=this.use(this.__oralPie,this.__hoverIndex),r=JSON.parse(JSON.stringify(i));return function(t,i,r){arguments.length<2&&(i=400),arguments.length<3&&(r=function(){});let o={timer:function(t,i,e){if(!t)throw new Error("Tick is required!");let r=(new Date).valueOf()+"_"+(1e3*Math.random()).toFixed(0);return n.push({id:r,createTime:new Date,pauseTime:-1,pauseKeepTime:0,status:"running",tick:t,duration:i,callback:e}),o.start(),r},start:function(){if(!e)try{e=globalThis&&globalThis.requestAnimationFrame?globalThis.requestAnimationFrame((function t(){o.tick(),e&&(e=globalThis.requestAnimationFrame(t))})):setInterval(o.tick,13)}catch(t){e=setInterval(o.tick,13)}},tick:function(){let t,i,e,r,a,s,u,_=n;for(n=[],n.length=0,i=0;i<_.length;i++)a=_[i],t=a.createTime,e=a.tick,s=a.duration,r=a.callback,u=(+(new Date).valueOf()-t.valueOf()-a.pauseKeepTime)/s,u=u>1?1:u,"running"===a.status&&e(u),(u<1||"paused"===a.status)&&a.id?n.push(a):r(u);n.length<=0&&o.stop()},stop:function(){if(e){try{globalThis&&globalThis.requestAnimationFrame?globalThis.cancelAnimationFrame(e):clearInterval(e)}catch(t){clearInterval(e)}e=null}}},a=o.timer((function(i){t(i)}),i,r)}((function(e){if(t.__prePie)for(var n=0;n<r.count;n++)r.node[n].radius[0]=t.__prePie.node[n].radius[0]+(i.node[n].radius[0]-t.__prePie.node[n].radius[0])*e,r.node[n].radius[1]=t.__prePie.node[n].radius[1]+(i.node[n].radius[1]-t.__prePie.node[n].radius[1])*e;t.__rback(r)}),this.__option.duration,(function(){t.__prePie=i,t.__rback(t.__prePie)})),this},r}();export{r as default};

package/lib/TreeLayout/index.es.js

@@ -184,11 +184,11 @@ var Tree = (function () {
 }());
 
 //当前正在运动的动画的tick函数堆栈
-var $timers = [];
+let $timers = [];
 //唯一定时器的定时间隔
-var $interval = 13;
+let $interval = 13;
 //定时器ID
-var $timerId;
+let $timerId;
 
 /**
  * 动画轮播
@@ -202,16 +202,19 @@ function animation(doback, duration, callback) {
     if (arguments.length < 2) duration = 400;
     if (arguments.length < 3) callback = function () { };
 
-    var clock = {
+    let clock = {
         //把tick函数推入堆栈
         "timer": function (tick, duration, callback) {
             if (!tick) {
                 throw new Error('Tick is required!');
             }
-            var id = new Date().valueOf() + "_" + (Math.random() * 1000).toFixed(0);
+            let id = new Date().valueOf() + "_" + (Math.random() * 1000).toFixed(0);
             $timers.push({
                 "id": id,
-                "createTime": new Date(),
+                "createTime": new Date(), // 开始时间
+                "pauseTime": -1, // 暂停的时间，继续运行的时候，借助此计算暂停的时间差
+                "pauseKeepTime": 0, // 暂停用去的时间
+                "status": "running", // running(运行中), paused(暂停中)
                 "tick": tick,
                 "duration": duration,
                 "callback": callback
@@ -240,7 +243,7 @@ function animation(doback, duration, callback) {
 
         //被定时器调用，遍历timers堆栈
         "tick": function () {
-            var createTime, flag, tick, callback, timer, duration, passTime, timers = $timers;
+            let createTime, flag, tick, callback, timer, duration, passTime, timers = $timers;
 
             $timers = [];
             $timers.length = 0;
@@ -254,15 +257,21 @@ function animation(doback, duration, callback) {
                 callback = timer.callback;
 
                 //执行
-                passTime = (+new Date().valueOf() - createTime.valueOf()) / duration;
+                passTime = (+new Date().valueOf() - createTime.valueOf() - timer.pauseKeepTime) / duration;
                 passTime = passTime > 1 ? 1 : passTime;
-                tick(passTime);
-                if (passTime < 1 && timer.id) {
+
+                if (timer.status === "running") {
+                    tick(passTime);
+                }
+
+                // 只有当动画没有结束或者动画处于暂停状态时，才继续添加到timers堆栈
+                if ((passTime < 1 || timer.status === "paused") && timer.id) {
                     //动画没有结束再添加
                     $timers.push(timer);
                 } else {
                     callback(passTime);
                 }
+
             }
             if ($timers.length <= 0) {
                 clock.stop();
@@ -283,20 +292,40 @@ function animation(doback, duration, callback) {
         }
     };
 
-    var id = clock.timer(function (deep) {
+    let id = clock.timer(function (deep) {
         //其中deep为0-1，表示改变的程度
         doback(deep);
     }, duration, callback);
 
     return {
-        // 一个函数
-        // 用于在动画结束前结束动画
+        // 结束动画
         stop: function () {
-            var i;
-            for (i in $timers) {
+            for (let i in $timers) {
                 if ($timers[i].id == id) {
                     $timers[i].id = void 0;
-                    return;
+                }
+            }
+        },
+        // 暂停动画
+        pause: function () {
+            for (let i in $timers) {
+                if ($timers[i].id == id) {
+                    if ($timers[i].pauseTime === -1) {
+                        $timers[i].pauseTime = new Date();
+                        $timers[i].status = "paused";
+                    }
+                }
+            }
+        },
+        // 继续动画
+        resume: function () {
+            for (let i in $timers) {
+                if ($timers[i].id == id) {
+                    if ($timers[i].pauseTime !== -1) {
+                        $timers[i].pauseKeepTime += (new Date().valueOf() - $timers[i].pauseTime.valueOf());
+                        $timers[i].pauseTime = -1;
+                        $timers[i].status = "running";
+                    }
                 }
             }
         }