Compare commits
34 Commits
V2.9.0-alp
...
V2.9.7-alp
| Author | SHA1 | Date | |
|---|---|---|---|
| 1082be1251 | |||
| e67b4d5403 | |||
| 1c7e03bff8 | |||
| c5ff0cd474 | |||
| 1e76c1c0ec | |||
| 731d89fb1a | |||
| dd512c05dc | |||
| be97afe8a9 | |||
| 16013c0aa3 | |||
| c3211c358e | |||
| 536ded2964 | |||
| 32b9757e0f | |||
| 60247e548c | |||
| 58d27bc6b1 | |||
| e0bd76032a | |||
| 6139b5d9b7 | |||
| c32d396f90 | |||
| feada8a462 | |||
| 9318431c88 | |||
| abba9ad931 | |||
| 2b06940ac7 | |||
| 026d9139c4 | |||
| 9b84417f01 | |||
| 86da84af2e | |||
| 1ea106fd83 | |||
| 7491b34711 | |||
| a2875684ce | |||
| f581aee5c3 | |||
| 3f5148cea3 | |||
| e270fadcd2 | |||
| beaef5c59a | |||
| b17399416a | |||
| 5f3fdfc798 | |||
| e7c237cbac |
53
CHANGELOG.md
53
CHANGELOG.md
@ -1,8 +1,57 @@
|
||||
# 2.9.7-alpha (2020-08-05)
|
||||
|
||||
### 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
|
||||
|
||||
- **scrollBoard:** reset animationIndex when config upate.
|
||||
|
||||
# 2.9.1-alpha (2020-06-16)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- **scrollRankingBoard:** Calculation optimization of negative values [(#101)](https://github.com/DataV-Team/DataV/pull/101).
|
||||
|
||||
### Perfect
|
||||
|
||||
- **digitalFlop:** add number formatter.
|
||||
|
||||
# 2.9.0-alpha (2020-06-10)
|
||||
|
||||
### ScrollBoard
|
||||
|
||||
- **hoverPause:** add `hoverPause` configuration [(#96)](https://github.com/DataV-Team/DataV/pull/96)..
|
||||
- **hoverPause:** add `hoverPause` configuration [(#96)](https://github.com/DataV-Team/DataV/pull/96).
|
||||
- **mouseover:** add `mouseover` event [(#96)](https://github.com/DataV-Team/DataV/pull/96).
|
||||
|
||||
# 2.8.4-alpha (2020-05-25)
|
||||
@ -96,7 +145,7 @@
|
||||
|
||||
# 2.4.7-alpha (2019-10-24)
|
||||
|
||||
### perfect
|
||||
### Perfect
|
||||
|
||||
- **charts:** Optimize memory leaks.
|
||||
- **digitalFlop:** Optimize memory leaks.
|
||||
|
||||
164
dist/datav.map.vue.js
vendored
164
dist/datav.map.vue.js
vendored
@ -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);
|
||||
@ -356,7 +356,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__ = normalizeComponent(
|
||||
const __vue_component__ = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
||||
__vue_inject_styles__,
|
||||
__vue_script__,
|
||||
@ -545,7 +545,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$1 = normalizeComponent(
|
||||
const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
|
||||
__vue_inject_styles__$1,
|
||||
__vue_script__$1,
|
||||
@ -1592,7 +1592,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$2 = normalizeComponent(
|
||||
const __vue_component__$2 = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
|
||||
__vue_inject_styles__$2,
|
||||
__vue_script__$2,
|
||||
@ -1782,7 +1782,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$3 = normalizeComponent(
|
||||
const __vue_component__$3 = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
|
||||
__vue_inject_styles__$3,
|
||||
__vue_script__$3,
|
||||
@ -1977,7 +1977,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$4 = normalizeComponent(
|
||||
const __vue_component__$4 = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 },
|
||||
__vue_inject_styles__$4,
|
||||
__vue_script__$4,
|
||||
@ -2195,7 +2195,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$5 = normalizeComponent(
|
||||
const __vue_component__$5 = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 },
|
||||
__vue_inject_styles__$5,
|
||||
__vue_script__$5,
|
||||
@ -2416,7 +2416,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$6 = normalizeComponent(
|
||||
const __vue_component__$6 = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$6, staticRenderFns: __vue_staticRenderFns__$6 },
|
||||
__vue_inject_styles__$6,
|
||||
__vue_script__$6,
|
||||
@ -2680,7 +2680,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$7 = normalizeComponent(
|
||||
const __vue_component__$7 = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$7, staticRenderFns: __vue_staticRenderFns__$7 },
|
||||
__vue_inject_styles__$7,
|
||||
__vue_script__$7,
|
||||
@ -2913,7 +2913,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$8 = normalizeComponent(
|
||||
const __vue_component__$8 = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
|
||||
__vue_inject_styles__$8,
|
||||
__vue_script__$8,
|
||||
@ -3160,7 +3160,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$9 = normalizeComponent(
|
||||
const __vue_component__$9 = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
|
||||
__vue_inject_styles__$9,
|
||||
__vue_script__$9,
|
||||
@ -3603,7 +3603,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$a = normalizeComponent(
|
||||
const __vue_component__$a = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
|
||||
__vue_inject_styles__$a,
|
||||
__vue_script__$a,
|
||||
@ -3767,7 +3767,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$b = normalizeComponent(
|
||||
const __vue_component__$b = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$b, staticRenderFns: __vue_staticRenderFns__$b },
|
||||
__vue_inject_styles__$b,
|
||||
__vue_script__$b,
|
||||
@ -4673,7 +4673,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$c = normalizeComponent(
|
||||
const __vue_component__$c = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$c, staticRenderFns: __vue_staticRenderFns__$c },
|
||||
__vue_inject_styles__$c,
|
||||
__vue_script__$c,
|
||||
@ -4999,7 +4999,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$d = normalizeComponent(
|
||||
const __vue_component__$d = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$d, staticRenderFns: __vue_staticRenderFns__$d },
|
||||
__vue_inject_styles__$d,
|
||||
__vue_script__$d,
|
||||
@ -5170,7 +5170,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$e = normalizeComponent(
|
||||
const __vue_component__$e = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$e, staticRenderFns: __vue_staticRenderFns__$e },
|
||||
__vue_inject_styles__$e,
|
||||
__vue_script__$e,
|
||||
@ -5474,7 +5474,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$f = normalizeComponent(
|
||||
const __vue_component__$f = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$f, staticRenderFns: __vue_staticRenderFns__$f },
|
||||
__vue_inject_styles__$f,
|
||||
__vue_script__$f,
|
||||
@ -5679,7 +5679,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$g = normalizeComponent(
|
||||
const __vue_component__$g = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$g, staticRenderFns: __vue_staticRenderFns__$g },
|
||||
__vue_inject_styles__$g,
|
||||
__vue_script__$g,
|
||||
@ -5871,7 +5871,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$h = normalizeComponent(
|
||||
const __vue_component__$h = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$h, staticRenderFns: __vue_staticRenderFns__$h },
|
||||
__vue_inject_styles__$h,
|
||||
__vue_script__$h,
|
||||
@ -6015,7 +6015,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$i = normalizeComponent(
|
||||
const __vue_component__$i = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$i, staticRenderFns: __vue_staticRenderFns__$i },
|
||||
__vue_inject_styles__$i,
|
||||
__vue_script__$i,
|
||||
@ -6204,7 +6204,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$j = normalizeComponent(
|
||||
const __vue_component__$j = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$j, staticRenderFns: __vue_staticRenderFns__$j },
|
||||
__vue_inject_styles__$j,
|
||||
__vue_script__$j,
|
||||
@ -6427,7 +6427,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$k = normalizeComponent(
|
||||
const __vue_component__$k = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$k, staticRenderFns: __vue_staticRenderFns__$k },
|
||||
__vue_inject_styles__$k,
|
||||
__vue_script__$k,
|
||||
@ -6568,7 +6568,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$l = normalizeComponent(
|
||||
const __vue_component__$l = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$l, staticRenderFns: __vue_staticRenderFns__$l },
|
||||
__vue_inject_styles__$l,
|
||||
__vue_script__$l,
|
||||
@ -6722,7 +6722,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$m = normalizeComponent(
|
||||
const __vue_component__$m = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$m, staticRenderFns: __vue_staticRenderFns__$m },
|
||||
__vue_inject_styles__$m,
|
||||
__vue_script__$m,
|
||||
@ -6983,7 +6983,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$n = normalizeComponent(
|
||||
const __vue_component__$n = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$n, staticRenderFns: __vue_staticRenderFns__$n },
|
||||
__vue_inject_styles__$n,
|
||||
__vue_script__$n,
|
||||
@ -7349,7 +7349,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$o = normalizeComponent(
|
||||
const __vue_component__$o = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$o, staticRenderFns: __vue_staticRenderFns__$o },
|
||||
__vue_inject_styles__$o,
|
||||
__vue_script__$o,
|
||||
@ -7564,7 +7564,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$p = normalizeComponent(
|
||||
const __vue_component__$p = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$p, staticRenderFns: __vue_staticRenderFns__$p },
|
||||
__vue_inject_styles__$p,
|
||||
__vue_script__$p,
|
||||
@ -11873,7 +11873,9 @@
|
||||
number: [],
|
||||
content: '',
|
||||
position: [0, 0],
|
||||
toFixed: 0
|
||||
toFixed: 0,
|
||||
rowGap: 0,
|
||||
formatter: null
|
||||
},
|
||||
validator: function validator(_ref7) {
|
||||
var shape = _ref7.shape;
|
||||
@ -11894,14 +11896,18 @@
|
||||
var number = shape.number,
|
||||
content = shape.content,
|
||||
toFixed = shape.toFixed,
|
||||
rowGap = shape.rowGap;
|
||||
rowGap = shape.rowGap,
|
||||
formatter = shape.formatter;
|
||||
var textSegments = content.split('{nt}');
|
||||
var lastSegmentIndex = textSegments.length - 1;
|
||||
var textString = '';
|
||||
textSegments.forEach(function (t, i) {
|
||||
var currentNumber = number[i];
|
||||
if (i === lastSegmentIndex) currentNumber = '';
|
||||
if (typeof currentNumber === 'number') currentNumber = currentNumber.toFixed(toFixed);
|
||||
var currentNumber = number[i] || '';
|
||||
|
||||
if (typeof currentNumber === 'number') {
|
||||
currentNumber = currentNumber.toFixed(toFixed);
|
||||
if (typeof formatter === 'function') currentNumber = formatter(currentNumber);
|
||||
}
|
||||
|
||||
textString += t + (currentNumber || '');
|
||||
});
|
||||
|
||||
@ -11910,7 +11916,7 @@
|
||||
}, {
|
||||
shape: _objectSpread({}, shape, {
|
||||
content: textString,
|
||||
rowGap: rowGap || 0
|
||||
rowGap: rowGap
|
||||
})
|
||||
});
|
||||
}
|
||||
@ -19410,7 +19416,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$q = normalizeComponent(
|
||||
const __vue_component__$q = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$q, staticRenderFns: __vue_staticRenderFns__$q },
|
||||
__vue_inject_styles__$q,
|
||||
__vue_script__$q,
|
||||
@ -19488,6 +19494,12 @@
|
||||
fill: '#3de7c9'
|
||||
},
|
||||
|
||||
/**
|
||||
* @description Number formatter
|
||||
* @type {Null|Function}
|
||||
*/
|
||||
formatter: undefined,
|
||||
|
||||
/**
|
||||
* @description CRender animationCurve
|
||||
* @type {String}
|
||||
@ -19571,7 +19583,8 @@
|
||||
content,
|
||||
toFixed,
|
||||
textAlign,
|
||||
rowGap
|
||||
rowGap,
|
||||
formatter
|
||||
} = this.mergedConfig;
|
||||
const [w, h] = this.renderer.area;
|
||||
const position = [w / 2, h / 2];
|
||||
@ -19582,7 +19595,8 @@
|
||||
content,
|
||||
toFixed,
|
||||
position,
|
||||
rowGap
|
||||
rowGap,
|
||||
formatter
|
||||
};
|
||||
},
|
||||
|
||||
@ -19657,7 +19671,7 @@
|
||||
/* style */
|
||||
const __vue_inject_styles__$r = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-4570caa9_0", { source: ".dv-digital-flop canvas {\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-digital-flop canvas {\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
|
||||
inject("data-v-113591fb_0", { source: ".dv-digital-flop canvas {\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-digital-flop canvas {\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
|
||||
|
||||
};
|
||||
/* scoped */
|
||||
@ -19672,7 +19686,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$r = normalizeComponent(
|
||||
const __vue_component__$r = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$r, staticRenderFns: __vue_staticRenderFns__$r },
|
||||
__vue_inject_styles__$r,
|
||||
__vue_script__$r,
|
||||
@ -20035,7 +20049,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$s = normalizeComponent(
|
||||
const __vue_component__$s = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$s, staticRenderFns: __vue_staticRenderFns__$s },
|
||||
__vue_inject_styles__$s,
|
||||
__vue_script__$s,
|
||||
@ -20267,7 +20281,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$t = normalizeComponent(
|
||||
const __vue_component__$t = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$t, staticRenderFns: __vue_staticRenderFns__$t },
|
||||
__vue_inject_styles__$t,
|
||||
__vue_script__$t,
|
||||
@ -20686,7 +20700,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$u = normalizeComponent(
|
||||
const __vue_component__$u = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$u, staticRenderFns: __vue_staticRenderFns__$u },
|
||||
__vue_inject_styles__$u,
|
||||
__vue_script__$u,
|
||||
@ -21067,7 +21081,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$v = normalizeComponent(
|
||||
const __vue_component__$v = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$v, staticRenderFns: __vue_staticRenderFns__$v },
|
||||
__vue_inject_styles__$v,
|
||||
__vue_script__$v,
|
||||
@ -21788,7 +21802,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$w = normalizeComponent(
|
||||
const __vue_component__$w = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$w, staticRenderFns: __vue_staticRenderFns__$w },
|
||||
__vue_inject_styles__$w,
|
||||
__vue_script__$w,
|
||||
@ -22573,7 +22587,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$x = normalizeComponent(
|
||||
const __vue_component__$x = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$x, staticRenderFns: __vue_staticRenderFns__$x },
|
||||
__vue_inject_styles__$x,
|
||||
__vue_script__$x,
|
||||
@ -22856,7 +22870,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$y = normalizeComponent(
|
||||
const __vue_component__$y = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$y, staticRenderFns: __vue_staticRenderFns__$y },
|
||||
__vue_inject_styles__$y,
|
||||
__vue_script__$y,
|
||||
@ -23004,7 +23018,8 @@
|
||||
aligns: [],
|
||||
animationIndex: 0,
|
||||
animationHandler: '',
|
||||
updater: 0
|
||||
updater: 0,
|
||||
needCalc: false
|
||||
};
|
||||
},
|
||||
|
||||
@ -23015,6 +23030,7 @@
|
||||
calcData
|
||||
} = this;
|
||||
stopAnimation();
|
||||
this.animationIndex = 0;
|
||||
calcData();
|
||||
}
|
||||
|
||||
@ -23193,6 +23209,18 @@
|
||||
},
|
||||
|
||||
async animation(start = false) {
|
||||
const {
|
||||
needCalc,
|
||||
calcHeights,
|
||||
calcRowsData
|
||||
} = this;
|
||||
|
||||
if (needCalc) {
|
||||
calcRowsData();
|
||||
calcHeights();
|
||||
this.needCalc = false;
|
||||
}
|
||||
|
||||
let {
|
||||
avgHeight,
|
||||
animationIndex,
|
||||
@ -23217,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;
|
||||
@ -23250,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);
|
||||
}
|
||||
|
||||
},
|
||||
@ -23281,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: " +
|
||||
@ -23314,7 +23356,7 @@
|
||||
return _c(
|
||||
"div",
|
||||
{
|
||||
key: row.toString() + row.scroll,
|
||||
key: "" + row.toString() + row.scroll,
|
||||
staticClass: "row-item",
|
||||
style:
|
||||
"\n height: " +
|
||||
@ -23329,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] },
|
||||
@ -23361,7 +23403,7 @@
|
||||
/* style */
|
||||
const __vue_inject_styles__$z = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-64cbfe00_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 */
|
||||
@ -23376,7 +23418,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$z = normalizeComponent(
|
||||
const __vue_component__$z = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$z, staticRenderFns: __vue_staticRenderFns__$z },
|
||||
__vue_inject_styles__$z,
|
||||
__vue_script__$z,
|
||||
@ -23533,10 +23575,14 @@
|
||||
const value = data.map(({
|
||||
value
|
||||
}) => value);
|
||||
const max = Math.max(...value) || 0;
|
||||
const min = Math.min(...value) || 0; // abs of min
|
||||
|
||||
const minAbs = Math.abs(min);
|
||||
const max = Math.max(...value) || 0; // abs of max
|
||||
const total = max + minAbs;
|
||||
data = data.map((row, i) => ({ ...row,
|
||||
ranking: i + 1,
|
||||
percent: row.value / max * 100
|
||||
percent: (row.value + minAbs) / total * 100
|
||||
}));
|
||||
const rowLength = data.length;
|
||||
|
||||
@ -23590,7 +23636,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;
|
||||
@ -23680,7 +23726,7 @@
|
||||
/* style */
|
||||
const __vue_inject_styles__$A = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-4fe9e817_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-14e1c432_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 */
|
||||
@ -23695,7 +23741,7 @@
|
||||
|
||||
|
||||
|
||||
const __vue_component__$A = normalizeComponent(
|
||||
const __vue_component__$A = /*#__PURE__*/normalizeComponent(
|
||||
{ render: __vue_render__$A, staticRenderFns: __vue_staticRenderFns__$A },
|
||||
__vue_inject_styles__$A,
|
||||
__vue_script__$A,
|
||||
|
||||
2
dist/datav.min.vue.js
vendored
2
dist/datav.min.vue.js
vendored
File diff suppressed because one or more lines are too long
@ -67,6 +67,11 @@ export default {
|
||||
fontSize: 30,
|
||||
fill: '#3de7c9'
|
||||
},
|
||||
/**
|
||||
* @description Number formatter
|
||||
* @type {Null|Function}
|
||||
*/
|
||||
formatter: undefined,
|
||||
/**
|
||||
* @description CRender animationCurve
|
||||
* @type {String}
|
||||
@ -130,7 +135,7 @@ export default {
|
||||
})
|
||||
},
|
||||
getShape () {
|
||||
const { number, content, toFixed, textAlign, rowGap } = this.mergedConfig
|
||||
const { number, content, toFixed, textAlign, rowGap, formatter } = this.mergedConfig
|
||||
|
||||
const [w, h] = this.renderer.area
|
||||
|
||||
@ -144,7 +149,8 @@ export default {
|
||||
content,
|
||||
toFixed,
|
||||
position,
|
||||
rowGap
|
||||
rowGap,
|
||||
formatter
|
||||
}
|
||||
},
|
||||
getStyle () {
|
||||
|
||||
@ -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: {
|
||||
@ -187,6 +189,8 @@ export default {
|
||||
|
||||
stopAnimation()
|
||||
|
||||
this.animationIndex = 0
|
||||
|
||||
calcData()
|
||||
}
|
||||
},
|
||||
@ -333,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
|
||||
@ -351,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))
|
||||
@ -385,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 () {
|
||||
|
||||
@ -152,10 +152,20 @@ export default {
|
||||
})
|
||||
|
||||
const value = data.map(({ value }) => value)
|
||||
|
||||
const min = Math.min(...value) || 0
|
||||
|
||||
// abs of min
|
||||
const minAbs = Math.abs(min)
|
||||
|
||||
const max = Math.max(...value) || 0
|
||||
|
||||
data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: row.value / max * 100 }))
|
||||
// abs of max
|
||||
const maxAbs = Math.abs(max)
|
||||
|
||||
const total = max + minAbs
|
||||
|
||||
data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: (row.value + minAbs) / total * 100 }))
|
||||
|
||||
const rowLength = data.length
|
||||
|
||||
@ -198,7 +208,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))
|
||||
|
||||
@ -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)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@jiaminghi/data-view",
|
||||
"version": "2.9.0",
|
||||
"version": "2.9.7",
|
||||
"author": "JiaMing <743192023@qq.com>",
|
||||
"description": "Vue Large screen data display component library",
|
||||
"main": "lib/index.js",
|
||||
|
||||
@ -67,6 +67,11 @@ export default {
|
||||
fontSize: 30,
|
||||
fill: '#3de7c9'
|
||||
},
|
||||
/**
|
||||
* @description Number formatter
|
||||
* @type {Null|Function}
|
||||
*/
|
||||
formatter: undefined,
|
||||
/**
|
||||
* @description CRender animationCurve
|
||||
* @type {String}
|
||||
@ -130,7 +135,7 @@ export default {
|
||||
})
|
||||
},
|
||||
getShape () {
|
||||
const { number, content, toFixed, textAlign, rowGap } = this.mergedConfig
|
||||
const { number, content, toFixed, textAlign, rowGap, formatter } = this.mergedConfig
|
||||
|
||||
const [w, h] = this.renderer.area
|
||||
|
||||
@ -144,7 +149,8 @@ export default {
|
||||
content,
|
||||
toFixed,
|
||||
position,
|
||||
rowGap
|
||||
rowGap,
|
||||
formatter
|
||||
}
|
||||
},
|
||||
getStyle () {
|
||||
|
||||
@ -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: {
|
||||
@ -187,6 +189,8 @@ export default {
|
||||
|
||||
stopAnimation()
|
||||
|
||||
this.animationIndex = 0
|
||||
|
||||
calcData()
|
||||
}
|
||||
},
|
||||
@ -333,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
|
||||
@ -351,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))
|
||||
@ -385,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 () {
|
||||
|
||||
@ -152,10 +152,20 @@ export default {
|
||||
})
|
||||
|
||||
const value = data.map(({ value }) => value)
|
||||
|
||||
const min = Math.min(...value) || 0
|
||||
|
||||
// abs of min
|
||||
const minAbs = Math.abs(min)
|
||||
|
||||
const max = Math.max(...value) || 0
|
||||
|
||||
data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: row.value / max * 100 }))
|
||||
// abs of max
|
||||
const maxAbs = Math.abs(max)
|
||||
|
||||
const total = max + minAbs
|
||||
|
||||
data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: (row.value + minAbs) / total * 100 }))
|
||||
|
||||
const rowLength = data.length
|
||||
|
||||
@ -198,7 +208,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))
|
||||
|
||||
@ -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)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user