update version to 2.9.9

CHANGELOG.md

@@ -1,3 +1,49 @@
+# 2.9.9-alpha (2020-08-25)
+
+### Optmization
+
+- **borderBox:** Canonical class name.
+- **autoResize(mixin):** Add exception prompt.
+
+# 2.9.8-alpha (2020-08-20)
+
+### Optmization
+
+- **scrollRankingBoard:** Add value formatter.
+
+# 2.9.7-alpha (2020-08-19)
+
+### Optmization
+
+- **scrollBoard:** Optimize the update effect of updateRows.
+
+# 2.9.6-alpha (2020-08-05)
+
+### Bug Fixes
+
+- **scrollBoard:** Carousel is abnormal when carousel is page.
+- **scrollRankingBoard:** Carousel is abnormal when carousel is page.
+
+# 2.9.5-alpha (2020-08-05)
+
+### Optmization
+
+- **scrollBoard:** Reduce redundant node rendering.
+- **scrollRankingBoard:** Reduce redundant node rendering.
+- **scrollBoard:** Add api to update row data.
+
+# 2.9.4-alpha (2020-07-03)
+
+### Optmization
+
+- **scrollBoard:** Optimize key value [(#8)](https://github.com/DataV-Team/DataV-React/issues/8).
+
+# 2.9.3-alpha (2020-07-02)
+
+### Perfect
+
+- **uuid:** Optimization of `-` in uuid will cause abnormal svg animation [(#108)](https://github.com/DataV-Team/DataV/issues/108).
+
 # 2.9.2-alpha (2020-06-16)
 
 ### Bug Fixes
@@ -8,7 +54,7 @@
 
 ### Bug Fixes
 
-- **scrollRankingBoard:** Calculation optimization of negative values. [(#101)](https://github.com/DataV-Team/DataV/pull/101).
+- **scrollRankingBoard:** Calculation optimization of negative values [(#101)](https://github.com/DataV-Team/DataV/pull/101).
 
 ### Perfect
 
@@ -112,7 +158,7 @@
 
 # 2.4.7-alpha (2019-10-24)
 
-### perfect
+### Perfect
 
 - **charts:** Optimize memory leaks.
 - **digitalFlop:** Optimize memory leaks.

dist/datav.map.vue.js

@@ -38,8 +38,8 @@
     const minusY = Math.abs(pointOne[1] - pointTwo[1]);
     return Math.sqrt(minusX * minusX + minusY * minusY);
   }
-  function uuid() {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+  function uuid(hasHyphen) {
+    return (hasHyphen ? 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' : 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx').replace(/[xy]/g, function (c) {
       const r = Math.random() * 16 | 0;
       const v = c == 'x' ? r : r & 0x3 | 0x8;
       return v.toString(16);
@@ -23018,7 +23018,8 @@
         aligns: [],
         animationIndex: 0,
         animationHandler: '',
-        updater: 0
+        updater: 0,
+        needCalc: false
       };
     },
 
@@ -23208,6 +23209,18 @@
       },
 
       async animation(start = false) {
+        const {
+          needCalc,
+          calcHeights,
+          calcRowsData
+        } = this;
+
+        if (needCalc) {
+          calcRowsData();
+          calcHeights();
+          this.needCalc = false;
+        }
+
         let {
           avgHeight,
           animationIndex,
@@ -23232,7 +23245,7 @@
         const animationNum = carousel === 'single' ? 1 : rowNum;
         let rows = rowsData.slice(animationIndex);
         rows.push(...rowsData.slice(0, animationIndex));
-        this.rows = rows;
+        this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1);
         this.heights = new Array(rowLength).fill(avgHeight);
         await new Promise(resolve => setTimeout(resolve, 300));
         if (updater !== this.updater) return;
@@ -23265,6 +23278,20 @@
           rowIndex,
           columnIndex: ci
         });
+      },
+
+      updateRows(rows, animationIndex) {
+        const {
+          mergedConfig,
+          animationHandler,
+          animation
+        } = this;
+        this.mergedConfig = { ...mergedConfig,
+          data: [...rows]
+        };
+        this.needCalc = true;
+        if (typeof animationIndex === 'number') this.animationIndex = animationIndex;
+        if (!animationHandler) animation(true);
       }
 
     },
@@ -23296,7 +23323,7 @@
             },
             _vm._l(_vm.header, function(headerItem, i) {
               return _c("div", {
-                key: headerItem + i,
+                key: "" + headerItem + i,
                 staticClass: "header-item",
                 style:
                   "\n        height: " +
@@ -23329,7 +23356,7 @@
               return _c(
                 "div",
                 {
-                  key: row.toString() + row.scroll,
+                  key: "" + row.toString() + row.scroll,
                   staticClass: "row-item",
                   style:
                     "\n        height: " +
@@ -23344,7 +23371,7 @@
                 },
                 _vm._l(row.ceils, function(ceil, ci) {
                   return _c("div", {
-                    key: ceil + ri + ci,
+                    key: "" + ceil + ri + ci,
                     staticClass: "ceil",
                     style: "width: " + _vm.widths[ci] + "px;",
                     attrs: { align: _vm.aligns[ci] },
@@ -23376,7 +23403,7 @@
     /* style */
     const __vue_inject_styles__$z = function (inject) {
       if (!inject) return
-      inject("data-v-5d3c4f07_0", { source: ".dv-scroll-board {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n}\n.dv-scroll-board .text {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n  display: flex;\n  flex-direction: row;\n  font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n  overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n  display: flex;\n  font-size: 14px;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n  border-radius: 3px;\n  padding: 0px 3px;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,WAAW;AACb;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,aAAa;EACb,mBAAmB;EACnB,eAAe;AACjB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;EACvB,oBAAoB;AACtB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,aAAa;EACb,eAAe;EACf,oBAAoB;AACtB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,kBAAkB;EAClB,gBAAgB;AAClB","file":"main.vue","sourcesContent":[".dv-scroll-board {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n}\n.dv-scroll-board .text {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n  display: flex;\n  flex-direction: row;\n  font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n  overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n  display: flex;\n  font-size: 14px;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n  border-radius: 3px;\n  padding: 0px 3px;\n}\n"]}, media: undefined });
+      inject("data-v-26e19f4c_0", { source: ".dv-scroll-board {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n}\n.dv-scroll-board .text {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n  display: flex;\n  flex-direction: row;\n  font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n  overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n  display: flex;\n  font-size: 14px;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n  border-radius: 3px;\n  padding: 0px 3px;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,WAAW;AACb;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,aAAa;EACb,mBAAmB;EACnB,eAAe;AACjB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;EACvB,oBAAoB;AACtB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,aAAa;EACb,eAAe;EACf,oBAAoB;AACtB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,kBAAkB;EAClB,gBAAgB;AAClB","file":"main.vue","sourcesContent":[".dv-scroll-board {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n}\n.dv-scroll-board .text {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n  display: flex;\n  flex-direction: row;\n  font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n  overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n  display: flex;\n  font-size: 14px;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n  border-radius: 3px;\n  padding: 0px 3px;\n}\n"]}, media: undefined });
 
     };
     /* scoped */
@@ -23465,7 +23492,14 @@
            * @type {Boolean}
            * @default sort = true
            */
-          sort: true
+          sort: true,
+
+          /**
+           * @description Value formatter
+           * @type {Function}
+           * @default valueFormatter = null
+           */
+          valueFormatter: null
         },
         mergedConfig: null,
         rowsData: [],
@@ -23609,7 +23643,7 @@
         const animationNum = carousel === 'single' ? 1 : rowNum;
         let rows = rowsData.slice(animationIndex);
         rows.push(...rowsData.slice(0, animationIndex));
-        this.rows = rows;
+        this.rows = rows.slice(0, rowNum + 1);
         this.heights = new Array(rowLength).fill(avgHeight);
         await new Promise(resolve => setTimeout(resolve, 300));
         if (updater !== this.updater) return;
@@ -23673,7 +23707,13 @@
               }),
               _vm._v(" "),
               _c("div", { staticClass: "ranking-value" }, [
-                _vm._v(_vm._s(item.value + _vm.mergedConfig.unit))
+                _vm._v(
+                  _vm._s(
+                    _vm.mergedConfig.valueFormatter
+                      ? _vm.mergedConfig.valueFormatter(item)
+                      : item.value + _vm.mergedConfig.unit
+                  )
+                )
               ])
             ]),
             _vm._v(" "),
@@ -23699,7 +23739,7 @@
     /* style */
     const __vue_inject_styles__$A = function (inject) {
       if (!inject) return
-      inject("data-v-226dd7bc_0", { source: ".dv-scroll-ranking-board {\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .row-item {\n  transition: all 0.3s;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-info {\n  display: flex;\n  width: 100%;\n  font-size: 13px;\n}\n.dv-scroll-ranking-board .ranking-info .rank {\n  width: 40px;\n  color: #1370fb;\n}\n.dv-scroll-ranking-board .ranking-info .info-name {\n  flex: 1;\n}\n.dv-scroll-ranking-board .ranking-column {\n  border-bottom: 2px solid rgba(19, 112, 251, 0.5);\n  margin-top: 5px;\n}\n.dv-scroll-ranking-board .ranking-column .inside-column {\n  position: relative;\n  height: 6px;\n  background-color: #1370fb;\n  margin-bottom: 2px;\n  border-radius: 1px;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-column .shine {\n  position: absolute;\n  left: 0%;\n  top: 2px;\n  height: 2px;\n  width: 50px;\n  transform: translateX(-100%);\n  background: radial-gradient(#28f8ff 5%, transparent 80%);\n  animation: shine 3s ease-in-out infinite alternate;\n}\n@keyframes shine {\n80% {\n    left: 0%;\n    transform: translateX(-100%);\n}\n100% {\n    left: 100%;\n    transform: translateX(0%);\n}\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,WAAW;EACX,gBAAgB;AAClB;AACA;EACE,oBAAoB;EACpB,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EACvB,gBAAgB;AAClB;AACA;EACE,aAAa;EACb,WAAW;EACX,eAAe;AACjB;AACA;EACE,WAAW;EACX,cAAc;AAChB;AACA;EACE,OAAO;AACT;AACA;EACE,gDAAgD;EAChD,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,yBAAyB;EACzB,kBAAkB;EAClB,kBAAkB;EAClB,gBAAgB;AAClB;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,QAAQ;EACR,WAAW;EACX,WAAW;EACX,4BAA4B;EAC5B,wDAAwD;EACxD,kDAAkD;AACpD;AACA;AACE;IACE,QAAQ;IACR,4BAA4B;AAC9B;AACA;IACE,UAAU;IACV,yBAAyB;AAC3B;AACF","file":"main.vue","sourcesContent":[".dv-scroll-ranking-board {\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .row-item {\n  transition: all 0.3s;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-info {\n  display: flex;\n  width: 100%;\n  font-size: 13px;\n}\n.dv-scroll-ranking-board .ranking-info .rank {\n  width: 40px;\n  color: #1370fb;\n}\n.dv-scroll-ranking-board .ranking-info .info-name {\n  flex: 1;\n}\n.dv-scroll-ranking-board .ranking-column {\n  border-bottom: 2px solid rgba(19, 112, 251, 0.5);\n  margin-top: 5px;\n}\n.dv-scroll-ranking-board .ranking-column .inside-column {\n  position: relative;\n  height: 6px;\n  background-color: #1370fb;\n  margin-bottom: 2px;\n  border-radius: 1px;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-column .shine {\n  position: absolute;\n  left: 0%;\n  top: 2px;\n  height: 2px;\n  width: 50px;\n  transform: translateX(-100%);\n  background: radial-gradient(#28f8ff 5%, transparent 80%);\n  animation: shine 3s ease-in-out infinite alternate;\n}\n@keyframes shine {\n  80% {\n    left: 0%;\n    transform: translateX(-100%);\n  }\n  100% {\n    left: 100%;\n    transform: translateX(0%);\n  }\n}\n"]}, media: undefined });
+      inject("data-v-f297519a_0", { source: ".dv-scroll-ranking-board {\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .row-item {\n  transition: all 0.3s;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-info {\n  display: flex;\n  width: 100%;\n  font-size: 13px;\n}\n.dv-scroll-ranking-board .ranking-info .rank {\n  width: 40px;\n  color: #1370fb;\n}\n.dv-scroll-ranking-board .ranking-info .info-name {\n  flex: 1;\n}\n.dv-scroll-ranking-board .ranking-column {\n  border-bottom: 2px solid rgba(19, 112, 251, 0.5);\n  margin-top: 5px;\n}\n.dv-scroll-ranking-board .ranking-column .inside-column {\n  position: relative;\n  height: 6px;\n  background-color: #1370fb;\n  margin-bottom: 2px;\n  border-radius: 1px;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-column .shine {\n  position: absolute;\n  left: 0%;\n  top: 2px;\n  height: 2px;\n  width: 50px;\n  transform: translateX(-100%);\n  background: radial-gradient(#28f8ff 5%, transparent 80%);\n  animation: shine 3s ease-in-out infinite alternate;\n}\n@keyframes shine {\n80% {\n    left: 0%;\n    transform: translateX(-100%);\n}\n100% {\n    left: 100%;\n    transform: translateX(0%);\n}\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,WAAW;EACX,gBAAgB;AAClB;AACA;EACE,oBAAoB;EACpB,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EACvB,gBAAgB;AAClB;AACA;EACE,aAAa;EACb,WAAW;EACX,eAAe;AACjB;AACA;EACE,WAAW;EACX,cAAc;AAChB;AACA;EACE,OAAO;AACT;AACA;EACE,gDAAgD;EAChD,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,yBAAyB;EACzB,kBAAkB;EAClB,kBAAkB;EAClB,gBAAgB;AAClB;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,QAAQ;EACR,WAAW;EACX,WAAW;EACX,4BAA4B;EAC5B,wDAAwD;EACxD,kDAAkD;AACpD;AACA;AACE;IACE,QAAQ;IACR,4BAA4B;AAC9B;AACA;IACE,UAAU;IACV,yBAAyB;AAC3B;AACF","file":"main.vue","sourcesContent":[".dv-scroll-ranking-board {\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .row-item {\n  transition: all 0.3s;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-info {\n  display: flex;\n  width: 100%;\n  font-size: 13px;\n}\n.dv-scroll-ranking-board .ranking-info .rank {\n  width: 40px;\n  color: #1370fb;\n}\n.dv-scroll-ranking-board .ranking-info .info-name {\n  flex: 1;\n}\n.dv-scroll-ranking-board .ranking-column {\n  border-bottom: 2px solid rgba(19, 112, 251, 0.5);\n  margin-top: 5px;\n}\n.dv-scroll-ranking-board .ranking-column .inside-column {\n  position: relative;\n  height: 6px;\n  background-color: #1370fb;\n  margin-bottom: 2px;\n  border-radius: 1px;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-column .shine {\n  position: absolute;\n  left: 0%;\n  top: 2px;\n  height: 2px;\n  width: 50px;\n  transform: translateX(-100%);\n  background: radial-gradient(#28f8ff 5%, transparent 80%);\n  animation: shine 3s ease-in-out infinite alternate;\n}\n@keyframes shine {\n  80% {\n    left: 0%;\n    transform: translateX(-100%);\n  }\n  100% {\n    left: 100%;\n    transform: translateX(0%);\n  }\n}\n"]}, media: undefined });
 
     };
     /* scoped */

dist/datav.min.vue.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):t((e=e||self).Vue)}(this,(function(e){"use strict";function t(e,t){return 1===arguments.length?parseInt(Math.random()*e+1,10):parseInt(Math.random()*(t-e+1)+e,10)}function n(e,t){const n=Math.abs(e[0]-t[0]),r=Math.abs(e[1]-t[1]);return Math.sqrt(n*n+r*r)}function r(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,(function(e){const t=16*Math.random()|0;return("x"==e?t:3&t|8).toString(16)}))}e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e;var i={data:()=>({dom:"",width:0,height:0,debounceInitWHFun:"",domObserver:""}),methods:{async autoResizeMixinInit(){const{initWH:e,getDebounceInitWHFun:t,bindDomResizeCallback:n,afterAutoResizeMixinInit:r}=this;await e(!1),t(),n(),"function"==typeof r&&r()},initWH(e=!0){const{$nextTick:t,$refs:n,ref:r,onResize:i}=this;return new Promise(o=>{t(t=>{const a=this.dom=n[r];this.width=a.clientWidth,this.height=a.clientHeight,"function"==typeof i&&e&&i(),o()})})},getDebounceInitWHFun(){const{initWH:e}=this;this.debounceInitWHFun=function(e,t){let n;return function(){clearTimeout(n);const[r,i]=[this,arguments];n=setTimeout(()=>{t.apply(r,i)},e)}}(100,e)},bindDomResizeCallback(){const{dom:e,debounceInitWHFun:t}=this;this.domObserver=function(e,t){const n=new(window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver)(t);return n.observe(e,{attributes:!0,attributeFilter:["style"],attributeOldValue:!0}),n}(e,t),window.addEventListener("resize",t)},unbindDomResizeCallback(){let{domObserver:e,debounceInitWHFun:t}=this;e.disconnect(),e.takeRecords(),e=null,window.removeEventListener("resize",t)}},mounted(){const{autoResizeMixinInit:e}=this;e()},beforeDestroy(){const{unbindDomResizeCallback:e}=this;e()}},o={name:"DvFullScreenContainer",mixins:[i],data:()=>({ref:"full-screen-container",allWidth:0,scale:0,datavRoot:"",ready:!1}),methods:{afterAutoResizeMixinInit(){const{initConfig:e,setAppScale:t}=this;e(),t(),this.ready=!0},initConfig(){const{dom:e}=this,{width:t,height:n}=screen;this.allWidth=t,e.style.width=t+"px",e.style.height=n+"px"},setAppScale(){const{allWidth:e,dom:t}=this,n=document.body.clientWidth;t.style.transform=`scale(${n/e})`},onResize(){const{setAppScale:e}=this;e()}}};function a(e,t,n,r,i,o,a,s,l,d){"boolean"!=typeof a&&(l=s,s=a,a=!1);const c="function"==typeof n?n.options:n;let u;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),r&&(c._scopeId=r),o?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},c._ssrRegister=u):t&&(u=a?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),u)if(c.functional){const e=c.render;c.render=function(t,n){return u.call(n),e(t,n)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,u):[u]}return n}const s="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function l(e){return(e,t)=>function(e,t){const n=s?t.media||"default":e,r=c[n]||(c[n]={ids:new Set,styles:[]});if(!r.ids.has(e)){r.ids.add(e);let n=t.source;if(t.map&&(n+="\n/*# sourceURL="+t.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",t.media&&r.element.setAttribute("media",t.media),void 0===d&&(d=document.head||document.getElementsByTagName("head")[0]),d.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(n),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{const e=r.ids.size-1,t=document.createTextNode(n),i=r.element.childNodes;i[e]&&r.element.removeChild(i[e]),i.length?r.element.insertBefore(t,i[e]):r.element.appendChild(t)}}}(e,t)}let d;const c={};const u=o;var f=function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:this.ref,attrs:{id:"dv-full-screen-container"}},[this.ready?[this._t("default")]:this._e()],2)};f._withStripped=!0;const h=a({render:f,staticRenderFns:[]},(function(e){e&&e("data-v-2da16e2c_0",{source:"#dv-full-screen-container {\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  overflow: hidden;\n  transform-origin: left top;\n  z-index: 999;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,eAAe;EACf,QAAQ;EACR,SAAS;EACT,gBAAgB;EAChB,0BAA0B;EAC1B,YAAY;AACd",file:"main.vue",sourcesContent:["#dv-full-screen-container {\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  overflow: hidden;\n  transform-origin: left top;\n  z-index: 999;\n}\n"]},media:void 0})}),u,void 0,!1,void 0,!1,l,void 0,void 0);function p(e){e.component(h.name,h)}const g={name:"DvLoading"};var v=function(){var e=thLine truncated
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):t((e=e||self).Vue)}(this,(function(e){"use strict";function t(e,t){return 1===arguments.length?parseInt(Math.random()*e+1,10):parseInt(Math.random()*(t-e+1)+e,10)}function n(e,t){const n=Math.abs(e[0]-t[0]),r=Math.abs(e[1]-t[1]);return Math.sqrt(n*n+r*r)}function r(e){return(e?"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx":"xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx").replace(/[xy]/g,(function(e){const t=16*Math.random()|0;return("x"==e?t:3&t|8).toString(16)}))}e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e;var i={data:()=>({dom:"",width:0,height:0,debounceInitWHFun:"",domObserver:""}),methods:{async autoResizeMixinInit(){const{initWH:e,getDebounceInitWHFun:t,bindDomResizeCallback:n,afterAutoResizeMixinInit:r}=this;await e(!1),t(),n(),"function"==typeof r&&r()},initWH(e=!0){const{$nextTick:t,$refs:n,ref:r,onResize:i}=this;return new Promise(o=>{t(t=>{const a=this.dom=n[r];this.width=a.clientWidth,this.height=a.clientHeight,"function"==typeof i&&e&&i(),o()})})},getDebounceInitWHFun(){const{initWH:e}=this;this.debounceInitWHFun=function(e,t){let n;return function(){clearTimeout(n);const[r,i]=[this,arguments];n=setTimeout(()=>{t.apply(r,i)},e)}}(100,e)},bindDomResizeCallback(){const{dom:e,debounceInitWHFun:t}=this;this.domObserver=function(e,t){const n=new(window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver)(t);return n.observe(e,{attributes:!0,attributeFilter:["style"],attributeOldValue:!0}),n}(e,t),window.addEventListener("resize",t)},unbindDomResizeCallback(){let{domObserver:e,debounceInitWHFun:t}=this;e.disconnect(),e.takeRecords(),e=null,window.removeEventListener("resize",t)}},mounted(){const{autoResizeMixinInit:e}=this;e()},beforeDestroy(){const{unbindDomResizeCallback:e}=this;e()}},o={name:"DvFullScreenContainer",mixins:[i],data:()=>({ref:"full-screen-container",allWidth:0,scale:0,datavRoot:"",ready:!1}),methods:{afterAutoResizeMixinInit(){const{initConfig:e,setAppScale:t}=this;e(),t(),this.ready=!0},initConfig(){const{dom:e}=this,{width:t,height:n}=screen;this.allWidth=t,e.style.width=t+"px",e.style.height=n+"px"},setAppScale(){const{allWidth:e,dom:t}=this,n=document.body.clientWidth;t.style.transform=`scale(${n/e})`},onResize(){const{setAppScale:e}=this;e()}}};function a(e,t,n,r,i,o,a,s,l,d){"boolean"!=typeof a&&(l=s,s=a,a=!1);const c="function"==typeof n?n.options:n;let u;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),r&&(c._scopeId=r),o?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},c._ssrRegister=u):t&&(u=a?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),u)if(c.functional){const e=c.render;c.render=function(t,n){return u.call(n),e(t,n)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,u):[u]}return n}const s="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function l(e){return(e,t)=>function(e,t){const n=s?t.media||"default":e,r=c[n]||(c[n]={ids:new Set,styles:[]});if(!r.ids.has(e)){r.ids.add(e);let n=t.source;if(t.map&&(n+="\n/*# sourceURL="+t.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",t.media&&r.element.setAttribute("media",t.media),void 0===d&&(d=document.head||document.getElementsByTagName("head")[0]),d.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(n),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{const e=r.ids.size-1,t=document.createTextNode(n),i=r.element.childNodes;i[e]&&r.element.removeChild(i[e]),i.length?r.element.insertBefore(t,i[e]):r.element.appendChild(t)}}}(e,t)}let d;const c={};const u=o;var f=function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:this.ref,attrs:{id:"dv-full-screen-container"}},[this.ready?[this._t("default")]:this._e()],2)};f._withStripped=!0;const h=a({render:f,staticRenderFns:[]},(function(e){e&&e("data-v-2da16e2c_0",{source:"#dv-full-screen-container {\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  overflow: hidden;\n  transform-origin: left top;\n  z-index: 999;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,eAAe;EACf,QAAQ;EACR,SAAS;EACT,gBAAgB;EAChB,0BAA0B;EAC1B,YAAY;AACd",file:"main.vue",sourcesContent:["#dv-full-screen-container {\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  overflow: hidden;\n  transform-origin: left top;\n  z-index: 999;\n}\n"]},media:void 0})}),u,void 0,!1,void 0,!1,l,void 0,void 0);function p(e){e.component(h.name,h)}const g={namLine truncated

lib/components/scrollBoard/src/main.vue

@@ -4,7 +4,7 @@
       <div
         class="header-item"
         v-for="(headerItem, i) in header"
-        :key="headerItem + i"
+        :key="`${headerItem}${i}`"
         :style="`
           height: ${mergedConfig.headerHeight}px;
           line-height: ${mergedConfig.headerHeight}px;
@@ -23,7 +23,7 @@
       <div
         class="row-item"
         v-for="(row, ri) in rows"
-        :key="row.toString() + row.scroll"
+        :key="`${row.toString()}${row.scroll}`"
         :style="`
           height: ${heights[ri]}px;
           line-height: ${heights[ri]}px;
@@ -33,7 +33,7 @@
         <div
           class="ceil"
           v-for="(ceil, ci) in row.ceils"
-          :key="ceil + ri + ci"
+          :key="`${ceil}${ri}${ci}`"
           :style="`width: ${widths[ci]}px;`"
           :align="aligns[ci]"
           v-html="ceil"
@@ -178,7 +178,9 @@ export default {
 
       animationHandler: '',
 
-      updater: 0
+      updater: 0,
+
+      needCalc: false
     }
   },
   watch: {
@@ -335,6 +337,14 @@ export default {
       this.aligns = deepMerge(aligns, align)
     },
     async animation (start = false) {
+      const { needCalc, calcHeights, calcRowsData } = this
+
+      if (needCalc) {
+        calcRowsData()
+        calcHeights()
+        this.needCalc = false
+      }
+
       let { avgHeight, animationIndex, mergedConfig, rowsData, animation, updater } = this
 
       const { waitTime, carousel, rowNum } = mergedConfig
@@ -353,7 +363,7 @@ export default {
       let rows = rowsData.slice(animationIndex)
       rows.push(...rowsData.slice(0, animationIndex))
 
-      this.rows = rows
+      this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
       this.heights = new Array(rowLength).fill(avgHeight)
 
       await new Promise(resolve => setTimeout(resolve, 300))
@@ -387,6 +397,19 @@ export default {
         rowIndex,
         columnIndex: ci
       })
+    },
+    updateRows(rows, animationIndex) {
+      const { mergedConfig, animationHandler, animation } = this
+
+      this.mergedConfig = {
+        ...mergedConfig,
+        data: [...rows]
+      }
+
+      this.needCalc = true
+
+      if (typeof animationIndex === 'number') this.animationIndex = animationIndex
+      if (!animationHandler) animation(true)
     }
   },
   destroyed () {

lib/components/scrollRankingBoard/src/main.vue

@@ -9,7 +9,7 @@
       <div class="ranking-info">
         <div class="rank">No.{{ item.ranking }}</div>
         <div class="info-name" v-html="item.name" />
-        <div class="ranking-value">{{ item.value + mergedConfig.unit }}</div>
+        <div class="ranking-value">{{ mergedConfig.valueFormatter ? mergedConfig.valueFormatter(item) : item.value + mergedConfig.unit }}</div>
       </div>
 
       <div class="ranking-column">
@@ -82,7 +82,13 @@ export default {
          * @type {Boolean}
          * @default sort = true
          */
-        sort: true
+        sort: true,
+        /**
+         * @description Value formatter
+         * @type {Function}
+         * @default valueFormatter = null
+         */
+        valueFormatter: null
       },
 
       mergedConfig: null,
@@ -208,7 +214,7 @@ export default {
       let rows = rowsData.slice(animationIndex)
       rows.push(...rowsData.slice(0, animationIndex))
 
-      this.rows = rows
+      this.rows = rows.slice(0, rowNum + 1)
       this.heights = new Array(rowLength).fill(avgHeight)
 
       await new Promise(resolve => setTimeout(resolve, 300))
@@ -232,7 +238,7 @@ export default {
       if (!animationHandler) return
 
       clearTimeout(animationHandler)
-    }
+    },
   },
   destroyed () {
     const { stopAnimation } = this

lib/util/index.js

@@ -38,10 +38,10 @@ export function getPointDistance (pointOne, pointTwo) {
   return Math.sqrt(minusX * minusX + minusY * minusY)
 }
 
-export function uuid () {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+export function uuid (hasHyphen) {
+  return (hasHyphen ? 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' : 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx').replace(/[xy]/g, function (c) {
 		const r = Math.random() * 16 | 0
 		const v = c == 'x' ? r : (r & 0x3 | 0x8)
 		return v.toString(16)
-	})
+  })
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiaminghi/data-view",
-  "version": "2.9.2",
+  "version": "2.9.9",
   "author": "JiaMing <743192023@qq.com>",
   "description": "Vue Large screen data display component library",
   "main": "lib/index.js",

src/components/borderBox10/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-10" :ref="ref" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
-    <svg class="border" :width="width" :height="height">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
       <polygon :fill="backgroundColor" :points="`
         4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height}
         4, ${height} 0, ${height - 4} 0, 4
@@ -12,7 +12,7 @@
       height="150px"
       :key="item"
       v-for="item in border"
-      :class="`${item} border`"
+      :class="`${item} dv-border-svg-container`"
     >
       <polygon
         :fill="mergedColor[1]"
@@ -86,7 +86,7 @@ export default {
   height: 100%;
   border-radius: 6px;
 
-  .border {
+  .dv-border-svg-container {
     position: absolute;
     display: block;
   }

src/components/borderBox11/src/main.vue

@@ -292,7 +292,7 @@ export default {
     top: 0px;
     left: 0px;
 
-    polyline {
+    & > polyline {
       fill: none;
       stroke-width: 1;
     }

src/components/borderBox2/src/main.vue

@@ -89,7 +89,7 @@ export default {
     top: 0px;
     left: 0px;
 
-    polyline {
+    & > polyline {
       fill: none;
       stroke-width: 1;
     }

src/components/borderBox3/src/main.vue

@@ -93,7 +93,7 @@ export default {
     top: 0px;
     left: 0px;
 
-    polyline {
+    & > polyline {
       fill: none;
     }
   }

src/components/borderBox4/src/main.vue

@@ -105,7 +105,7 @@ export default {
     top: 0px;
     left: 0px;
 
-    polyline {
+    & > polyline {
       fill: none;
     }
   }

src/components/borderBox5/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-5" :ref="ref">
-    <svg :class="`dv-svg-container  ${reverse && 'dv-reverse'}`" :width="width" :height="height">
+    <svg :class="`dv-border-svg-container  ${reverse && 'dv-reverse'}`" :width="width" :height="height">
       <polygon :fill="backgroundColor" :points="`
         10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}
       `" />
@@ -94,14 +94,14 @@ export default {
     transform: rotate(180deg);
   }
 
-  .dv-svg-container {
+  .dv-border-svg-container {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
 
-    polyline {
+    & > polyline {
       fill: none;
     }
   }

src/components/borderBox6/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-6" :ref="ref">
-    <svg class="dv-svg-container" :width="width" :height="height">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
       <polygon :fill="backgroundColor" :points="`
         9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7}
       `" />
@@ -86,14 +86,14 @@ export default {
   width: 100%;
   height: 100%;
 
-  .dv-svg-container {
+  .dv-border-svg-container {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
 
-    polyline {
+    & > polyline {
       fill: none;
       stroke-width: 1;
     }

src/components/borderBox7/src/main.vue

@@ -5,7 +5,7 @@
     :style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}; background-color: ${backgroundColor}`"
     :ref="ref"
   >
-    <svg class="dv-svg-container" :width="width" :height="height">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
       <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, 25 0, 0 25, 0`" />
       <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
       <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
@@ -80,14 +80,14 @@ export default {
   width: 100%;
   height: 100%;
 
-  .dv-svg-container {
+  .dv-border-svg-container {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
 
-    polyline {
+    & > polyline {
       fill: none;
       stroke-linecap: round;
     }

src/components/borderBox8/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-8" :ref="ref">
-    <svg class="dv-svg-container" :width="width" :height="height">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
       <defs>
         <path
           :id="path"
@@ -147,7 +147,7 @@ export default {
   width: 100%;
   height: 100%;
 
-  svg {
+  .dv-border-svg-container {
     position: absolute;
     width: 100%;
     height: 100%;

src/components/borderBox9/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-9" :ref="ref">
-    <svg class="dv-svg-container" :width="width" :height="height">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
       <defs>
         <linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
           <animate
@@ -185,7 +185,7 @@ export default {
   width: 100%;
   height: 100%;
 
-  svg {
+  .dv-border-svg-container {
     position: absolute;
     width: 100%;
     height: 100%;

src/components/scrollBoard/src/main.vue

@@ -4,7 +4,7 @@
       <div
         class="header-item"
         v-for="(headerItem, i) in header"
-        :key="headerItem + i"
+        :key="`${headerItem}${i}`"
         :style="`
           height: ${mergedConfig.headerHeight}px;
           line-height: ${mergedConfig.headerHeight}px;
@@ -23,7 +23,7 @@
       <div
         class="row-item"
         v-for="(row, ri) in rows"
-        :key="row.toString() + row.scroll"
+        :key="`${row.toString()}${row.scroll}`"
         :style="`
           height: ${heights[ri]}px;
           line-height: ${heights[ri]}px;
@@ -33,7 +33,7 @@
         <div
           class="ceil"
           v-for="(ceil, ci) in row.ceils"
-          :key="ceil + ri + ci"
+          :key="`${ceil}${ri}${ci}`"
           :style="`width: ${widths[ci]}px;`"
           :align="aligns[ci]"
           v-html="ceil"
@@ -178,7 +178,9 @@ export default {
 
       animationHandler: '',
 
-      updater: 0
+      updater: 0,
+
+      needCalc: false
     }
   },
   watch: {
@@ -335,6 +337,14 @@ export default {
       this.aligns = deepMerge(aligns, align)
     },
     async animation (start = false) {
+      const { needCalc, calcHeights, calcRowsData } = this
+
+      if (needCalc) {
+        calcRowsData()
+        calcHeights()
+        this.needCalc = false
+      }
+
       let { avgHeight, animationIndex, mergedConfig, rowsData, animation, updater } = this
 
       const { waitTime, carousel, rowNum } = mergedConfig
@@ -353,7 +363,7 @@ export default {
       let rows = rowsData.slice(animationIndex)
       rows.push(...rowsData.slice(0, animationIndex))
 
-      this.rows = rows
+      this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
       this.heights = new Array(rowLength).fill(avgHeight)
 
       await new Promise(resolve => setTimeout(resolve, 300))
@@ -387,6 +397,19 @@ export default {
         rowIndex,
         columnIndex: ci
       })
+    },
+    updateRows(rows, animationIndex) {
+      const { mergedConfig, animationHandler, animation } = this
+
+      this.mergedConfig = {
+        ...mergedConfig,
+        data: [...rows]
+      }
+
+      this.needCalc = true
+
+      if (typeof animationIndex === 'number') this.animationIndex = animationIndex
+      if (!animationHandler) animation(true)
     }
   },
   destroyed () {

src/components/scrollRankingBoard/src/main.vue

@@ -9,7 +9,7 @@
       <div class="ranking-info">
         <div class="rank">No.{{ item.ranking }}</div>
         <div class="info-name" v-html="item.name" />
-        <div class="ranking-value">{{ item.value + mergedConfig.unit }}</div>
+        <div class="ranking-value">{{ mergedConfig.valueFormatter ? mergedConfig.valueFormatter(item) : item.value + mergedConfig.unit }}</div>
       </div>
 
       <div class="ranking-column">
@@ -82,7 +82,13 @@ export default {
          * @type {Boolean}
          * @default sort = true
          */
-        sort: true
+        sort: true,
+        /**
+         * @description Value formatter
+         * @type {Function}
+         * @default valueFormatter = null
+         */
+        valueFormatter: null
       },
 
       mergedConfig: null,
@@ -208,7 +214,7 @@ export default {
       let rows = rowsData.slice(animationIndex)
       rows.push(...rowsData.slice(0, animationIndex))
 
-      this.rows = rows
+      this.rows = rows.slice(0, rowNum + 1)
       this.heights = new Array(rowLength).fill(avgHeight)
 
       await new Promise(resolve => setTimeout(resolve, 300))
@@ -232,7 +238,7 @@ export default {
       if (!animationHandler) return
 
       clearTimeout(animationHandler)
-    }
+    },
   },
   destroyed () {
     const { stopAnimation } = this

src/mixin/autoResize.js

@@ -32,8 +32,14 @@ export default {
         $nextTick(e => {
           const dom = this.dom = $refs[ref]
 
-          this.width = dom.clientWidth
-          this.height = dom.clientHeight
+          this.width = dom ? dom.clientWidth : 0
+          this.height = dom ? dom.clientHeight : 0
+
+          if (!dom) {
+            console.warn('DataV: Failed to get dom node, component rendering may be abnormal!')
+          } else if (!this.width || !this.height) {
+            console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!')
+          }
 
           if (typeof onResize === 'function' && resize) onResize()
 
@@ -56,6 +62,8 @@ export default {
     unbindDomResizeCallback () {
       let { domObserver, debounceInitWHFun } = this
 
+      if (!domObserver) return
+
       domObserver.disconnect()
       domObserver.takeRecords()
       domObserver = null

src/util/index.js

@@ -38,10 +38,10 @@ export function getPointDistance (pointOne, pointTwo) {
   return Math.sqrt(minusX * minusX + minusY * minusY)
 }
 
-export function uuid () {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+export function uuid (hasHyphen) {
+  return (hasHyphen ? 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' : 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx').replace(/[xy]/g, function (c) {
 		const r = Math.random() * 16 | 0
 		const v = c == 'x' ? r : (r & 0x3 | 0x8)
 		return v.toString(16)
-	})
+  })
 }