Compare commits
31 Commits
V2.8.2-alp
...
V2.9.0-alp
| Author | SHA1 | Date | |
|---|---|---|---|
| 3d3de766e3 | |||
| 330815d90a | |||
| 4f6fc240d2 | |||
| 1d0f369509 | |||
| ea058a90c3 | |||
| 934e3f314a | |||
| eea32d7e39 | |||
| 7dd7baebba | |||
| 4a7fdf0c1c | |||
| 53991795a0 | |||
| dde29fa61a | |||
| c82b979432 | |||
| e938b66dc0 | |||
| 71a9be2a13 | |||
| f0432e4c42 | |||
| 65f5b529bf | |||
| 054854480a | |||
| 6ce83e1fd8 | |||
| 8e5f279b6e | |||
| 22afc8e787 | |||
| eb78915c93 | |||
| 22c88c4ea5 | |||
| c98ca00179 | |||
| c257ca6d9c | |||
| ce4cf0d342 | |||
| 7df0c0247a | |||
| df2369dfe4 | |||
| 7799ef3dae | |||
| dd37ba167a | |||
| fdd1e243a7 | |||
| 57b6c726eb |
26
CHANGELOG.md
26
CHANGELOG.md
@ -1,3 +1,29 @@
|
||||
# 2.9.0-alpha (2020-06-10)
|
||||
|
||||
### ScrollBoard
|
||||
|
||||
- **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)
|
||||
|
||||
### Perfect
|
||||
|
||||
- **uuid:** Use uuid to produce unique id.
|
||||
|
||||
# 2.8.3-alpha (2020-05-06)
|
||||
|
||||
### Perfect
|
||||
|
||||
- **activeRingChart:** add `showOriginValue` configuration.
|
||||
- **capsuleChart:** add `showValue` configuration.
|
||||
|
||||
# 2.8.2-alpha (2020-05-06)
|
||||
|
||||
### Perfect
|
||||
|
||||
- **borderBox8:** add `reverse` configuration.
|
||||
|
||||
# 2.8.1-alpha (2020-05-03)
|
||||
|
||||
### Perfect
|
||||
|
||||
319
dist/datav.map.vue.js
vendored
319
dist/datav.map.vue.js
vendored
@ -38,6 +38,13 @@
|
||||
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) {
|
||||
const r = Math.random() * 16 | 0;
|
||||
const v = c == 'x' ? r : r & 0x3 | 0x8;
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
|
||||
var autoResize = {
|
||||
data() {
|
||||
@ -604,7 +611,7 @@
|
||||
if (typeof o === "string") return arrayLikeToArray(o, minLen);
|
||||
var n = Object.prototype.toString.call(o).slice(8, -1);
|
||||
if (n === "Object" && o.constructor) n = o.constructor.name;
|
||||
if (n === "Map" || n === "Set") return Array.from(n);
|
||||
if (n === "Map" || n === "Set") return Array.from(o);
|
||||
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);
|
||||
}
|
||||
|
||||
@ -2939,16 +2946,20 @@
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
},
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
const timestamp = Date.now();
|
||||
const id = uuid();
|
||||
return {
|
||||
ref: 'border-box-8',
|
||||
path: `border-box-8-path-${timestamp}`,
|
||||
gradient: `border-box-8-gradient-${timestamp}`,
|
||||
mask: `border-box-8-mask-${timestamp}`,
|
||||
path: `border-box-8-path-${id}`,
|
||||
gradient: `border-box-8-gradient-${id}`,
|
||||
mask: `border-box-8-mask-${id}`,
|
||||
defaultColor: ['#235fa7', '#4fd2dd'],
|
||||
mergedColor: []
|
||||
};
|
||||
@ -2961,6 +2972,16 @@
|
||||
height
|
||||
} = this;
|
||||
return (width + height - 5) * 2;
|
||||
},
|
||||
|
||||
pathD() {
|
||||
const {
|
||||
reverse,
|
||||
width,
|
||||
height
|
||||
} = this;
|
||||
if (reverse) return `M 2.5, 2.5 L 2.5, ${height - 2.5} L ${width - 2.5}, ${height - 2.5} L ${width - 2.5}, 2.5 L 2.5, 2.5`;
|
||||
return `M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`;
|
||||
}
|
||||
|
||||
},
|
||||
@ -3013,20 +3034,7 @@
|
||||
"defs",
|
||||
[
|
||||
_c("path", {
|
||||
attrs: {
|
||||
id: _vm.path,
|
||||
d:
|
||||
"M2.5, 2.5 L" +
|
||||
(_vm.width - 2.5) +
|
||||
", 2.5 L" +
|
||||
(_vm.width - 2.5) +
|
||||
", " +
|
||||
(_vm.height - 2.5) +
|
||||
" L2.5, " +
|
||||
(_vm.height - 2.5) +
|
||||
" L2.5, 2.5",
|
||||
fill: "transparent"
|
||||
}
|
||||
attrs: { id: _vm.path, d: _vm.pathD, fill: "transparent" }
|
||||
}),
|
||||
_vm._v(" "),
|
||||
_c(
|
||||
@ -3067,16 +3075,7 @@
|
||||
_c("animateMotion", {
|
||||
attrs: {
|
||||
dur: _vm.dur + "s",
|
||||
path:
|
||||
"M2.5, 2.5 L" +
|
||||
(_vm.width - 2.5) +
|
||||
", 2.5 L" +
|
||||
(_vm.width - 2.5) +
|
||||
", " +
|
||||
(_vm.height - 2.5) +
|
||||
" L2.5, " +
|
||||
(_vm.height - 2.5) +
|
||||
" L2.5, 2.5",
|
||||
path: _vm.pathD,
|
||||
rotate: "auto",
|
||||
repeatCount: "indefinite"
|
||||
}
|
||||
@ -3146,7 +3145,7 @@
|
||||
/* style */
|
||||
const __vue_inject_styles__$9 = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-53fbd238_0", { source: ".dv-border-box-8 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-8 svg {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0px;\n top: 0px;\n}\n.dv-border-box-8 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,SAAS;EACT,QAAQ;AACV;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-8 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-8 svg {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0px;\n top: 0px;\n}\n.dv-border-box-8 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
|
||||
inject("data-v-5e705490_0", { source: ".dv-border-box-8 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-8 svg {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0px;\n top: 0px;\n}\n.dv-border-box-8 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,SAAS;EACT,QAAQ;AACV;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-8 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-8 svg {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0px;\n top: 0px;\n}\n.dv-border-box-8 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
|
||||
|
||||
};
|
||||
/* scoped */
|
||||
@ -3194,11 +3193,11 @@
|
||||
},
|
||||
|
||||
data() {
|
||||
const timestamp = Date.now();
|
||||
const id = uuid();
|
||||
return {
|
||||
ref: 'border-box-9',
|
||||
gradientId: `border-box-9-gradient-${timestamp}`,
|
||||
maskId: `border-box-9-mask-${timestamp}`,
|
||||
gradientId: `border-box-9-gradient-${id}`,
|
||||
maskId: `border-box-9-mask-${id}`,
|
||||
defaultColor: ['#11eefd', '#0078d2'],
|
||||
mergedColor: []
|
||||
};
|
||||
@ -3589,7 +3588,7 @@
|
||||
/* style */
|
||||
const __vue_inject_styles__$a = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-4b1d3fb1_0", { source: ".dv-border-box-9 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-9 svg {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0px;\n top: 0px;\n}\n.dv-border-box-9 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,SAAS;EACT,QAAQ;AACV;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-9 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-9 svg {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0px;\n top: 0px;\n}\n.dv-border-box-9 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
|
||||
inject("data-v-50673f47_0", { source: ".dv-border-box-9 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-9 svg {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0px;\n top: 0px;\n}\n.dv-border-box-9 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,SAAS;EACT,QAAQ;AACV;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-9 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-9 svg {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0px;\n top: 0px;\n}\n.dv-border-box-9 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
|
||||
|
||||
};
|
||||
/* scoped */
|
||||
@ -4134,10 +4133,10 @@
|
||||
},
|
||||
|
||||
data() {
|
||||
const timestamp = Date.now();
|
||||
const id = uuid();
|
||||
return {
|
||||
ref: 'border-box-11',
|
||||
filterId: `border-box-11-filterId-${timestamp}`,
|
||||
filterId: `border-box-11-filterId-${id}`,
|
||||
defaultColor: ['#8aaafb', '#1f33a2'],
|
||||
mergedColor: []
|
||||
};
|
||||
@ -4659,7 +4658,7 @@
|
||||
/* style */
|
||||
const __vue_inject_styles__$c = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-712ebc91_0", { source: ".dv-border-box-11 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-11 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-11 .dv-border-svg-container polyline {\n fill: none;\n stroke-width: 1;\n}\n.dv-border-box-11 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,UAAU;EACV,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-11 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-11 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-11 .dv-border-svg-container polyline {\n fill: none;\n stroke-width: 1;\n}\n.dv-border-box-11 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
|
||||
inject("data-v-640dce48_0", { source: ".dv-border-box-11 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-11 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-11 .dv-border-svg-container polyline {\n fill: none;\n stroke-width: 1;\n}\n.dv-border-box-11 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,UAAU;EACV,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-11 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-11 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-11 .dv-border-svg-container polyline {\n fill: none;\n stroke-width: 1;\n}\n.dv-border-box-11 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
|
||||
|
||||
};
|
||||
/* scoped */
|
||||
@ -4707,10 +4706,10 @@
|
||||
},
|
||||
|
||||
data() {
|
||||
const timestamp = +new Date();
|
||||
const id = uuid();
|
||||
return {
|
||||
ref: 'border-box-12',
|
||||
filterId: `borderr-box-12-filterId-${timestamp}`,
|
||||
filterId: `borderr-box-12-filterId-${id}`,
|
||||
defaultColor: ['#2e6099', '#7ce7fd'],
|
||||
mergedColor: []
|
||||
};
|
||||
@ -4985,7 +4984,7 @@
|
||||
/* style */
|
||||
const __vue_inject_styles__$d = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-691fa84a_0", { source: ".dv-border-box-12 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-12 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-12 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-12 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-12 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-12 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
|
||||
inject("data-v-40c58fd4_0", { source: ".dv-border-box-12 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-12 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-12 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-12 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-12 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-12 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
|
||||
|
||||
};
|
||||
/* scoped */
|
||||
@ -5156,7 +5155,7 @@
|
||||
/* style */
|
||||
const __vue_inject_styles__$e = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-77fbe0b5_0", { source: ".dv-border-box-13 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-13 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-13 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-13 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-13 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-13 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
|
||||
inject("data-v-6c30a53b_0", { source: ".dv-border-box-13 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-13 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-13 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-13 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-border-box-13 .dv-border-svg-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-border-box-13 .border-box-content {\n position: relative;\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
|
||||
|
||||
};
|
||||
/* scoped */
|
||||
@ -6001,7 +6000,7 @@
|
||||
/* style */
|
||||
const __vue_inject_styles__$i = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-41fd2a74_0", { source: ".dv-decoration-4 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-decoration-4 .container {\n display: flex;\n overflow: hidden;\n position: absolute;\n}\n.dv-decoration-4 .normal {\n height: 0% !important;\n animation: ani-height 3s ease-in-out infinite;\n left: 50%;\n margin-left: -2px;\n}\n.dv-decoration-4 .reverse {\n width: 0% !important;\n animation: ani-width 3s ease-in-out infinite;\n top: 50%;\n margin-top: -2px;\n}\n@keyframes ani-height {\n70% {\n height: 100%;\n}\n100% {\n height: 100%;\n}\n}\n@keyframes ani-width {\n70% {\n width: 100%;\n}\n100% {\n width: 100%;\n}\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,aAAa;EACb,gBAAgB;EAChB,kBAAkB;AACpB;AACA;EACE,qBAAqB;EACrB,6CAA6C;EAC7C,SAAS;EACT,iBAAiB;AACnB;AACA;EACE,oBAAoB;EACpB,4CAA4C;EAC5C,QAAQ;EACR,gBAAgB;AAClB;AACA;AACE;IACE,YAAY;AACd;AACA;IACE,YAAY;AACd;AACF;AACA;AACE;IACE,WAAW;AACb;AACA;IACE,WAAW;AACb;AACF","file":"main.vue","sourcesContent":[".dv-decoration-4 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-decoration-4 .container {\n display: flex;\n overflow: hidden;\n position: absolute;\n}\n.dv-decoration-4 .normal {\n height: 0% !important;\n animation: ani-height 3s ease-in-out infinite;\n left: 50%;\n margin-left: -2px;\n}\n.dv-decoration-4 .reverse {\n width: 0% !important;\n animation: ani-width 3s ease-in-out infinite;\n top: 50%;\n margin-top: -2px;\n}\n@keyframes ani-height {\n 70% {\n height: 100%;\n }\n 100% {\n height: 100%;\n }\n}\n@keyframes ani-width {\n 70% {\n width: 100%;\n }\n 100% {\n width: 100%;\n }\n}\n"]}, media: undefined });
|
||||
inject("data-v-6a8df262_0", { source: ".dv-decoration-4 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-decoration-4 .container {\n display: flex;\n overflow: hidden;\n position: absolute;\n flex: 1;\n}\n.dv-decoration-4 .normal {\n animation: ani-height 3s ease-in-out infinite;\n left: 50%;\n margin-left: -2px;\n}\n.dv-decoration-4 .reverse {\n animation: ani-width 3s ease-in-out infinite;\n top: 50%;\n margin-top: -2px;\n}\n@keyframes ani-height {\n0% {\n height: 0%;\n}\n70% {\n height: 100%;\n}\n100% {\n height: 100%;\n}\n}\n@keyframes ani-width {\n0% {\n width: 0%;\n}\n70% {\n width: 100%;\n}\n100% {\n width: 100%;\n}\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,aAAa;EACb,gBAAgB;EAChB,kBAAkB;EAClB,OAAO;AACT;AACA;EACE,6CAA6C;EAC7C,SAAS;EACT,iBAAiB;AACnB;AACA;EACE,4CAA4C;EAC5C,QAAQ;EACR,gBAAgB;AAClB;AACA;AACE;IACE,UAAU;AACZ;AACA;IACE,YAAY;AACd;AACA;IACE,YAAY;AACd;AACF;AACA;AACE;IACE,SAAS;AACX;AACA;IACE,WAAW;AACb;AACA;IACE,WAAW;AACb;AACF","file":"main.vue","sourcesContent":[".dv-decoration-4 {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-decoration-4 .container {\n display: flex;\n overflow: hidden;\n position: absolute;\n flex: 1;\n}\n.dv-decoration-4 .normal {\n animation: ani-height 3s ease-in-out infinite;\n left: 50%;\n margin-left: -2px;\n}\n.dv-decoration-4 .reverse {\n animation: ani-width 3s ease-in-out infinite;\n top: 50%;\n margin-top: -2px;\n}\n@keyframes ani-height {\n 0% {\n height: 0%;\n }\n 70% {\n height: 100%;\n }\n 100% {\n height: 100%;\n }\n}\n@keyframes ani-width {\n 0% {\n width: 0%;\n }\n 70% {\n width: 100%;\n }\n 100% {\n width: 100%;\n }\n}\n"]}, media: undefined });
|
||||
|
||||
};
|
||||
/* scoped */
|
||||
@ -6756,10 +6755,10 @@
|
||||
},
|
||||
|
||||
data() {
|
||||
const timestamp = Date.now();
|
||||
const id = uuid();
|
||||
return {
|
||||
ref: 'decoration-9',
|
||||
polygonId: `decoration-9-polygon-${timestamp}`,
|
||||
polygonId: `decoration-9-polygon-${id}`,
|
||||
svgWH: [100, 100],
|
||||
svgScale: [1, 1],
|
||||
defaultColor: ['rgba(3, 166, 224, 0.8)', 'rgba(3, 166, 224, 0.5)'],
|
||||
@ -6969,7 +6968,7 @@
|
||||
/* style */
|
||||
const __vue_inject_styles__$n = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-06b2e4f5_0", { source: ".dv-decoration-9 {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.dv-decoration-9 svg {\n position: absolute;\n left: 0px;\n top: 0px;\n transform-origin: left top;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,uBAAuB;AACzB;AACA;EACE,kBAAkB;EAClB,SAAS;EACT,QAAQ;EACR,0BAA0B;AAC5B","file":"main.vue","sourcesContent":[".dv-decoration-9 {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.dv-decoration-9 svg {\n position: absolute;\n left: 0px;\n top: 0px;\n transform-origin: left top;\n}\n"]}, media: undefined });
|
||||
inject("data-v-b47f91a8_0", { source: ".dv-decoration-9 {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.dv-decoration-9 svg {\n position: absolute;\n left: 0px;\n top: 0px;\n transform-origin: left top;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,uBAAuB;AACzB;AACA;EACE,kBAAkB;EAClB,SAAS;EACT,QAAQ;EACR,0BAA0B;AAC5B","file":"main.vue","sourcesContent":[".dv-decoration-9 {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.dv-decoration-9 svg {\n position: absolute;\n left: 0px;\n top: 0px;\n transform-origin: left top;\n}\n"]}, media: undefined });
|
||||
|
||||
};
|
||||
/* scoped */
|
||||
@ -7013,16 +7012,16 @@
|
||||
},
|
||||
|
||||
data() {
|
||||
const timestamp = Date.now();
|
||||
const id = uuid();
|
||||
return {
|
||||
ref: 'decoration-10',
|
||||
animationId1: `d10ani1${timestamp}`,
|
||||
animationId2: `d10ani2${timestamp}`,
|
||||
animationId3: `d10ani3${timestamp}`,
|
||||
animationId4: `d10ani4${timestamp}`,
|
||||
animationId5: `d10ani5${timestamp}`,
|
||||
animationId6: `d10ani6${timestamp}`,
|
||||
animationId7: `d10ani7${timestamp}`,
|
||||
animationId1: `d10ani1${id}`,
|
||||
animationId2: `d10ani2${id}`,
|
||||
animationId3: `d10ani3${id}`,
|
||||
animationId4: `d10ani4${id}`,
|
||||
animationId5: `d10ani5${id}`,
|
||||
animationId6: `d10ani6${id}`,
|
||||
animationId7: `d10ani7${id}`,
|
||||
defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],
|
||||
mergedColor: []
|
||||
};
|
||||
@ -7335,7 +7334,7 @@
|
||||
/* style */
|
||||
const __vue_inject_styles__$o = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-39f9e4a4_0", { source: ".dv-decoration-10 {\n width: 100%;\n height: 100%;\n display: flex;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,aAAa;AACf","file":"main.vue","sourcesContent":[".dv-decoration-10 {\n width: 100%;\n height: 100%;\n display: flex;\n}\n"]}, media: undefined });
|
||||
inject("data-v-23172a05_0", { source: ".dv-decoration-10 {\n width: 100%;\n height: 100%;\n display: flex;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,aAAa;AACf","file":"main.vue","sourcesContent":[".dv-decoration-10 {\n width: 100%;\n height: 100%;\n display: flex;\n}\n"]}, media: undefined });
|
||||
|
||||
};
|
||||
/* scoped */
|
||||
@ -7550,7 +7549,7 @@
|
||||
/* style */
|
||||
const __vue_inject_styles__$p = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-70e8e39a_0", { source: ".dv-decoration-11 {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n}\n.dv-decoration-11 .decoration-content {\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,aAAa;AACf;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,WAAW;EACX,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,uBAAuB;AACzB","file":"main.vue","sourcesContent":[".dv-decoration-11 {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n}\n.dv-decoration-11 .decoration-content {\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n"]}, media: undefined });
|
||||
inject("data-v-53895fd4_0", { source: ".dv-decoration-11 {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n}\n.dv-decoration-11 .decoration-content {\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,aAAa;AACf;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,WAAW;EACX,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,uBAAuB;AACzB","file":"main.vue","sourcesContent":[".dv-decoration-11 {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n}\n.dv-decoration-11 .decoration-content {\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n"]}, media: undefined });
|
||||
|
||||
};
|
||||
/* scoped */
|
||||
@ -11730,6 +11729,8 @@
|
||||
|
||||
var CRender = unwrapExports(lib$3);
|
||||
|
||||
var _defineProperty2 = interopRequireDefault(defineProperty);
|
||||
|
||||
var _toConsumableArray2 = interopRequireDefault(toConsumableArray);
|
||||
|
||||
|
||||
@ -11740,6 +11741,12 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
||||
|
||||
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
||||
|
||||
var pie = {
|
||||
shape: {
|
||||
rx: 0,
|
||||
@ -11884,11 +11891,10 @@
|
||||
draw: function draw(_ref8, _ref9) {
|
||||
var ctx = _ref8.ctx;
|
||||
var shape = _ref9.shape;
|
||||
ctx.beginPath();
|
||||
var number = shape.number,
|
||||
content = shape.content,
|
||||
position = shape.position,
|
||||
toFixed = shape.toFixed;
|
||||
toFixed = shape.toFixed,
|
||||
rowGap = shape.rowGap;
|
||||
var textSegments = content.split('{nt}');
|
||||
var lastSegmentIndex = textSegments.length - 1;
|
||||
var textString = '';
|
||||
@ -11898,9 +11904,15 @@
|
||||
if (typeof currentNumber === 'number') currentNumber = currentNumber.toFixed(toFixed);
|
||||
textString += t + (currentNumber || '');
|
||||
});
|
||||
ctx.closePath();
|
||||
ctx.strokeText.apply(ctx, [textString].concat((0, _toConsumableArray2["default"])(position)));
|
||||
ctx.fillText.apply(ctx, [textString].concat((0, _toConsumableArray2["default"])(position)));
|
||||
|
||||
graphs_1.text.draw({
|
||||
ctx: ctx
|
||||
}, {
|
||||
shape: _objectSpread({}, shape, {
|
||||
content: textString,
|
||||
rowGap: rowGap || 0
|
||||
})
|
||||
});
|
||||
}
|
||||
};
|
||||
var lineIcon = {
|
||||
@ -16902,13 +16914,15 @@
|
||||
var sum = getDataSum(data);
|
||||
data.forEach(function (item) {
|
||||
var value = item.value;
|
||||
item.percent = toFixedNoCeil(value / sum * 100, percentToFixed);
|
||||
item.percent = value / sum * 100;
|
||||
item.percentForLabel = toFixedNoCeil(value / sum * 100, percentToFixed);
|
||||
});
|
||||
var percentSumNoLast = (0, util$1.mulAdd)(data.slice(0, -1).map(function (_ref5) {
|
||||
var percent = _ref5.percent;
|
||||
return percent;
|
||||
}));
|
||||
data.slice(-1)[0].percent = toFixedNoCeil(100 - percentSumNoLast, percentToFixed);
|
||||
data.slice(-1)[0].percent = 100 - percentSumNoLast;
|
||||
data.slice(-1)[0].percentForLabel = toFixedNoCeil(100 - percentSumNoLast, percentToFixed);
|
||||
});
|
||||
return pies;
|
||||
}
|
||||
@ -17180,7 +17194,7 @@
|
||||
|
||||
if (formatterType === 'string') {
|
||||
label = formatter.replace('{name}', dataItem.name);
|
||||
label = label.replace('{percent}', dataItem.percent);
|
||||
label = label.replace('{percent}', dataItem.percentForLabel);
|
||||
label = label.replace('{value}', dataItem.value);
|
||||
}
|
||||
|
||||
@ -17279,14 +17293,14 @@
|
||||
var _data$i = data[i],
|
||||
labelLine = _data$i.labelLine,
|
||||
name = _data$i.name,
|
||||
percent = _data$i.percent,
|
||||
percentForLabel = _data$i.percentForLabel,
|
||||
value = _data$i.value;
|
||||
var formatterType = (0, _typeof2["default"])(formatter);
|
||||
var label = '';
|
||||
|
||||
if (formatterType === 'string') {
|
||||
label = formatter.replace('{name}', name);
|
||||
label = label.replace('{percent}', percent);
|
||||
label = label.replace('{percent}', percentForLabel);
|
||||
label = label.replace('{value}', value);
|
||||
}
|
||||
|
||||
@ -19313,10 +19327,10 @@
|
||||
},
|
||||
|
||||
data() {
|
||||
const timestamp = Date.now();
|
||||
const id = uuid();
|
||||
return {
|
||||
ref: `charts-container-${timestamp}`,
|
||||
chartRef: `chart-${timestamp}`,
|
||||
ref: `charts-container-${id}`,
|
||||
chartRef: `chart-${id}`,
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
@ -19381,7 +19395,7 @@
|
||||
/* style */
|
||||
const __vue_inject_styles__$q = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-5e36f670_0", { source: ".dv-charts-container {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-charts-container .charts-canvas-container {\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-charts-container {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-charts-container .charts-canvas-container {\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
|
||||
inject("data-v-1f446fe6_0", { source: ".dv-charts-container {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-charts-container .charts-canvas-container {\n width: 100%;\n height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-charts-container {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.dv-charts-container .charts-canvas-container {\n width: 100%;\n height: 100%;\n}\n"]}, media: undefined });
|
||||
|
||||
};
|
||||
/* scoped */
|
||||
@ -19762,7 +19776,14 @@
|
||||
* @type {String}
|
||||
* @default animationFrame = 50
|
||||
*/
|
||||
animationFrame: 50
|
||||
animationFrame: 50,
|
||||
|
||||
/**
|
||||
* @description showOriginValue
|
||||
* @type {Boolean}
|
||||
* @default showOriginValue = false
|
||||
*/
|
||||
showOriginValue: false
|
||||
},
|
||||
mergedConfig: null,
|
||||
chart: null,
|
||||
@ -19781,16 +19802,25 @@
|
||||
const {
|
||||
digitalFlopStyle,
|
||||
digitalFlopToFixed,
|
||||
data
|
||||
data,
|
||||
showOriginValue
|
||||
} = mergedConfig;
|
||||
const value = data.map(({
|
||||
value
|
||||
}) => value);
|
||||
const sum = value.reduce((all, v) => all + v, 0);
|
||||
const percent = parseFloat(value[activeIndex] / sum * 100) || 0;
|
||||
let displayValue;
|
||||
|
||||
if (showOriginValue) {
|
||||
displayValue = value[activeIndex];
|
||||
} else {
|
||||
const sum = value.reduce((all, v) => all + v, 0);
|
||||
const percent = parseFloat(value[activeIndex] / sum * 100) || 0;
|
||||
displayValue = percent;
|
||||
}
|
||||
|
||||
return {
|
||||
content: '{nt}%',
|
||||
number: [percent],
|
||||
content: showOriginValue ? '{nt}' : '{nt}%',
|
||||
number: [displayValue],
|
||||
style: digitalFlopStyle,
|
||||
toFixed: digitalFlopToFixed
|
||||
};
|
||||
@ -19990,7 +20020,7 @@
|
||||
/* style */
|
||||
const __vue_inject_styles__$s = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-b2e793e2_0", { source: ".dv-active-ring-chart {\n position: relative;\n}\n.dv-active-ring-chart .active-ring-chart-container {\n width: 100%;\n height: 100%;\n}\n.dv-active-ring-chart .active-ring-info {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0px;\n top: 0px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n.dv-active-ring-chart .active-ring-info .dv-digital-flop {\n width: 100px;\n height: 30px;\n}\n.dv-active-ring-chart .active-ring-info .active-ring-name {\n width: 100px;\n height: 30px;\n color: #fff;\n text-align: center;\n vertical-align: middle;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,SAAS;EACT,QAAQ;EACR,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EACvB,mBAAmB;AACrB;AACA;EACE,YAAY;EACZ,YAAY;AACd;AACA;EACE,YAAY;EACZ,YAAY;EACZ,WAAW;EACX,kBAAkB;EAClB,sBAAsB;EACtB,uBAAuB;EACvB,gBAAgB;EAChB,mBAAmB;AACrB","file":"main.vue","sourcesContent":[".dv-active-ring-chart {\n position: relative;\n}\n.dv-active-ring-chart .active-ring-chart-container {\n width: 100%;\n height: 100%;\n}\n.dv-active-ring-chart .active-ring-info {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0px;\n top: 0px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n.dv-active-ring-chart .active-ring-info .dv-digital-flop {\n width: 100px;\n height: 30px;\n}\n.dv-active-ring-chart .active-ring-info .active-ring-name {\n width: 100px;\n height: 30px;\n color: #fff;\n text-align: center;\n vertical-align: middle;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n"]}, media: undefined });
|
||||
inject("data-v-7319e037_0", { source: ".dv-active-ring-chart {\n position: relative;\n}\n.dv-active-ring-chart .active-ring-chart-container {\n width: 100%;\n height: 100%;\n}\n.dv-active-ring-chart .active-ring-info {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0px;\n top: 0px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n.dv-active-ring-chart .active-ring-info .dv-digital-flop {\n width: 100px;\n height: 30px;\n}\n.dv-active-ring-chart .active-ring-info .active-ring-name {\n width: 100px;\n height: 30px;\n color: #fff;\n text-align: center;\n vertical-align: middle;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,SAAS;EACT,QAAQ;EACR,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EACvB,mBAAmB;AACrB;AACA;EACE,YAAY;EACZ,YAAY;AACd;AACA;EACE,YAAY;EACZ,YAAY;EACZ,WAAW;EACX,kBAAkB;EAClB,sBAAsB;EACtB,uBAAuB;EACvB,gBAAgB;EAChB,mBAAmB;AACrB","file":"main.vue","sourcesContent":[".dv-active-ring-chart {\n position: relative;\n}\n.dv-active-ring-chart .active-ring-chart-container {\n width: 100%;\n height: 100%;\n}\n.dv-active-ring-chart .active-ring-info {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0px;\n top: 0px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n.dv-active-ring-chart .active-ring-info .dv-digital-flop {\n width: 100px;\n height: 30px;\n}\n.dv-active-ring-chart .active-ring-info .active-ring-name {\n width: 100px;\n height: 30px;\n color: #fff;\n text-align: center;\n vertical-align: middle;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n"]}, media: undefined });
|
||||
|
||||
};
|
||||
/* scoped */
|
||||
@ -20056,11 +20086,20 @@
|
||||
* @type {String}
|
||||
* @default unit = ''
|
||||
*/
|
||||
unit: ''
|
||||
unit: '',
|
||||
|
||||
/**
|
||||
* @description Show item value
|
||||
* @type {Boolean}
|
||||
* @default showValue = false
|
||||
*/
|
||||
showValue: false
|
||||
},
|
||||
mergedConfig: null,
|
||||
capsuleLength: [],
|
||||
labelData: []
|
||||
capsuleValue: [],
|
||||
labelData: [],
|
||||
labelDataLength: []
|
||||
};
|
||||
},
|
||||
|
||||
@ -20100,9 +20139,12 @@
|
||||
value
|
||||
}) => value);
|
||||
const maxValue = Math.max(...capsuleValue);
|
||||
this.capsuleValue = capsuleValue;
|
||||
this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0);
|
||||
const oneFifth = maxValue / 5;
|
||||
this.labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))));
|
||||
const labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))));
|
||||
this.labelData = labelData;
|
||||
this.labelDataLength = Array.from(labelData).map(v => maxValue ? v / maxValue : 0);
|
||||
}
|
||||
|
||||
},
|
||||
@ -20154,16 +20196,27 @@
|
||||
"div",
|
||||
{ key: index, staticClass: "capsule-item" },
|
||||
[
|
||||
_c("div", {
|
||||
style:
|
||||
"width: " +
|
||||
capsule * 100 +
|
||||
"%; background-color: " +
|
||||
_vm.mergedConfig.colors[
|
||||
index % _vm.mergedConfig.colors.length
|
||||
] +
|
||||
";"
|
||||
})
|
||||
_c(
|
||||
"div",
|
||||
{
|
||||
staticClass: "capsule-item-column",
|
||||
style:
|
||||
"width: " +
|
||||
capsule * 100 +
|
||||
"%; background-color: " +
|
||||
_vm.mergedConfig.colors[
|
||||
index % _vm.mergedConfig.colors.length
|
||||
] +
|
||||
";"
|
||||
},
|
||||
[
|
||||
_vm.mergedConfig.showValue
|
||||
? _c("div", { staticClass: "capsule-item-value" }, [
|
||||
_vm._v(_vm._s(_vm.capsuleValue[index]))
|
||||
])
|
||||
: _vm._e()
|
||||
]
|
||||
)
|
||||
]
|
||||
)
|
||||
}),
|
||||
@ -20199,7 +20252,7 @@
|
||||
/* style */
|
||||
const __vue_inject_styles__$t = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-5e3d0ef0_0", { source: ".dv-capsule-chart {\n position: relative;\n display: flex;\n flex-direction: row;\n box-sizing: border-box;\n padding: 10px;\n color: #fff;\n}\n.dv-capsule-chart .label-column {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n box-sizing: border-box;\n padding-right: 10px;\n text-align: right;\n font-size: 12px;\n}\n.dv-capsule-chart .label-column div {\n height: 20px;\n line-height: 20px;\n}\n.dv-capsule-chart .capsule-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n.dv-capsule-chart .capsule-item {\n box-shadow: 0 0 3px #999;\n height: 10px;\n margin: 5px 0px;\n border-radius: 5px;\n}\n.dv-capsule-chart .capsule-item div {\n height: 8px;\n margin-top: 1px;\n border-radius: 5px;\n transition: all 0.3s;\n}\n.dv-capsule-chart .unit-label {\n height: 20px;\n font-size: 12px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n.dv-capsule-chart .unit-text {\n text-align: right;\n display: flex;\n align-items: flex-end;\n font-size: 12px;\n line-height: 20px;\n margin-left: 10px;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,aAAa;EACb,mBAAmB;EACnB,sBAAsB;EACtB,aAAa;EACb,WAAW;AACb;AACA;EACE,aAAa;EACb,sBAAsB;EACtB,8BAA8B;EAC9B,sBAAsB;EACtB,mBAAmB;EACnB,iBAAiB;EACjB,eAAe;AACjB;AACA;EACE,YAAY;EACZ,iBAAiB;AACnB;AACA;EACE,OAAO;EACP,aAAa;EACb,sBAAsB;EACtB,8BAA8B;AAChC;AACA;EACE,wBAAwB;EACxB,YAAY;EACZ,eAAe;EACf,kBAAkB;AACpB;AACA;EACE,WAAW;EACX,eAAe;EACf,kBAAkB;EAClB,oBAAoB;AACtB;AACA;EACE,YAAY;EACZ,eAAe;EACf,aAAa;EACb,mBAAmB;EACnB,mBAAmB;EACnB,8BAA8B;AAChC;AACA;EACE,iBAAiB;EACjB,aAAa;EACb,qBAAqB;EACrB,eAAe;EACf,iBAAiB;EACjB,iBAAiB;AACnB","file":"main.vue","sourcesContent":[".dv-capsule-chart {\n position: relative;\n display: flex;\n flex-direction: row;\n box-sizing: border-box;\n padding: 10px;\n color: #fff;\n}\n.dv-capsule-chart .label-column {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n box-sizing: border-box;\n padding-right: 10px;\n text-align: right;\n font-size: 12px;\n}\n.dv-capsule-chart .label-column div {\n height: 20px;\n line-height: 20px;\n}\n.dv-capsule-chart .capsule-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n.dv-capsule-chart .capsule-item {\n box-shadow: 0 0 3px #999;\n height: 10px;\n margin: 5px 0px;\n border-radius: 5px;\n}\n.dv-capsule-chart .capsule-item div {\n height: 8px;\n margin-top: 1px;\n border-radius: 5px;\n transition: all 0.3s;\n}\n.dv-capsule-chart .unit-label {\n height: 20px;\n font-size: 12px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n.dv-capsule-chart .unit-text {\n text-align: right;\n display: flex;\n align-items: flex-end;\n font-size: 12px;\n line-height: 20px;\n margin-left: 10px;\n}\n"]}, media: undefined });
|
||||
inject("data-v-6f678c1a_0", { source: ".dv-capsule-chart {\n position: relative;\n display: flex;\n flex-direction: row;\n box-sizing: border-box;\n padding: 10px;\n color: #fff;\n}\n.dv-capsule-chart .label-column {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n box-sizing: border-box;\n padding-right: 10px;\n text-align: right;\n font-size: 12px;\n}\n.dv-capsule-chart .label-column div {\n height: 20px;\n line-height: 20px;\n}\n.dv-capsule-chart .capsule-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n.dv-capsule-chart .capsule-item {\n box-shadow: 0 0 3px #999;\n height: 10px;\n margin: 5px 0px;\n border-radius: 5px;\n}\n.dv-capsule-chart .capsule-item .capsule-item-column {\n position: relative;\n height: 8px;\n margin-top: 1px;\n border-radius: 5px;\n transition: all 0.3s;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n}\n.dv-capsule-chart .capsule-item .capsule-item-column .capsule-item-value {\n font-size: 12px;\n transform: translateX(100%);\n}\n.dv-capsule-chart .unit-label {\n height: 20px;\n font-size: 12px;\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.dv-capsule-chart .unit-text {\n text-align: right;\n display: flex;\n align-items: flex-end;\n font-size: 12px;\n line-height: 20px;\n margin-left: 10px;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,aAAa;EACb,mBAAmB;EACnB,sBAAsB;EACtB,aAAa;EACb,WAAW;AACb;AACA;EACE,aAAa;EACb,sBAAsB;EACtB,8BAA8B;EAC9B,sBAAsB;EACtB,mBAAmB;EACnB,iBAAiB;EACjB,eAAe;AACjB;AACA;EACE,YAAY;EACZ,iBAAiB;AACnB;AACA;EACE,OAAO;EACP,aAAa;EACb,sBAAsB;EACtB,8BAA8B;AAChC;AACA;EACE,wBAAwB;EACxB,YAAY;EACZ,eAAe;EACf,kBAAkB;AACpB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,eAAe;EACf,kBAAkB;EAClB,oBAAoB;EACpB,aAAa;EACb,yBAAyB;EACzB,mBAAmB;AACrB;AACA;EACE,eAAe;EACf,2BAA2B;AAC7B;AACA;EACE,YAAY;EACZ,eAAe;EACf,kBAAkB;EAClB,aAAa;EACb,8BAA8B;EAC9B,mBAAmB;AACrB;AACA;EACE,iBAAiB;EACjB,aAAa;EACb,qBAAqB;EACrB,eAAe;EACf,iBAAiB;EACjB,iBAAiB;AACnB","file":"main.vue","sourcesContent":[".dv-capsule-chart {\n position: relative;\n display: flex;\n flex-direction: row;\n box-sizing: border-box;\n padding: 10px;\n color: #fff;\n}\n.dv-capsule-chart .label-column {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n box-sizing: border-box;\n padding-right: 10px;\n text-align: right;\n font-size: 12px;\n}\n.dv-capsule-chart .label-column div {\n height: 20px;\n line-height: 20px;\n}\n.dv-capsule-chart .capsule-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n.dv-capsule-chart .capsule-item {\n box-shadow: 0 0 3px #999;\n height: 10px;\n margin: 5px 0px;\n border-radius: 5px;\n}\n.dv-capsule-chart .capsule-item .capsule-item-column {\n position: relative;\n height: 8px;\n margin-top: 1px;\n border-radius: 5px;\n transition: all 0.3s;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n}\n.dv-capsule-chart .capsule-item .capsule-item-column .capsule-item-value {\n font-size: 12px;\n transform: translateX(100%);\n}\n.dv-capsule-chart .unit-label {\n height: 20px;\n font-size: 12px;\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.dv-capsule-chart .unit-text {\n text-align: right;\n display: flex;\n align-items: flex-end;\n font-size: 12px;\n line-height: 20px;\n margin-left: 10px;\n}\n"]}, media: undefined });
|
||||
|
||||
};
|
||||
/* scoped */
|
||||
@ -20240,9 +20293,9 @@
|
||||
},
|
||||
|
||||
data() {
|
||||
const timestamp = Date.now();
|
||||
const id = uuid();
|
||||
return {
|
||||
gradientId: `water-level-pond-${timestamp}`,
|
||||
gradientId: `water-level-pond-${id}`,
|
||||
defaultConfig: {
|
||||
/**
|
||||
* @description Data
|
||||
@ -20618,7 +20671,7 @@
|
||||
/* style */
|
||||
const __vue_inject_styles__$u = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-48b03636_0", { source: ".dv-water-pond-level {\n position: relative;\n}\n.dv-water-pond-level svg {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-water-pond-level text {\n font-size: 25px;\n font-weight: bold;\n text-anchor: middle;\n dominant-baseline: middle;\n}\n.dv-water-pond-level ellipse,\n.dv-water-pond-level rect {\n fill: none;\n stroke-width: 3;\n}\n.dv-water-pond-level canvas {\n margin-top: 8px;\n margin-left: 8px;\n width: calc(100% - 16px);\n height: calc(100% - 16px);\n box-sizing: border-box;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,eAAe;EACf,iBAAiB;EACjB,mBAAmB;EACnB,yBAAyB;AAC3B;AACA;;EAEE,UAAU;EACV,eAAe;AACjB;AACA;EACE,eAAe;EACf,gBAAgB;EAChB,wBAAwB;EACxB,yBAAyB;EACzB,sBAAsB;AACxB","file":"main.vue","sourcesContent":[".dv-water-pond-level {\n position: relative;\n}\n.dv-water-pond-level svg {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-water-pond-level text {\n font-size: 25px;\n font-weight: bold;\n text-anchor: middle;\n dominant-baseline: middle;\n}\n.dv-water-pond-level ellipse,\n.dv-water-pond-level rect {\n fill: none;\n stroke-width: 3;\n}\n.dv-water-pond-level canvas {\n margin-top: 8px;\n margin-left: 8px;\n width: calc(100% - 16px);\n height: calc(100% - 16px);\n box-sizing: border-box;\n}\n"]}, media: undefined });
|
||||
inject("data-v-be672a2c_0", { source: ".dv-water-pond-level {\n position: relative;\n}\n.dv-water-pond-level svg {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-water-pond-level text {\n font-size: 25px;\n font-weight: bold;\n text-anchor: middle;\n dominant-baseline: middle;\n}\n.dv-water-pond-level ellipse,\n.dv-water-pond-level rect {\n fill: none;\n stroke-width: 3;\n}\n.dv-water-pond-level canvas {\n margin-top: 8px;\n margin-left: 8px;\n width: calc(100% - 16px);\n height: calc(100% - 16px);\n box-sizing: border-box;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,eAAe;EACf,iBAAiB;EACjB,mBAAmB;EACnB,yBAAyB;AAC3B;AACA;;EAEE,UAAU;EACV,eAAe;AACjB;AACA;EACE,eAAe;EACf,gBAAgB;EAChB,wBAAwB;EACxB,yBAAyB;EACzB,sBAAsB;AACxB","file":"main.vue","sourcesContent":[".dv-water-pond-level {\n position: relative;\n}\n.dv-water-pond-level svg {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n}\n.dv-water-pond-level text {\n font-size: 25px;\n font-weight: bold;\n text-anchor: middle;\n dominant-baseline: middle;\n}\n.dv-water-pond-level ellipse,\n.dv-water-pond-level rect {\n fill: none;\n stroke-width: 3;\n}\n.dv-water-pond-level canvas {\n margin-top: 8px;\n margin-left: 8px;\n width: calc(100% - 16px);\n height: calc(100% - 16px);\n box-sizing: border-box;\n}\n"]}, media: undefined });
|
||||
|
||||
};
|
||||
/* scoped */
|
||||
@ -20661,10 +20714,10 @@
|
||||
},
|
||||
|
||||
data() {
|
||||
const timestamp = Date.now();
|
||||
const id = uuid();
|
||||
return {
|
||||
gradientId1: `percent-pond-gradientId1-${timestamp}`,
|
||||
gradientId2: `percent-pond-gradientId2-${timestamp}`,
|
||||
gradientId1: `percent-pond-gradientId1-${id}`,
|
||||
gradientId2: `percent-pond-gradientId2-${id}`,
|
||||
width: 0,
|
||||
height: 0,
|
||||
defaultConfig: {
|
||||
@ -20870,9 +20923,12 @@
|
||||
$refs
|
||||
} = this;
|
||||
await $nextTick();
|
||||
const dom = $refs['percent-pond'];
|
||||
this.width = dom.clientWidth;
|
||||
this.height = dom.clientHeight;
|
||||
const {
|
||||
clientWidth,
|
||||
clientHeight
|
||||
} = $refs['percent-pond'];
|
||||
this.width = clientWidth;
|
||||
this.height = clientHeight;
|
||||
},
|
||||
|
||||
mergeConfig() {
|
||||
@ -20996,7 +21052,7 @@
|
||||
/* style */
|
||||
const __vue_inject_styles__$v = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-67d721de_0", { source: ".dv-percent-pond {\n position: relative;\n display: flex;\n flex-direction: column;\n}\n.dv-percent-pond svg {\n position: absolute;\n left: 0px;\n top: 0px;\n width: 100%;\n height: 100%;\n}\n.dv-percent-pond polyline {\n transition: all 0.3s;\n}\n.dv-percent-pond text {\n font-size: 25px;\n font-weight: bold;\n text-anchor: middle;\n dominant-baseline: middle;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,aAAa;EACb,sBAAsB;AACxB;AACA;EACE,kBAAkB;EAClB,SAAS;EACT,QAAQ;EACR,WAAW;EACX,YAAY;AACd;AACA;EACE,oBAAoB;AACtB;AACA;EACE,eAAe;EACf,iBAAiB;EACjB,mBAAmB;EACnB,yBAAyB;AAC3B","file":"main.vue","sourcesContent":[".dv-percent-pond {\n position: relative;\n display: flex;\n flex-direction: column;\n}\n.dv-percent-pond svg {\n position: absolute;\n left: 0px;\n top: 0px;\n width: 100%;\n height: 100%;\n}\n.dv-percent-pond polyline {\n transition: all 0.3s;\n}\n.dv-percent-pond text {\n font-size: 25px;\n font-weight: bold;\n text-anchor: middle;\n dominant-baseline: middle;\n}\n"]}, media: undefined });
|
||||
inject("data-v-05a0166f_0", { source: ".dv-percent-pond {\n position: relative;\n display: flex;\n flex-direction: column;\n}\n.dv-percent-pond svg {\n position: absolute;\n left: 0px;\n top: 0px;\n width: 100%;\n height: 100%;\n}\n.dv-percent-pond polyline {\n transition: all 0.3s;\n}\n.dv-percent-pond text {\n font-size: 25px;\n font-weight: bold;\n text-anchor: middle;\n dominant-baseline: middle;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,aAAa;EACb,sBAAsB;AACxB;AACA;EACE,kBAAkB;EAClB,SAAS;EACT,QAAQ;EACR,WAAW;EACX,YAAY;AACd;AACA;EACE,oBAAoB;AACtB;AACA;EACE,eAAe;EACf,iBAAiB;EACjB,mBAAmB;EACnB,yBAAyB;AAC3B","file":"main.vue","sourcesContent":[".dv-percent-pond {\n position: relative;\n display: flex;\n flex-direction: column;\n}\n.dv-percent-pond svg {\n position: absolute;\n left: 0px;\n top: 0px;\n width: 100%;\n height: 100%;\n}\n.dv-percent-pond polyline {\n transition: all 0.3s;\n}\n.dv-percent-pond text {\n font-size: 25px;\n font-weight: bold;\n text-anchor: middle;\n dominant-baseline: middle;\n}\n"]}, media: undefined });
|
||||
|
||||
};
|
||||
/* scoped */
|
||||
@ -21044,14 +21100,14 @@
|
||||
},
|
||||
|
||||
data() {
|
||||
const timestamp = Date.now();
|
||||
const id = uuid();
|
||||
return {
|
||||
ref: 'dv-flyline-chart',
|
||||
unique: Math.random(),
|
||||
maskId: `flyline-mask-id-${timestamp}`,
|
||||
maskCircleId: `mask-circle-id-${timestamp}`,
|
||||
gradientId: `gradient-id-${timestamp}`,
|
||||
gradient2Id: `gradient2-id-${timestamp}`,
|
||||
maskId: `flyline-mask-id-${id}`,
|
||||
maskCircleId: `mask-circle-id-${id}`,
|
||||
gradientId: `gradient-id-${id}`,
|
||||
gradient2Id: `gradient2-id-${id}`,
|
||||
defaultConfig: {
|
||||
/**
|
||||
* @description Flyline chart center point
|
||||
@ -21717,7 +21773,7 @@
|
||||
/* style */
|
||||
const __vue_inject_styles__$w = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-e406698c_0", { source: ".dv-flyline-chart {\n display: flex;\n flex-direction: column;\n background-size: 100% 100%;\n}\n.dv-flyline-chart polyline {\n transition: all 0.3s;\n}\n.dv-flyline-chart text {\n text-anchor: middle;\n dominant-baseline: middle;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,sBAAsB;EACtB,0BAA0B;AAC5B;AACA;EACE,oBAAoB;AACtB;AACA;EACE,mBAAmB;EACnB,yBAAyB;AAC3B","file":"main.vue","sourcesContent":[".dv-flyline-chart {\n display: flex;\n flex-direction: column;\n background-size: 100% 100%;\n}\n.dv-flyline-chart polyline {\n transition: all 0.3s;\n}\n.dv-flyline-chart text {\n text-anchor: middle;\n dominant-baseline: middle;\n}\n"]}, media: undefined });
|
||||
inject("data-v-1edfcf29_0", { source: ".dv-flyline-chart {\n display: flex;\n flex-direction: column;\n background-size: 100% 100%;\n}\n.dv-flyline-chart polyline {\n transition: all 0.3s;\n}\n.dv-flyline-chart text {\n text-anchor: middle;\n dominant-baseline: middle;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,sBAAsB;EACtB,0BAA0B;AAC5B;AACA;EACE,oBAAoB;AACtB;AACA;EACE,mBAAmB;EACnB,yBAAyB;AAC3B","file":"main.vue","sourcesContent":[".dv-flyline-chart {\n display: flex;\n flex-direction: column;\n background-size: 100% 100%;\n}\n.dv-flyline-chart polyline {\n transition: all 0.3s;\n}\n.dv-flyline-chart text {\n text-anchor: middle;\n dominant-baseline: middle;\n}\n"]}, media: undefined });
|
||||
|
||||
};
|
||||
/* scoped */
|
||||
@ -21765,12 +21821,12 @@
|
||||
},
|
||||
|
||||
data() {
|
||||
const timestamp = Date.now();
|
||||
const id = uuid();
|
||||
return {
|
||||
ref: 'dv-flyline-chart-enhanced',
|
||||
unique: Math.random(),
|
||||
flylineGradientId: `flyline-gradient-id-${timestamp}`,
|
||||
haloGradientId: `halo-gradient-id-${timestamp}`,
|
||||
flylineGradientId: `flyline-gradient-id-${id}`,
|
||||
haloGradientId: `halo-gradient-id-${id}`,
|
||||
|
||||
/**
|
||||
* @description Type Declaration
|
||||
@ -22502,7 +22558,7 @@
|
||||
/* style */
|
||||
const __vue_inject_styles__$x = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-5cc44b0b_0", { source: ".dv-flyline-chart-enhanced {\n display: flex;\n flex-direction: column;\n background-size: 100% 100%;\n}\n.dv-flyline-chart-enhanced text {\n text-anchor: middle;\n dominant-baseline: middle;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,sBAAsB;EACtB,0BAA0B;AAC5B;AACA;EACE,mBAAmB;EACnB,yBAAyB;AAC3B","file":"main.vue","sourcesContent":[".dv-flyline-chart-enhanced {\n display: flex;\n flex-direction: column;\n background-size: 100% 100%;\n}\n.dv-flyline-chart-enhanced text {\n text-anchor: middle;\n dominant-baseline: middle;\n}\n"]}, media: undefined });
|
||||
inject("data-v-a7b8c35c_0", { source: ".dv-flyline-chart-enhanced {\n display: flex;\n flex-direction: column;\n background-size: 100% 100%;\n}\n.dv-flyline-chart-enhanced text {\n text-anchor: middle;\n dominant-baseline: middle;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,sBAAsB;EACtB,0BAA0B;AAC5B;AACA;EACE,mBAAmB;EACnB,yBAAyB;AAC3B","file":"main.vue","sourcesContent":[".dv-flyline-chart-enhanced {\n display: flex;\n flex-direction: column;\n background-size: 100% 100%;\n}\n.dv-flyline-chart-enhanced text {\n text-anchor: middle;\n dominant-baseline: middle;\n}\n"]}, media: undefined });
|
||||
|
||||
};
|
||||
/* scoped */
|
||||
@ -22928,7 +22984,15 @@
|
||||
* @default carousel = 'single'
|
||||
* @example carousel = 'single' | 'page'
|
||||
*/
|
||||
carousel: 'single'
|
||||
carousel: 'single',
|
||||
|
||||
/**
|
||||
* @description Pause scroll when mouse hovered
|
||||
* @type {Boolean}
|
||||
* @default hoverPause = true
|
||||
* @example hoverPause = true | false
|
||||
*/
|
||||
hoverPause: true
|
||||
},
|
||||
mergedConfig: null,
|
||||
header: [],
|
||||
@ -22956,6 +23020,23 @@
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleHover(enter, ri, ci, row, ceil) {
|
||||
const {
|
||||
mergedConfig,
|
||||
emitEvent,
|
||||
stopAnimation,
|
||||
animation
|
||||
} = this;
|
||||
if (enter) emitEvent('mouseover', ri, ci, row, ceil);
|
||||
if (!mergedConfig.hoverPause) return;
|
||||
|
||||
if (enter) {
|
||||
stopAnimation();
|
||||
} else {
|
||||
animation(true);
|
||||
}
|
||||
},
|
||||
|
||||
afterAutoResizeMixinInit() {
|
||||
const {
|
||||
calcData
|
||||
@ -23158,12 +23239,12 @@
|
||||
clearTimeout(animationHandler);
|
||||
},
|
||||
|
||||
emitEvent(ri, ci, row, ceil) {
|
||||
emitEvent(type, ri, ci, row, ceil) {
|
||||
const {
|
||||
ceils,
|
||||
rowIndex
|
||||
} = row;
|
||||
this.$emit('click', {
|
||||
this.$emit(type, {
|
||||
row: ceils,
|
||||
ceil,
|
||||
rowIndex,
|
||||
@ -23255,7 +23336,13 @@
|
||||
domProps: { innerHTML: _vm._s(ceil) },
|
||||
on: {
|
||||
click: function($event) {
|
||||
return _vm.emitEvent(ri, ci, row, ceil)
|
||||
return _vm.emitEvent("click", ri, ci, row, ceil)
|
||||
},
|
||||
mouseenter: function($event) {
|
||||
return _vm.handleHover(true, ri, ci, row, ceil)
|
||||
},
|
||||
mouseleave: function($event) {
|
||||
return _vm.handleHover(false)
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -23274,7 +23361,7 @@
|
||||
/* style */
|
||||
const __vue_inject_styles__$z = function (inject) {
|
||||
if (!inject) return
|
||||
inject("data-v-1aad958a_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-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 });
|
||||
|
||||
};
|
||||
/* scoped */
|
||||
|
||||
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
@ -28,7 +28,7 @@ export default {
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
defaultConfig: {
|
||||
/**
|
||||
@ -94,7 +94,13 @@ export default {
|
||||
* @type {String}
|
||||
* @default animationFrame = 50
|
||||
*/
|
||||
animationFrame: 50
|
||||
animationFrame: 50,
|
||||
/**
|
||||
* @description showOriginValue
|
||||
* @type {Boolean}
|
||||
* @default showOriginValue = false
|
||||
*/
|
||||
showOriginValue: false
|
||||
},
|
||||
|
||||
mergedConfig: null,
|
||||
@ -107,34 +113,47 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
digitalFlop () {
|
||||
digitalFlop() {
|
||||
const { mergedConfig, activeIndex } = this
|
||||
|
||||
if (!mergedConfig) return {}
|
||||
|
||||
const { digitalFlopStyle, digitalFlopToFixed, data } = mergedConfig
|
||||
const {
|
||||
digitalFlopStyle,
|
||||
digitalFlopToFixed,
|
||||
data,
|
||||
showOriginValue
|
||||
} = mergedConfig
|
||||
|
||||
const value = data.map(({ value }) => value)
|
||||
|
||||
const sum = value.reduce((all, v) => all + v, 0)
|
||||
let displayValue
|
||||
|
||||
const percent = parseFloat(value[activeIndex] / sum * 100) || 0
|
||||
if (showOriginValue) {
|
||||
displayValue = value[activeIndex]
|
||||
} else {
|
||||
const sum = value.reduce((all, v) => all + v, 0)
|
||||
|
||||
const percent = parseFloat((value[activeIndex] / sum) * 100) || 0
|
||||
|
||||
displayValue = percent
|
||||
}
|
||||
|
||||
return {
|
||||
content: '{nt}%',
|
||||
number: [percent],
|
||||
content: showOriginValue ? '{nt}' : '{nt}%',
|
||||
number: [displayValue],
|
||||
style: digitalFlopStyle,
|
||||
toFixed: digitalFlopToFixed
|
||||
}
|
||||
},
|
||||
ringName () {
|
||||
ringName() {
|
||||
const { mergedConfig, activeIndex } = this
|
||||
|
||||
if (!mergedConfig) return ''
|
||||
|
||||
return mergedConfig.data[activeIndex].name
|
||||
},
|
||||
fontSize () {
|
||||
fontSize() {
|
||||
const { mergedConfig } = this
|
||||
|
||||
if (!mergedConfig) return ''
|
||||
@ -143,7 +162,7 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
config () {
|
||||
config() {
|
||||
const { animationHandler, mergeConfig, setRingOption } = this
|
||||
|
||||
clearTimeout(animationHandler)
|
||||
@ -156,7 +175,7 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
init() {
|
||||
const { initChart, mergeConfig, setRingOption } = this
|
||||
|
||||
initChart()
|
||||
@ -165,17 +184,20 @@ export default {
|
||||
|
||||
setRingOption()
|
||||
},
|
||||
initChart () {
|
||||
initChart() {
|
||||
const { $refs } = this
|
||||
|
||||
this.chart = new Charts($refs['active-ring-chart'])
|
||||
},
|
||||
mergeConfig () {
|
||||
mergeConfig() {
|
||||
const { defaultConfig, config } = this
|
||||
|
||||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
this.mergedConfig = deepMerge(
|
||||
deepClone(defaultConfig, true),
|
||||
config || {}
|
||||
)
|
||||
},
|
||||
setRingOption () {
|
||||
setRingOption() {
|
||||
const { getRingOption, chart, ringAnimation } = this
|
||||
|
||||
const option = getRingOption()
|
||||
@ -184,7 +206,7 @@ export default {
|
||||
|
||||
ringAnimation()
|
||||
},
|
||||
getRingOption () {
|
||||
getRingOption() {
|
||||
const { mergedConfig, getRealRadius } = this
|
||||
|
||||
const radius = getRealRadius()
|
||||
@ -206,7 +228,7 @@ export default {
|
||||
color: mergedConfig.color
|
||||
}
|
||||
},
|
||||
getRealRadius (active = false) {
|
||||
getRealRadius(active = false) {
|
||||
const { mergedConfig, chart } = this
|
||||
|
||||
const { radius, activeRadius, lineWidth } = mergedConfig
|
||||
@ -217,14 +239,15 @@ export default {
|
||||
|
||||
let realRadius = active ? activeRadius : radius
|
||||
|
||||
if (typeof realRadius !== 'number') realRadius = parseInt(realRadius) / 100 * maxRadius
|
||||
if (typeof realRadius !== 'number')
|
||||
realRadius = (parseInt(realRadius) / 100) * maxRadius
|
||||
|
||||
const insideRadius = realRadius - halfLineWidth
|
||||
const outSideRadius = realRadius + halfLineWidth
|
||||
|
||||
return [insideRadius, outSideRadius]
|
||||
},
|
||||
ringAnimation () {
|
||||
ringAnimation() {
|
||||
let { activeIndex, getRingOption, chart, getRealRadius } = this
|
||||
|
||||
const radius = getRealRadius()
|
||||
@ -257,12 +280,12 @@ export default {
|
||||
}, activeTimeGap)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
const { init } = this
|
||||
|
||||
init()
|
||||
},
|
||||
beforeDestroy () {
|
||||
beforeDestroy() {
|
||||
const { animationHandler } = this
|
||||
|
||||
clearTimeout(animationHandler)
|
||||
|
||||
@ -216,6 +216,7 @@
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
@ -245,10 +246,10 @@ export default {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: 'border-box-11',
|
||||
filterId: `border-box-11-filterId-${timestamp}`,
|
||||
filterId: `border-box-11-filterId-${id}`,
|
||||
|
||||
defaultColor: ['#8aaafb', '#1f33a2'],
|
||||
|
||||
|
||||
@ -92,6 +92,7 @@
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
@ -113,10 +114,10 @@ export default {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = +new Date()
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: 'border-box-12',
|
||||
filterId: `borderr-box-12-filterId-${timestamp}`,
|
||||
filterId: `borderr-box-12-filterId-${id}`,
|
||||
|
||||
defaultColor: ['#2e6099', '#7ce7fd'],
|
||||
|
||||
|
||||
@ -61,7 +61,6 @@ export default {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = +new Date()
|
||||
return {
|
||||
ref: 'border-box-13',
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<defs>
|
||||
<path
|
||||
:id="path"
|
||||
:d="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
|
||||
:d="pathD"
|
||||
fill="transparent"
|
||||
/>
|
||||
<radialGradient
|
||||
@ -25,7 +25,7 @@
|
||||
<circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
|
||||
<animateMotion
|
||||
:dur="`${dur}s`"
|
||||
:path="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
|
||||
:path="pathD"
|
||||
rotate="auto"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
@ -65,6 +65,7 @@
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
@ -85,15 +86,19 @@ export default {
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
},
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: 'border-box-8',
|
||||
path: `border-box-8-path-${timestamp}`,
|
||||
gradient: `border-box-8-gradient-${timestamp}`,
|
||||
mask: `border-box-8-mask-${timestamp}`,
|
||||
path: `border-box-8-path-${id}`,
|
||||
gradient: `border-box-8-gradient-${id}`,
|
||||
mask: `border-box-8-mask-${id}`,
|
||||
|
||||
defaultColor: ['#235fa7', '#4fd2dd'],
|
||||
|
||||
@ -105,6 +110,13 @@ export default {
|
||||
const { width, height } = this
|
||||
|
||||
return (width + height - 5) * 2
|
||||
},
|
||||
pathD () {
|
||||
const { reverse, width, height } = this
|
||||
|
||||
if (reverse) return `M 2.5, 2.5 L 2.5, ${height - 2.5} L ${width - 2.5}, ${height - 2.5} L ${width - 2.5}, 2.5 L 2.5, 2.5`
|
||||
|
||||
return `M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
@ -125,6 +125,7 @@
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
@ -144,12 +145,12 @@ export default {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: 'border-box-9',
|
||||
|
||||
gradientId: `border-box-9-gradient-${timestamp}`,
|
||||
maskId: `border-box-9-mask-${timestamp}`,
|
||||
gradientId: `border-box-9-gradient-${id}`,
|
||||
maskId: `border-box-9-mask-${id}`,
|
||||
|
||||
defaultColor: ['#11eefd', '#0078d2'],
|
||||
|
||||
|
||||
@ -31,19 +31,27 @@
|
||||
margin: 5px 0px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.dv-capsule-chart .capsule-item div {
|
||||
.dv-capsule-chart .capsule-item .capsule-item-column {
|
||||
position: relative;
|
||||
height: 8px;
|
||||
margin-top: 1px;
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.dv-capsule-chart .capsule-item .capsule-item-column .capsule-item-value {
|
||||
font-size: 12px;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
.dv-capsule-chart .unit-label {
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.dv-capsule-chart .unit-text {
|
||||
text-align: right;
|
||||
|
||||
@ -7,16 +7,23 @@
|
||||
</div>
|
||||
|
||||
<div class="capsule-container">
|
||||
<div
|
||||
class="capsule-item"
|
||||
v-for="(capsule, index) in capsuleLength"
|
||||
:key="index"
|
||||
>
|
||||
<div :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"></div>
|
||||
<div class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index">
|
||||
<div
|
||||
class="capsule-item-column"
|
||||
:style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
|
||||
>
|
||||
<div
|
||||
v-if="mergedConfig.showValue"
|
||||
class="capsule-item-value"
|
||||
>{{ capsuleValue[index] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unit-label">
|
||||
<div v-for="(label, index) in labelData" :key="label + index">{{ label }}</div>
|
||||
<div
|
||||
v-for="(label, index) in labelData"
|
||||
:key="label + index"
|
||||
>{{ label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -38,7 +45,7 @@ export default {
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
defaultConfig: {
|
||||
/**
|
||||
@ -54,42 +61,61 @@ export default {
|
||||
* @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']
|
||||
* @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
|
||||
*/
|
||||
colors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'],
|
||||
colors: [
|
||||
'#37a2da',
|
||||
'#32c5e9',
|
||||
'#67e0e3',
|
||||
'#9fe6b8',
|
||||
'#ffdb5c',
|
||||
'#ff9f7f',
|
||||
'#fb7293'
|
||||
],
|
||||
/**
|
||||
* @description Chart unit
|
||||
* @type {String}
|
||||
* @default unit = ''
|
||||
*/
|
||||
unit: ''
|
||||
unit: '',
|
||||
/**
|
||||
* @description Show item value
|
||||
* @type {Boolean}
|
||||
* @default showValue = false
|
||||
*/
|
||||
showValue: false
|
||||
},
|
||||
|
||||
mergedConfig: null,
|
||||
|
||||
capsuleLength: [],
|
||||
labelData: []
|
||||
capsuleValue: [],
|
||||
labelData: [],
|
||||
labelDataLength: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
config () {
|
||||
config() {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
calcData () {
|
||||
calcData() {
|
||||
const { mergeConfig, calcCapsuleLengthAndLabelData } = this
|
||||
|
||||
mergeConfig()
|
||||
|
||||
calcCapsuleLengthAndLabelData()
|
||||
},
|
||||
mergeConfig () {
|
||||
mergeConfig() {
|
||||
let { config, defaultConfig } = this
|
||||
|
||||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
this.mergedConfig = deepMerge(
|
||||
deepClone(defaultConfig, true),
|
||||
config || {}
|
||||
)
|
||||
},
|
||||
calcCapsuleLengthAndLabelData () {
|
||||
calcCapsuleLengthAndLabelData() {
|
||||
const { data } = this.mergedConfig
|
||||
|
||||
if (!data.length) return
|
||||
@ -98,14 +124,24 @@ export default {
|
||||
|
||||
const maxValue = Math.max(...capsuleValue)
|
||||
|
||||
this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0)
|
||||
this.capsuleValue = capsuleValue
|
||||
|
||||
this.capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0))
|
||||
|
||||
const oneFifth = maxValue / 5
|
||||
|
||||
this.labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))))
|
||||
const labelData = Array.from(
|
||||
new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))
|
||||
)
|
||||
|
||||
this.labelData = labelData
|
||||
|
||||
this.labelDataLength = Array.from(labelData).map(v =>
|
||||
maxValue ? v / maxValue : 0
|
||||
)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
|
||||
@ -5,6 +5,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
import Charts from '@jiaminghi/charts'
|
||||
@ -19,10 +21,10 @@ export default {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: `charts-container-${timestamp}`,
|
||||
chartRef: `chart-${timestamp}`,
|
||||
ref: `charts-container-${id}`,
|
||||
chartRef: `chart-${id}`,
|
||||
|
||||
chart: null
|
||||
}
|
||||
|
||||
@ -147,6 +147,7 @@
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
@ -162,17 +163,17 @@ export default {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: 'decoration-10',
|
||||
|
||||
animationId1: `d10ani1${timestamp}`,
|
||||
animationId2: `d10ani2${timestamp}`,
|
||||
animationId3: `d10ani3${timestamp}`,
|
||||
animationId4: `d10ani4${timestamp}`,
|
||||
animationId5: `d10ani5${timestamp}`,
|
||||
animationId6: `d10ani6${timestamp}`,
|
||||
animationId7: `d10ani7${timestamp}`,
|
||||
animationId1: `d10ani1${id}`,
|
||||
animationId2: `d10ani2${id}`,
|
||||
animationId3: `d10ani3${id}`,
|
||||
animationId4: `d10ani4${id}`,
|
||||
animationId5: `d10ani5${id}`,
|
||||
animationId6: `d10ani6${id}`,
|
||||
animationId7: `d10ani7${id}`,
|
||||
|
||||
defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],
|
||||
|
||||
|
||||
@ -72,7 +72,6 @@ export default {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
return {
|
||||
ref: 'decoration-11',
|
||||
|
||||
|
||||
@ -7,20 +7,22 @@
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
flex: 1;
|
||||
}
|
||||
.dv-decoration-4 .normal {
|
||||
height: 0% !important;
|
||||
animation: ani-height 3s ease-in-out infinite;
|
||||
left: 50%;
|
||||
margin-left: -2px;
|
||||
}
|
||||
.dv-decoration-4 .reverse {
|
||||
width: 0% !important;
|
||||
animation: ani-width 3s ease-in-out infinite;
|
||||
top: 50%;
|
||||
margin-top: -2px;
|
||||
}
|
||||
@keyframes ani-height {
|
||||
0% {
|
||||
height: 0%;
|
||||
}
|
||||
70% {
|
||||
height: 100%;
|
||||
}
|
||||
@ -29,6 +31,9 @@
|
||||
}
|
||||
}
|
||||
@keyframes ani-width {
|
||||
0% {
|
||||
width: 0%;
|
||||
}
|
||||
70% {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -85,6 +85,7 @@
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
@ -106,11 +107,11 @@ export default {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: 'decoration-9',
|
||||
|
||||
polygonId: `decoration-9-polygon-${timestamp}`,
|
||||
polygonId: `decoration-9-polygon-${id}`,
|
||||
|
||||
svgWH: [100, 100],
|
||||
|
||||
|
||||
@ -153,7 +153,7 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
import { randomExtend, getPointDistance } from '../../../util/index'
|
||||
import { randomExtend, getPointDistance, uuid } from '../../../util/index'
|
||||
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
@ -171,14 +171,14 @@ export default {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: 'dv-flyline-chart',
|
||||
unique: Math.random(),
|
||||
maskId: `flyline-mask-id-${timestamp}`,
|
||||
maskCircleId: `mask-circle-id-${timestamp}`,
|
||||
gradientId: `gradient-id-${timestamp}`,
|
||||
gradient2Id: `gradient2-id-${timestamp}`,
|
||||
maskId: `flyline-mask-id-${id}`,
|
||||
maskCircleId: `mask-circle-id-${id}`,
|
||||
gradientId: `gradient-id-${id}`,
|
||||
gradient2Id: `gradient2-id-${id}`,
|
||||
|
||||
defaultConfig: {
|
||||
/**
|
||||
|
||||
@ -155,7 +155,7 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
import { randomExtend, getPointDistance } from '../../../util/index'
|
||||
import { randomExtend, getPointDistance, uuid } from '../../../util/index'
|
||||
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
@ -173,12 +173,12 @@ export default {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: 'dv-flyline-chart-enhanced',
|
||||
unique: Math.random(),
|
||||
flylineGradientId: `flyline-gradient-id-${timestamp}`,
|
||||
haloGradientId: `halo-gradient-id-${timestamp}`,
|
||||
flylineGradientId: `flyline-gradient-id-${id}`,
|
||||
haloGradientId: `halo-gradient-id-${id}`,
|
||||
/**
|
||||
* @description Type Declaration
|
||||
*
|
||||
|
||||
@ -44,6 +44,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
@ -57,10 +59,10 @@ export default {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
const id = uuid()
|
||||
return {
|
||||
gradientId1: `percent-pond-gradientId1-${timestamp}`,
|
||||
gradientId2: `percent-pond-gradientId2-${timestamp}`,
|
||||
gradientId1: `percent-pond-gradientId1-${id}`,
|
||||
gradientId2: `percent-pond-gradientId2-${id}`,
|
||||
|
||||
width: 0,
|
||||
height: 0,
|
||||
@ -234,10 +236,10 @@ export default {
|
||||
|
||||
await $nextTick()
|
||||
|
||||
const dom = $refs['percent-pond']
|
||||
const { clientWidth, clientHeight } = $refs['percent-pond']
|
||||
|
||||
this.width = dom.clientWidth
|
||||
this.height = dom.clientHeight
|
||||
this.width = clientWidth
|
||||
this.height = clientHeight
|
||||
},
|
||||
mergeConfig () {
|
||||
const { config, defaultConfig } = this
|
||||
|
||||
@ -37,7 +37,9 @@
|
||||
:style="`width: ${widths[ci]}px;`"
|
||||
:align="aligns[ci]"
|
||||
v-html="ceil"
|
||||
@click="emitEvent(ri, ci, row, ceil)"
|
||||
@click="emitEvent('click', ri, ci, row, ceil)"
|
||||
@mouseenter="handleHover(true, ri, ci, row, ceil)"
|
||||
@mouseleave="handleHover(false)"
|
||||
/>
|
||||
|
||||
</div>
|
||||
@ -146,7 +148,14 @@ export default {
|
||||
* @default carousel = 'single'
|
||||
* @example carousel = 'single' | 'page'
|
||||
*/
|
||||
carousel: 'single'
|
||||
carousel: 'single',
|
||||
/**
|
||||
* @description Pause scroll when mouse hovered
|
||||
* @type {Boolean}
|
||||
* @default hoverPause = true
|
||||
* @example hoverPause = true | false
|
||||
*/
|
||||
hoverPause: true
|
||||
},
|
||||
|
||||
mergedConfig: null,
|
||||
@ -182,6 +191,18 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleHover(enter, ri, ci, row, ceil){
|
||||
const { mergedConfig, emitEvent, stopAnimation, animation } = this
|
||||
|
||||
if (enter) emitEvent('mouseover', ri, ci, row, ceil)
|
||||
if (!mergedConfig.hoverPause) return
|
||||
|
||||
if (enter) {
|
||||
stopAnimation()
|
||||
} else {
|
||||
animation(true)
|
||||
}
|
||||
},
|
||||
afterAutoResizeMixinInit () {
|
||||
const { calcData } = this
|
||||
|
||||
@ -355,10 +376,10 @@ export default {
|
||||
|
||||
clearTimeout(animationHandler)
|
||||
},
|
||||
emitEvent (ri, ci, row, ceil) {
|
||||
emitEvent (type, ri, ci, row, ceil) {
|
||||
const { ceils, rowIndex } = row
|
||||
|
||||
this.$emit('click', {
|
||||
this.$emit(type, {
|
||||
row: ceils,
|
||||
ceil,
|
||||
rowIndex,
|
||||
|
||||
@ -40,6 +40,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
@ -53,9 +55,9 @@ export default {
|
||||
default: () => ({})
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
const id = uuid()
|
||||
return {
|
||||
gradientId: `water-level-pond-${timestamp}`,
|
||||
gradientId: `water-level-pond-${id}`,
|
||||
|
||||
defaultConfig: {
|
||||
/**
|
||||
|
||||
@ -37,3 +37,11 @@ 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) {
|
||||
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.8.1",
|
||||
"version": "2.9.0",
|
||||
"author": "JiaMing <743192023@qq.com>",
|
||||
"description": "Vue Large screen data display component library",
|
||||
"main": "lib/index.js",
|
||||
|
||||
@ -28,7 +28,7 @@ export default {
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
defaultConfig: {
|
||||
/**
|
||||
@ -94,7 +94,13 @@ export default {
|
||||
* @type {String}
|
||||
* @default animationFrame = 50
|
||||
*/
|
||||
animationFrame: 50
|
||||
animationFrame: 50,
|
||||
/**
|
||||
* @description showOriginValue
|
||||
* @type {Boolean}
|
||||
* @default showOriginValue = false
|
||||
*/
|
||||
showOriginValue: false
|
||||
},
|
||||
|
||||
mergedConfig: null,
|
||||
@ -107,34 +113,47 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
digitalFlop () {
|
||||
digitalFlop() {
|
||||
const { mergedConfig, activeIndex } = this
|
||||
|
||||
if (!mergedConfig) return {}
|
||||
|
||||
const { digitalFlopStyle, digitalFlopToFixed, data } = mergedConfig
|
||||
const {
|
||||
digitalFlopStyle,
|
||||
digitalFlopToFixed,
|
||||
data,
|
||||
showOriginValue
|
||||
} = mergedConfig
|
||||
|
||||
const value = data.map(({ value }) => value)
|
||||
|
||||
const sum = value.reduce((all, v) => all + v, 0)
|
||||
let displayValue
|
||||
|
||||
const percent = parseFloat(value[activeIndex] / sum * 100) || 0
|
||||
if (showOriginValue) {
|
||||
displayValue = value[activeIndex]
|
||||
} else {
|
||||
const sum = value.reduce((all, v) => all + v, 0)
|
||||
|
||||
const percent = parseFloat((value[activeIndex] / sum) * 100) || 0
|
||||
|
||||
displayValue = percent
|
||||
}
|
||||
|
||||
return {
|
||||
content: '{nt}%',
|
||||
number: [percent],
|
||||
content: showOriginValue ? '{nt}' : '{nt}%',
|
||||
number: [displayValue],
|
||||
style: digitalFlopStyle,
|
||||
toFixed: digitalFlopToFixed
|
||||
}
|
||||
},
|
||||
ringName () {
|
||||
ringName() {
|
||||
const { mergedConfig, activeIndex } = this
|
||||
|
||||
if (!mergedConfig) return ''
|
||||
|
||||
return mergedConfig.data[activeIndex].name
|
||||
},
|
||||
fontSize () {
|
||||
fontSize() {
|
||||
const { mergedConfig } = this
|
||||
|
||||
if (!mergedConfig) return ''
|
||||
@ -143,7 +162,7 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
config () {
|
||||
config() {
|
||||
const { animationHandler, mergeConfig, setRingOption } = this
|
||||
|
||||
clearTimeout(animationHandler)
|
||||
@ -156,7 +175,7 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
init() {
|
||||
const { initChart, mergeConfig, setRingOption } = this
|
||||
|
||||
initChart()
|
||||
@ -165,17 +184,20 @@ export default {
|
||||
|
||||
setRingOption()
|
||||
},
|
||||
initChart () {
|
||||
initChart() {
|
||||
const { $refs } = this
|
||||
|
||||
this.chart = new Charts($refs['active-ring-chart'])
|
||||
},
|
||||
mergeConfig () {
|
||||
mergeConfig() {
|
||||
const { defaultConfig, config } = this
|
||||
|
||||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
this.mergedConfig = deepMerge(
|
||||
deepClone(defaultConfig, true),
|
||||
config || {}
|
||||
)
|
||||
},
|
||||
setRingOption () {
|
||||
setRingOption() {
|
||||
const { getRingOption, chart, ringAnimation } = this
|
||||
|
||||
const option = getRingOption()
|
||||
@ -184,7 +206,7 @@ export default {
|
||||
|
||||
ringAnimation()
|
||||
},
|
||||
getRingOption () {
|
||||
getRingOption() {
|
||||
const { mergedConfig, getRealRadius } = this
|
||||
|
||||
const radius = getRealRadius()
|
||||
@ -206,7 +228,7 @@ export default {
|
||||
color: mergedConfig.color
|
||||
}
|
||||
},
|
||||
getRealRadius (active = false) {
|
||||
getRealRadius(active = false) {
|
||||
const { mergedConfig, chart } = this
|
||||
|
||||
const { radius, activeRadius, lineWidth } = mergedConfig
|
||||
@ -217,14 +239,15 @@ export default {
|
||||
|
||||
let realRadius = active ? activeRadius : radius
|
||||
|
||||
if (typeof realRadius !== 'number') realRadius = parseInt(realRadius) / 100 * maxRadius
|
||||
if (typeof realRadius !== 'number')
|
||||
realRadius = (parseInt(realRadius) / 100) * maxRadius
|
||||
|
||||
const insideRadius = realRadius - halfLineWidth
|
||||
const outSideRadius = realRadius + halfLineWidth
|
||||
|
||||
return [insideRadius, outSideRadius]
|
||||
},
|
||||
ringAnimation () {
|
||||
ringAnimation() {
|
||||
let { activeIndex, getRingOption, chart, getRealRadius } = this
|
||||
|
||||
const radius = getRealRadius()
|
||||
@ -257,12 +280,12 @@ export default {
|
||||
}, activeTimeGap)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
const { init } = this
|
||||
|
||||
init()
|
||||
},
|
||||
beforeDestroy () {
|
||||
beforeDestroy() {
|
||||
const { animationHandler } = this
|
||||
|
||||
clearTimeout(animationHandler)
|
||||
|
||||
@ -216,6 +216,7 @@
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
@ -245,10 +246,10 @@ export default {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: 'border-box-11',
|
||||
filterId: `border-box-11-filterId-${timestamp}`,
|
||||
filterId: `border-box-11-filterId-${id}`,
|
||||
|
||||
defaultColor: ['#8aaafb', '#1f33a2'],
|
||||
|
||||
|
||||
@ -92,6 +92,7 @@
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
@ -113,10 +114,10 @@ export default {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = +new Date()
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: 'border-box-12',
|
||||
filterId: `borderr-box-12-filterId-${timestamp}`,
|
||||
filterId: `borderr-box-12-filterId-${id}`,
|
||||
|
||||
defaultColor: ['#2e6099', '#7ce7fd'],
|
||||
|
||||
|
||||
@ -61,7 +61,6 @@ export default {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = +new Date()
|
||||
return {
|
||||
ref: 'border-box-13',
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<defs>
|
||||
<path
|
||||
:id="path"
|
||||
:d="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
|
||||
:d="pathD"
|
||||
fill="transparent"
|
||||
/>
|
||||
<radialGradient
|
||||
@ -25,7 +25,7 @@
|
||||
<circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
|
||||
<animateMotion
|
||||
:dur="`${dur}s`"
|
||||
:path="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
|
||||
:path="pathD"
|
||||
rotate="auto"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
@ -65,6 +65,7 @@
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
@ -85,15 +86,19 @@ export default {
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
},
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: 'border-box-8',
|
||||
path: `border-box-8-path-${timestamp}`,
|
||||
gradient: `border-box-8-gradient-${timestamp}`,
|
||||
mask: `border-box-8-mask-${timestamp}`,
|
||||
path: `border-box-8-path-${id}`,
|
||||
gradient: `border-box-8-gradient-${id}`,
|
||||
mask: `border-box-8-mask-${id}`,
|
||||
|
||||
defaultColor: ['#235fa7', '#4fd2dd'],
|
||||
|
||||
@ -105,6 +110,13 @@ export default {
|
||||
const { width, height } = this
|
||||
|
||||
return (width + height - 5) * 2
|
||||
},
|
||||
pathD () {
|
||||
const { reverse, width, height } = this
|
||||
|
||||
if (reverse) return `M 2.5, 2.5 L 2.5, ${height - 2.5} L ${width - 2.5}, ${height - 2.5} L ${width - 2.5}, 2.5 L 2.5, 2.5`
|
||||
|
||||
return `M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
@ -125,6 +125,7 @@
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
@ -144,12 +145,12 @@ export default {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: 'border-box-9',
|
||||
|
||||
gradientId: `border-box-9-gradient-${timestamp}`,
|
||||
maskId: `border-box-9-mask-${timestamp}`,
|
||||
gradientId: `border-box-9-gradient-${id}`,
|
||||
maskId: `border-box-9-mask-${id}`,
|
||||
|
||||
defaultColor: ['#11eefd', '#0078d2'],
|
||||
|
||||
|
||||
@ -7,16 +7,23 @@
|
||||
</div>
|
||||
|
||||
<div class="capsule-container">
|
||||
<div
|
||||
class="capsule-item"
|
||||
v-for="(capsule, index) in capsuleLength"
|
||||
:key="index"
|
||||
>
|
||||
<div :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"></div>
|
||||
<div class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index">
|
||||
<div
|
||||
class="capsule-item-column"
|
||||
:style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
|
||||
>
|
||||
<div
|
||||
v-if="mergedConfig.showValue"
|
||||
class="capsule-item-value"
|
||||
>{{ capsuleValue[index] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="unit-label">
|
||||
<div v-for="(label, index) in labelData" :key="label + index">{{ label }}</div>
|
||||
<div
|
||||
v-for="(label, index) in labelData"
|
||||
:key="label + index"
|
||||
>{{ label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -38,7 +45,7 @@ export default {
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
defaultConfig: {
|
||||
/**
|
||||
@ -54,42 +61,61 @@ export default {
|
||||
* @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']
|
||||
* @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
|
||||
*/
|
||||
colors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'],
|
||||
colors: [
|
||||
'#37a2da',
|
||||
'#32c5e9',
|
||||
'#67e0e3',
|
||||
'#9fe6b8',
|
||||
'#ffdb5c',
|
||||
'#ff9f7f',
|
||||
'#fb7293'
|
||||
],
|
||||
/**
|
||||
* @description Chart unit
|
||||
* @type {String}
|
||||
* @default unit = ''
|
||||
*/
|
||||
unit: ''
|
||||
unit: '',
|
||||
/**
|
||||
* @description Show item value
|
||||
* @type {Boolean}
|
||||
* @default showValue = false
|
||||
*/
|
||||
showValue: false
|
||||
},
|
||||
|
||||
mergedConfig: null,
|
||||
|
||||
capsuleLength: [],
|
||||
labelData: []
|
||||
capsuleValue: [],
|
||||
labelData: [],
|
||||
labelDataLength: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
config () {
|
||||
config() {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
calcData () {
|
||||
calcData() {
|
||||
const { mergeConfig, calcCapsuleLengthAndLabelData } = this
|
||||
|
||||
mergeConfig()
|
||||
|
||||
calcCapsuleLengthAndLabelData()
|
||||
},
|
||||
mergeConfig () {
|
||||
mergeConfig() {
|
||||
let { config, defaultConfig } = this
|
||||
|
||||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
this.mergedConfig = deepMerge(
|
||||
deepClone(defaultConfig, true),
|
||||
config || {}
|
||||
)
|
||||
},
|
||||
calcCapsuleLengthAndLabelData () {
|
||||
calcCapsuleLengthAndLabelData() {
|
||||
const { data } = this.mergedConfig
|
||||
|
||||
if (!data.length) return
|
||||
@ -98,14 +124,24 @@ export default {
|
||||
|
||||
const maxValue = Math.max(...capsuleValue)
|
||||
|
||||
this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0)
|
||||
this.capsuleValue = capsuleValue
|
||||
|
||||
this.capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0))
|
||||
|
||||
const oneFifth = maxValue / 5
|
||||
|
||||
this.labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))))
|
||||
const labelData = Array.from(
|
||||
new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))
|
||||
)
|
||||
|
||||
this.labelData = labelData
|
||||
|
||||
this.labelDataLength = Array.from(labelData).map(v =>
|
||||
maxValue ? v / maxValue : 0
|
||||
)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
@ -150,21 +186,30 @@ export default {
|
||||
margin: 5px 0px;
|
||||
border-radius: 5px;
|
||||
|
||||
div {
|
||||
.capsule-item-column {
|
||||
position: relative;
|
||||
height: 8px;
|
||||
margin-top: 1px;
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.capsule-item-value {
|
||||
font-size: 12px;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.unit-label {
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.unit-text {
|
||||
|
||||
@ -5,6 +5,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
import Charts from '@jiaminghi/charts'
|
||||
@ -19,10 +21,10 @@ export default {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: `charts-container-${timestamp}`,
|
||||
chartRef: `chart-${timestamp}`,
|
||||
ref: `charts-container-${id}`,
|
||||
chartRef: `chart-${id}`,
|
||||
|
||||
chart: null
|
||||
}
|
||||
|
||||
@ -147,6 +147,7 @@
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
@ -162,17 +163,17 @@ export default {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: 'decoration-10',
|
||||
|
||||
animationId1: `d10ani1${timestamp}`,
|
||||
animationId2: `d10ani2${timestamp}`,
|
||||
animationId3: `d10ani3${timestamp}`,
|
||||
animationId4: `d10ani4${timestamp}`,
|
||||
animationId5: `d10ani5${timestamp}`,
|
||||
animationId6: `d10ani6${timestamp}`,
|
||||
animationId7: `d10ani7${timestamp}`,
|
||||
animationId1: `d10ani1${id}`,
|
||||
animationId2: `d10ani2${id}`,
|
||||
animationId3: `d10ani3${id}`,
|
||||
animationId4: `d10ani4${id}`,
|
||||
animationId5: `d10ani5${id}`,
|
||||
animationId6: `d10ani6${id}`,
|
||||
animationId7: `d10ani7${id}`,
|
||||
|
||||
defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],
|
||||
|
||||
|
||||
@ -72,7 +72,6 @@ export default {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
return {
|
||||
ref: 'decoration-11',
|
||||
|
||||
|
||||
@ -83,23 +83,26 @@ export default {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.normal {
|
||||
height: 0% !important;
|
||||
animation: ani-height 3s ease-in-out infinite;
|
||||
left: 50%;
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
.reverse {
|
||||
width: 0% !important;
|
||||
animation: ani-width 3s ease-in-out infinite;
|
||||
top: 50%;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
@keyframes ani-height {
|
||||
0% {
|
||||
height: 0%;
|
||||
}
|
||||
|
||||
70% {
|
||||
height: 100%;
|
||||
}
|
||||
@ -110,6 +113,10 @@ export default {
|
||||
}
|
||||
|
||||
@keyframes ani-width {
|
||||
0% {
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
70% {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -85,6 +85,7 @@
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
@ -106,11 +107,11 @@ export default {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: 'decoration-9',
|
||||
|
||||
polygonId: `decoration-9-polygon-${timestamp}`,
|
||||
polygonId: `decoration-9-polygon-${id}`,
|
||||
|
||||
svgWH: [100, 100],
|
||||
|
||||
|
||||
@ -153,7 +153,7 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
import { randomExtend, getPointDistance } from '../../../util/index'
|
||||
import { randomExtend, getPointDistance, uuid } from '../../../util/index'
|
||||
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
@ -171,14 +171,14 @@ export default {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: 'dv-flyline-chart',
|
||||
unique: Math.random(),
|
||||
maskId: `flyline-mask-id-${timestamp}`,
|
||||
maskCircleId: `mask-circle-id-${timestamp}`,
|
||||
gradientId: `gradient-id-${timestamp}`,
|
||||
gradient2Id: `gradient2-id-${timestamp}`,
|
||||
maskId: `flyline-mask-id-${id}`,
|
||||
maskCircleId: `mask-circle-id-${id}`,
|
||||
gradientId: `gradient-id-${id}`,
|
||||
gradient2Id: `gradient2-id-${id}`,
|
||||
|
||||
defaultConfig: {
|
||||
/**
|
||||
|
||||
@ -155,7 +155,7 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
import { randomExtend, getPointDistance } from '../../../util/index'
|
||||
import { randomExtend, getPointDistance, uuid } from '../../../util/index'
|
||||
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
@ -173,12 +173,12 @@ export default {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
const id = uuid()
|
||||
return {
|
||||
ref: 'dv-flyline-chart-enhanced',
|
||||
unique: Math.random(),
|
||||
flylineGradientId: `flyline-gradient-id-${timestamp}`,
|
||||
haloGradientId: `halo-gradient-id-${timestamp}`,
|
||||
flylineGradientId: `flyline-gradient-id-${id}`,
|
||||
haloGradientId: `halo-gradient-id-${id}`,
|
||||
/**
|
||||
* @description Type Declaration
|
||||
*
|
||||
|
||||
@ -44,6 +44,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
@ -57,10 +59,10 @@ export default {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
const id = uuid()
|
||||
return {
|
||||
gradientId1: `percent-pond-gradientId1-${timestamp}`,
|
||||
gradientId2: `percent-pond-gradientId2-${timestamp}`,
|
||||
gradientId1: `percent-pond-gradientId1-${id}`,
|
||||
gradientId2: `percent-pond-gradientId2-${id}`,
|
||||
|
||||
width: 0,
|
||||
height: 0,
|
||||
@ -234,10 +236,10 @@ export default {
|
||||
|
||||
await $nextTick()
|
||||
|
||||
const dom = $refs['percent-pond']
|
||||
const { clientWidth, clientHeight } = $refs['percent-pond']
|
||||
|
||||
this.width = dom.clientWidth
|
||||
this.height = dom.clientHeight
|
||||
this.width = clientWidth
|
||||
this.height = clientHeight
|
||||
},
|
||||
mergeConfig () {
|
||||
const { config, defaultConfig } = this
|
||||
|
||||
@ -37,7 +37,9 @@
|
||||
:style="`width: ${widths[ci]}px;`"
|
||||
:align="aligns[ci]"
|
||||
v-html="ceil"
|
||||
@click="emitEvent(ri, ci, row, ceil)"
|
||||
@click="emitEvent('click', ri, ci, row, ceil)"
|
||||
@mouseenter="handleHover(true, ri, ci, row, ceil)"
|
||||
@mouseleave="handleHover(false)"
|
||||
/>
|
||||
|
||||
</div>
|
||||
@ -146,7 +148,14 @@ export default {
|
||||
* @default carousel = 'single'
|
||||
* @example carousel = 'single' | 'page'
|
||||
*/
|
||||
carousel: 'single'
|
||||
carousel: 'single',
|
||||
/**
|
||||
* @description Pause scroll when mouse hovered
|
||||
* @type {Boolean}
|
||||
* @default hoverPause = true
|
||||
* @example hoverPause = true | false
|
||||
*/
|
||||
hoverPause: true
|
||||
},
|
||||
|
||||
mergedConfig: null,
|
||||
@ -182,6 +191,18 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleHover(enter, ri, ci, row, ceil){
|
||||
const { mergedConfig, emitEvent, stopAnimation, animation } = this
|
||||
|
||||
if (enter) emitEvent('mouseover', ri, ci, row, ceil)
|
||||
if (!mergedConfig.hoverPause) return
|
||||
|
||||
if (enter) {
|
||||
stopAnimation()
|
||||
} else {
|
||||
animation(true)
|
||||
}
|
||||
},
|
||||
afterAutoResizeMixinInit () {
|
||||
const { calcData } = this
|
||||
|
||||
@ -355,10 +376,10 @@ export default {
|
||||
|
||||
clearTimeout(animationHandler)
|
||||
},
|
||||
emitEvent (ri, ci, row, ceil) {
|
||||
emitEvent (type, ri, ci, row, ceil) {
|
||||
const { ceils, rowIndex } = row
|
||||
|
||||
this.$emit('click', {
|
||||
this.$emit(type, {
|
||||
row: ceils,
|
||||
ceil,
|
||||
rowIndex,
|
||||
|
||||
@ -40,6 +40,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uuid } from '../../../util/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
@ -53,9 +55,9 @@ export default {
|
||||
default: () => ({})
|
||||
},
|
||||
data () {
|
||||
const timestamp = Date.now()
|
||||
const id = uuid()
|
||||
return {
|
||||
gradientId: `water-level-pond-${timestamp}`,
|
||||
gradientId: `water-level-pond-${id}`,
|
||||
|
||||
defaultConfig: {
|
||||
/**
|
||||
|
||||
@ -37,3 +37,11 @@ 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) {
|
||||
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