Compare commits

...

14 Commits

Author SHA1 Message Date
6ce83e1fd8 update dist and lib 2020-05-06 14:15:15 +08:00
8e5f279b6e update version to 2.8.3 2020-05-06 14:15:02 +08:00
22afc8e787 update change log 2020-05-06 14:14:52 +08:00
eb78915c93 add showValue configuration 2020-05-06 14:13:49 +08:00
22c88c4ea5 add showOriginValue configuration 2020-05-06 14:13:34 +08:00
c98ca00179 Merge branch 'pr/76' into dev 2020-05-06 13:47:47 +08:00
c257ca6d9c update dist and lib 2020-05-06 13:20:20 +08:00
ce4cf0d342 add reverse configuration 2020-05-06 13:20:15 +08:00
7df0c0247a update version to 2.8.2 2020-05-06 13:20:04 +08:00
df2369dfe4 update change log 2020-05-06 13:19:55 +08:00
7799ef3dae capsule-item > div add position prop 2020-04-30 13:38:11 +08:00
dd37ba167a format code 2020-04-28 16:43:44 +08:00
fdd1e243a7 active-ring-chart add showOriginalValue 2020-04-28 16:15:12 +08:00
57b6c726eb 1.add showVal prop;
2.optimize unit-label child style;
2020-04-27 18:19:20 +08:00
11 changed files with 361 additions and 147 deletions

View File

@ -1,3 +1,16 @@
# 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) # 2.8.1-alpha (2020-05-03)
### Perfect ### Perfect

150
dist/datav.map.vue.js vendored
View File

@ -604,7 +604,7 @@
if (typeof o === "string") return arrayLikeToArray(o, minLen); if (typeof o === "string") return arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1); var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name; 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); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);
} }
@ -2939,6 +2939,10 @@
backgroundColor: { backgroundColor: {
type: String, type: String,
default: 'transparent' default: 'transparent'
},
reverse: {
type: Boolean,
default: false
} }
}, },
@ -2961,6 +2965,16 @@
height height
} = this; } = this;
return (width + height - 5) * 2; 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 +3027,7 @@
"defs", "defs",
[ [
_c("path", { _c("path", {
attrs: { attrs: { id: _vm.path, d: _vm.pathD, fill: "transparent" }
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"
}
}), }),
_vm._v(" "), _vm._v(" "),
_c( _c(
@ -3067,16 +3068,7 @@
_c("animateMotion", { _c("animateMotion", {
attrs: { attrs: {
dur: _vm.dur + "s", dur: _vm.dur + "s",
path: path: _vm.pathD,
"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",
rotate: "auto", rotate: "auto",
repeatCount: "indefinite" repeatCount: "indefinite"
} }
@ -3146,7 +3138,7 @@
/* style */ /* style */
const __vue_inject_styles__$9 = function (inject) { const __vue_inject_styles__$9 = function (inject) {
if (!inject) return 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-5da1054e_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 */ /* scoped */
@ -11730,6 +11722,8 @@
var CRender = unwrapExports(lib$3); var CRender = unwrapExports(lib$3);
var _defineProperty2 = interopRequireDefault(defineProperty);
var _toConsumableArray2 = interopRequireDefault(toConsumableArray); var _toConsumableArray2 = interopRequireDefault(toConsumableArray);
@ -11740,6 +11734,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 = { var pie = {
shape: { shape: {
rx: 0, rx: 0,
@ -11884,11 +11884,10 @@
draw: function draw(_ref8, _ref9) { draw: function draw(_ref8, _ref9) {
var ctx = _ref8.ctx; var ctx = _ref8.ctx;
var shape = _ref9.shape; var shape = _ref9.shape;
ctx.beginPath();
var number = shape.number, var number = shape.number,
content = shape.content, content = shape.content,
position = shape.position, toFixed = shape.toFixed,
toFixed = shape.toFixed; rowGap = shape.rowGap;
var textSegments = content.split('{nt}'); var textSegments = content.split('{nt}');
var lastSegmentIndex = textSegments.length - 1; var lastSegmentIndex = textSegments.length - 1;
var textString = ''; var textString = '';
@ -11898,9 +11897,15 @@
if (typeof currentNumber === 'number') currentNumber = currentNumber.toFixed(toFixed); if (typeof currentNumber === 'number') currentNumber = currentNumber.toFixed(toFixed);
textString += t + (currentNumber || ''); textString += t + (currentNumber || '');
}); });
ctx.closePath();
ctx.strokeText.apply(ctx, [textString].concat((0, _toConsumableArray2["default"])(position))); graphs_1.text.draw({
ctx.fillText.apply(ctx, [textString].concat((0, _toConsumableArray2["default"])(position))); ctx: ctx
}, {
shape: _objectSpread({}, shape, {
content: textString,
rowGap: rowGap || 0
})
});
} }
}; };
var lineIcon = { var lineIcon = {
@ -19762,7 +19767,14 @@
* @type {String} * @type {String}
* @default animationFrame = 50 * @default animationFrame = 50
*/ */
animationFrame: 50 animationFrame: 50,
/**
* @description showOriginValue
* @type {Boolean}
* @default showOriginValue = false
*/
showOriginValue: false
}, },
mergedConfig: null, mergedConfig: null,
chart: null, chart: null,
@ -19781,16 +19793,25 @@
const { const {
digitalFlopStyle, digitalFlopStyle,
digitalFlopToFixed, digitalFlopToFixed,
data data,
showOriginValue
} = mergedConfig; } = mergedConfig;
const value = data.map(({ const value = data.map(({
value value
}) => 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 { return {
content: '{nt}%', content: showOriginValue ? '{nt}' : '{nt}%',
number: [percent], number: [displayValue],
style: digitalFlopStyle, style: digitalFlopStyle,
toFixed: digitalFlopToFixed toFixed: digitalFlopToFixed
}; };
@ -19990,7 +20011,7 @@
/* style */ /* style */
const __vue_inject_styles__$s = function (inject) { const __vue_inject_styles__$s = function (inject) {
if (!inject) return 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 */ /* scoped */
@ -20056,11 +20077,20 @@
* @type {String} * @type {String}
* @default unit = '' * @default unit = ''
*/ */
unit: '' unit: '',
/**
* @description Show item value
* @type {Boolean}
* @default showValue = false
*/
showValue: false
}, },
mergedConfig: null, mergedConfig: null,
capsuleLength: [], capsuleLength: [],
labelData: [] capsuleValue: [],
labelData: [],
labelDataLength: []
}; };
}, },
@ -20100,9 +20130,12 @@
value value
}) => value); }) => value);
const maxValue = Math.max(...capsuleValue); const maxValue = Math.max(...capsuleValue);
this.capsuleValue = capsuleValue;
this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0); this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0);
const oneFifth = maxValue / 5; 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 +20187,27 @@
"div", "div",
{ key: index, staticClass: "capsule-item" }, { key: index, staticClass: "capsule-item" },
[ [
_c("div", { _c(
style: "div",
"width: " + {
capsule * 100 + staticClass: "capsule-item-column",
"%; background-color: " + style:
_vm.mergedConfig.colors[ "width: " +
index % _vm.mergedConfig.colors.length 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 +20243,7 @@
/* style */ /* style */
const __vue_inject_styles__$t = function (inject) { const __vue_inject_styles__$t = function (inject) {
if (!inject) return 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 */ /* scoped */

File diff suppressed because one or more lines are too long

View File

@ -28,7 +28,7 @@ export default {
default: () => ({}) default: () => ({})
} }
}, },
data () { data() {
return { return {
defaultConfig: { defaultConfig: {
/** /**
@ -94,7 +94,13 @@ export default {
* @type {String} * @type {String}
* @default animationFrame = 50 * @default animationFrame = 50
*/ */
animationFrame: 50 animationFrame: 50,
/**
* @description showOriginValue
* @type {Boolean}
* @default showOriginValue = false
*/
showOriginValue: false
}, },
mergedConfig: null, mergedConfig: null,
@ -107,34 +113,47 @@ export default {
} }
}, },
computed: { computed: {
digitalFlop () { digitalFlop() {
const { mergedConfig, activeIndex } = this const { mergedConfig, activeIndex } = this
if (!mergedConfig) return {} if (!mergedConfig) return {}
const { digitalFlopStyle, digitalFlopToFixed, data } = mergedConfig const {
digitalFlopStyle,
digitalFlopToFixed,
data,
showOriginValue
} = mergedConfig
const value = data.map(({ value }) => value) 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 { return {
content: '{nt}%', content: showOriginValue ? '{nt}' : '{nt}%',
number: [percent], number: [displayValue],
style: digitalFlopStyle, style: digitalFlopStyle,
toFixed: digitalFlopToFixed toFixed: digitalFlopToFixed
} }
}, },
ringName () { ringName() {
const { mergedConfig, activeIndex } = this const { mergedConfig, activeIndex } = this
if (!mergedConfig) return '' if (!mergedConfig) return ''
return mergedConfig.data[activeIndex].name return mergedConfig.data[activeIndex].name
}, },
fontSize () { fontSize() {
const { mergedConfig } = this const { mergedConfig } = this
if (!mergedConfig) return '' if (!mergedConfig) return ''
@ -143,7 +162,7 @@ export default {
} }
}, },
watch: { watch: {
config () { config() {
const { animationHandler, mergeConfig, setRingOption } = this const { animationHandler, mergeConfig, setRingOption } = this
clearTimeout(animationHandler) clearTimeout(animationHandler)
@ -156,7 +175,7 @@ export default {
} }
}, },
methods: { methods: {
init () { init() {
const { initChart, mergeConfig, setRingOption } = this const { initChart, mergeConfig, setRingOption } = this
initChart() initChart()
@ -165,17 +184,20 @@ export default {
setRingOption() setRingOption()
}, },
initChart () { initChart() {
const { $refs } = this const { $refs } = this
this.chart = new Charts($refs['active-ring-chart']) this.chart = new Charts($refs['active-ring-chart'])
}, },
mergeConfig () { mergeConfig() {
const { defaultConfig, config } = this 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 { getRingOption, chart, ringAnimation } = this
const option = getRingOption() const option = getRingOption()
@ -184,7 +206,7 @@ export default {
ringAnimation() ringAnimation()
}, },
getRingOption () { getRingOption() {
const { mergedConfig, getRealRadius } = this const { mergedConfig, getRealRadius } = this
const radius = getRealRadius() const radius = getRealRadius()
@ -206,7 +228,7 @@ export default {
color: mergedConfig.color color: mergedConfig.color
} }
}, },
getRealRadius (active = false) { getRealRadius(active = false) {
const { mergedConfig, chart } = this const { mergedConfig, chart } = this
const { radius, activeRadius, lineWidth } = mergedConfig const { radius, activeRadius, lineWidth } = mergedConfig
@ -217,14 +239,15 @@ export default {
let realRadius = active ? activeRadius : radius 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 insideRadius = realRadius - halfLineWidth
const outSideRadius = realRadius + halfLineWidth const outSideRadius = realRadius + halfLineWidth
return [insideRadius, outSideRadius] return [insideRadius, outSideRadius]
}, },
ringAnimation () { ringAnimation() {
let { activeIndex, getRingOption, chart, getRealRadius } = this let { activeIndex, getRingOption, chart, getRealRadius } = this
const radius = getRealRadius() const radius = getRealRadius()
@ -257,12 +280,12 @@ export default {
}, activeTimeGap) }, activeTimeGap)
} }
}, },
mounted () { mounted() {
const { init } = this const { init } = this
init() init()
}, },
beforeDestroy () { beforeDestroy() {
const { animationHandler } = this const { animationHandler } = this
clearTimeout(animationHandler) clearTimeout(animationHandler)

View File

@ -4,7 +4,7 @@
<defs> <defs>
<path <path
:id="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" fill="transparent"
/> />
<radialGradient <radialGradient
@ -25,7 +25,7 @@
<circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`"> <circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
<animateMotion <animateMotion
:dur="`${dur}s`" :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" rotate="auto"
repeatCount="indefinite" repeatCount="indefinite"
/> />
@ -85,6 +85,10 @@ export default {
backgroundColor: { backgroundColor: {
type: String, type: String,
default: 'transparent' default: 'transparent'
},
reverse: {
type: Boolean,
default: false
} }
}, },
data () { data () {
@ -105,6 +109,13 @@ export default {
const { width, height } = this const { width, height } = this
return (width + height - 5) * 2 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: { watch: {

View File

@ -31,19 +31,27 @@
margin: 5px 0px; margin: 5px 0px;
border-radius: 5px; border-radius: 5px;
} }
.dv-capsule-chart .capsule-item div { .dv-capsule-chart .capsule-item .capsule-item-column {
position: relative;
height: 8px; height: 8px;
margin-top: 1px; margin-top: 1px;
border-radius: 5px; border-radius: 5px;
transition: all 0.3s; 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 { .dv-capsule-chart .unit-label {
height: 20px; height: 20px;
font-size: 12px; font-size: 12px;
position: relative;
display: flex; display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between; justify-content: space-between;
align-items: center;
} }
.dv-capsule-chart .unit-text { .dv-capsule-chart .unit-text {
text-align: right; text-align: right;

View File

@ -7,16 +7,23 @@
</div> </div>
<div class="capsule-container"> <div class="capsule-container">
<div <div class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index">
class="capsule-item" <div
v-for="(capsule, index) in capsuleLength" class="capsule-item-column"
:key="index" :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
> >
<div :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"></div> <div
v-if="mergedConfig.showValue"
class="capsule-item-value"
>{{ capsuleValue[index] }}</div>
</div>
</div> </div>
<div class="unit-label"> <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>
</div> </div>
@ -38,7 +45,7 @@ export default {
default: () => ({}) default: () => ({})
} }
}, },
data () { data() {
return { return {
defaultConfig: { defaultConfig: {
/** /**
@ -54,42 +61,61 @@ export default {
* @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'] * @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']
* @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red'] * @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 * @description Chart unit
* @type {String} * @type {String}
* @default unit = '' * @default unit = ''
*/ */
unit: '' unit: '',
/**
* @description Show item value
* @type {Boolean}
* @default showValue = false
*/
showValue: false
}, },
mergedConfig: null, mergedConfig: null,
capsuleLength: [], capsuleLength: [],
labelData: [] capsuleValue: [],
labelData: [],
labelDataLength: []
} }
}, },
watch: { watch: {
config () { config() {
const { calcData } = this const { calcData } = this
calcData() calcData()
} }
}, },
methods: { methods: {
calcData () { calcData() {
const { mergeConfig, calcCapsuleLengthAndLabelData } = this const { mergeConfig, calcCapsuleLengthAndLabelData } = this
mergeConfig() mergeConfig()
calcCapsuleLengthAndLabelData() calcCapsuleLengthAndLabelData()
}, },
mergeConfig () { mergeConfig() {
let { config, defaultConfig } = this let { config, defaultConfig } = this
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {}) this.mergedConfig = deepMerge(
deepClone(defaultConfig, true),
config || {}
)
}, },
calcCapsuleLengthAndLabelData () { calcCapsuleLengthAndLabelData() {
const { data } = this.mergedConfig const { data } = this.mergedConfig
if (!data.length) return if (!data.length) return
@ -98,14 +124,24 @@ export default {
const maxValue = Math.max(...capsuleValue) 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 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 const { calcData } = this
calcData() calcData()

View File

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

View File

@ -28,7 +28,7 @@ export default {
default: () => ({}) default: () => ({})
} }
}, },
data () { data() {
return { return {
defaultConfig: { defaultConfig: {
/** /**
@ -94,7 +94,13 @@ export default {
* @type {String} * @type {String}
* @default animationFrame = 50 * @default animationFrame = 50
*/ */
animationFrame: 50 animationFrame: 50,
/**
* @description showOriginValue
* @type {Boolean}
* @default showOriginValue = false
*/
showOriginValue: false
}, },
mergedConfig: null, mergedConfig: null,
@ -107,34 +113,47 @@ export default {
} }
}, },
computed: { computed: {
digitalFlop () { digitalFlop() {
const { mergedConfig, activeIndex } = this const { mergedConfig, activeIndex } = this
if (!mergedConfig) return {} if (!mergedConfig) return {}
const { digitalFlopStyle, digitalFlopToFixed, data } = mergedConfig const {
digitalFlopStyle,
digitalFlopToFixed,
data,
showOriginValue
} = mergedConfig
const value = data.map(({ value }) => value) 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 { return {
content: '{nt}%', content: showOriginValue ? '{nt}' : '{nt}%',
number: [percent], number: [displayValue],
style: digitalFlopStyle, style: digitalFlopStyle,
toFixed: digitalFlopToFixed toFixed: digitalFlopToFixed
} }
}, },
ringName () { ringName() {
const { mergedConfig, activeIndex } = this const { mergedConfig, activeIndex } = this
if (!mergedConfig) return '' if (!mergedConfig) return ''
return mergedConfig.data[activeIndex].name return mergedConfig.data[activeIndex].name
}, },
fontSize () { fontSize() {
const { mergedConfig } = this const { mergedConfig } = this
if (!mergedConfig) return '' if (!mergedConfig) return ''
@ -143,7 +162,7 @@ export default {
} }
}, },
watch: { watch: {
config () { config() {
const { animationHandler, mergeConfig, setRingOption } = this const { animationHandler, mergeConfig, setRingOption } = this
clearTimeout(animationHandler) clearTimeout(animationHandler)
@ -156,7 +175,7 @@ export default {
} }
}, },
methods: { methods: {
init () { init() {
const { initChart, mergeConfig, setRingOption } = this const { initChart, mergeConfig, setRingOption } = this
initChart() initChart()
@ -165,17 +184,20 @@ export default {
setRingOption() setRingOption()
}, },
initChart () { initChart() {
const { $refs } = this const { $refs } = this
this.chart = new Charts($refs['active-ring-chart']) this.chart = new Charts($refs['active-ring-chart'])
}, },
mergeConfig () { mergeConfig() {
const { defaultConfig, config } = this 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 { getRingOption, chart, ringAnimation } = this
const option = getRingOption() const option = getRingOption()
@ -184,7 +206,7 @@ export default {
ringAnimation() ringAnimation()
}, },
getRingOption () { getRingOption() {
const { mergedConfig, getRealRadius } = this const { mergedConfig, getRealRadius } = this
const radius = getRealRadius() const radius = getRealRadius()
@ -206,7 +228,7 @@ export default {
color: mergedConfig.color color: mergedConfig.color
} }
}, },
getRealRadius (active = false) { getRealRadius(active = false) {
const { mergedConfig, chart } = this const { mergedConfig, chart } = this
const { radius, activeRadius, lineWidth } = mergedConfig const { radius, activeRadius, lineWidth } = mergedConfig
@ -217,14 +239,15 @@ export default {
let realRadius = active ? activeRadius : radius 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 insideRadius = realRadius - halfLineWidth
const outSideRadius = realRadius + halfLineWidth const outSideRadius = realRadius + halfLineWidth
return [insideRadius, outSideRadius] return [insideRadius, outSideRadius]
}, },
ringAnimation () { ringAnimation() {
let { activeIndex, getRingOption, chart, getRealRadius } = this let { activeIndex, getRingOption, chart, getRealRadius } = this
const radius = getRealRadius() const radius = getRealRadius()
@ -257,12 +280,12 @@ export default {
}, activeTimeGap) }, activeTimeGap)
} }
}, },
mounted () { mounted() {
const { init } = this const { init } = this
init() init()
}, },
beforeDestroy () { beforeDestroy() {
const { animationHandler } = this const { animationHandler } = this
clearTimeout(animationHandler) clearTimeout(animationHandler)

View File

@ -4,7 +4,7 @@
<defs> <defs>
<path <path
:id="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" fill="transparent"
/> />
<radialGradient <radialGradient
@ -25,7 +25,7 @@
<circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`"> <circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
<animateMotion <animateMotion
:dur="`${dur}s`" :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" rotate="auto"
repeatCount="indefinite" repeatCount="indefinite"
/> />
@ -85,6 +85,10 @@ export default {
backgroundColor: { backgroundColor: {
type: String, type: String,
default: 'transparent' default: 'transparent'
},
reverse: {
type: Boolean,
default: false
} }
}, },
data () { data () {
@ -105,6 +109,13 @@ export default {
const { width, height } = this const { width, height } = this
return (width + height - 5) * 2 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: { watch: {

View File

@ -7,16 +7,23 @@
</div> </div>
<div class="capsule-container"> <div class="capsule-container">
<div <div class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index">
class="capsule-item" <div
v-for="(capsule, index) in capsuleLength" class="capsule-item-column"
:key="index" :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
> >
<div :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"></div> <div
v-if="mergedConfig.showValue"
class="capsule-item-value"
>{{ capsuleValue[index] }}</div>
</div>
</div> </div>
<div class="unit-label"> <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>
</div> </div>
@ -38,7 +45,7 @@ export default {
default: () => ({}) default: () => ({})
} }
}, },
data () { data() {
return { return {
defaultConfig: { defaultConfig: {
/** /**
@ -54,42 +61,61 @@ export default {
* @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'] * @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']
* @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red'] * @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 * @description Chart unit
* @type {String} * @type {String}
* @default unit = '' * @default unit = ''
*/ */
unit: '' unit: '',
/**
* @description Show item value
* @type {Boolean}
* @default showValue = false
*/
showValue: false
}, },
mergedConfig: null, mergedConfig: null,
capsuleLength: [], capsuleLength: [],
labelData: [] capsuleValue: [],
labelData: [],
labelDataLength: []
} }
}, },
watch: { watch: {
config () { config() {
const { calcData } = this const { calcData } = this
calcData() calcData()
} }
}, },
methods: { methods: {
calcData () { calcData() {
const { mergeConfig, calcCapsuleLengthAndLabelData } = this const { mergeConfig, calcCapsuleLengthAndLabelData } = this
mergeConfig() mergeConfig()
calcCapsuleLengthAndLabelData() calcCapsuleLengthAndLabelData()
}, },
mergeConfig () { mergeConfig() {
let { config, defaultConfig } = this let { config, defaultConfig } = this
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {}) this.mergedConfig = deepMerge(
deepClone(defaultConfig, true),
config || {}
)
}, },
calcCapsuleLengthAndLabelData () { calcCapsuleLengthAndLabelData() {
const { data } = this.mergedConfig const { data } = this.mergedConfig
if (!data.length) return if (!data.length) return
@ -98,14 +124,24 @@ export default {
const maxValue = Math.max(...capsuleValue) 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 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 const { calcData } = this
calcData() calcData()
@ -150,21 +186,30 @@ export default {
margin: 5px 0px; margin: 5px 0px;
border-radius: 5px; border-radius: 5px;
div { .capsule-item-column {
position: relative;
height: 8px; height: 8px;
margin-top: 1px; margin-top: 1px;
border-radius: 5px; border-radius: 5px;
transition: all 0.3s; transition: all 0.3s;
display: flex;
justify-content: flex-end;
align-items: center;
.capsule-item-value {
font-size: 12px;
transform: translateX(100%);
}
} }
} }
.unit-label { .unit-label {
height: 20px; height: 20px;
font-size: 12px; font-size: 12px;
position: relative;
display: flex; display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between; justify-content: space-between;
align-items: center;
} }
.unit-text { .unit-text {