update dist and lib

2.optimize unit-label child style;

CHANGELOG.md

@@ -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)
 
 ### Perfect

dist/datav.map.vue.js

@@ -604,7 +604,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,6 +2939,10 @@
       backgroundColor: {
         type: String,
         default: 'transparent'
+      },
+      reverse: {
+        type: Boolean,
+        default: false
       }
     },
 
@@ -2961,6 +2965,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 +3027,7 @@
             "defs",
             [
               _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(" "),
               _c(
@@ -3067,16 +3068,7 @@
                     _c("animateMotion", {
                       attrs: {
                         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",
                         repeatCount: "indefinite"
                       }
@@ -3146,7 +3138,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-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 */
@@ -11730,6 +11722,8 @@
 
   var CRender = unwrapExports(lib$3);
 
+  var _defineProperty2 = interopRequireDefault(defineProperty);
+
   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 = {
     shape: {
       rx: 0,
@@ -11884,11 +11884,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 +11897,15 @@
         if (typeof currentNumber === 'number') currentNumber = currentNumber.toFixed(toFixed);
         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 = {
@@ -19762,7 +19767,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 +19793,25 @@
         const {
           digitalFlopStyle,
           digitalFlopToFixed,
-          data
+          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}%',
+          content: showOriginValue ? '{nt}' : '{nt}%',
-          number: [percent],
+          number: [displayValue],
           style: digitalFlopStyle,
           toFixed: digitalFlopToFixed
         };
@@ -19990,7 +20011,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 +20077,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 +20130,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 +20187,27 @@
                       "div",
                       { 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 */
     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 */

lib/components/activeRingChart/src/main.vue

@@ -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}%',
+        content: showOriginValue ? '{nt}' : '{nt}%',
-        number: [percent],
+        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)

lib/components/borderBox8/src/main.vue

@@ -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"
             />
@@ -85,6 +85,10 @@ export default {
     backgroundColor: {
       type: String,
       default: 'transparent'
+    },
+    reverse: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -105,6 +109,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: {

lib/components/capsuleChart/src/main.css

@@ -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;

lib/components/capsuleChart/src/main.vue

@@ -7,16 +7,23 @@
       </div>
 
       <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 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()

package.json

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

src/components/activeRingChart/src/main.vue

@@ -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}%',
+        content: showOriginValue ? '{nt}' : '{nt}%',
-        number: [percent],
+        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)

src/components/borderBox8/src/main.vue

@@ -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"
             />
@@ -85,6 +85,10 @@ export default {
     backgroundColor: {
       type: String,
       default: 'transparent'
+    },
+    reverse: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -105,6 +109,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: {

src/components/capsuleChart/src/main.vue

@@ -7,16 +7,23 @@
       </div>
 
       <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 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 {