update dist and lib

lib/components/activeRingChart/src/main.vue

@@ -96,11 +96,11 @@ export default {
          */
         animationFrame: 50,
         /**
-         * @description CRender showOriginalValue
+         * @description showOriginValue
          * @type {Boolean}
-         * @default showOriginalValue = false
+         * @default showOriginValue = false
          */
-        showOriginalValue: false
+        showOriginValue: false
       },
 
       mergedConfig: null,
@@ -122,14 +122,14 @@ export default {
         digitalFlopStyle,
         digitalFlopToFixed,
         data,
-        showOriginalValue
+        showOriginValue
       } = mergedConfig
 
       const value = data.map(({ value }) => value)
 
       let displayValue
 
-      if (showOriginalValue) {
+      if (showOriginValue) {
         displayValue = value[activeIndex]
       } else {
         const sum = value.reduce((all, v) => all + v, 0)
@@ -140,7 +140,7 @@ export default {
       }
 
       return {
-        content: showOriginalValue ? '{nt}' : '{nt}%',
+        content: showOriginValue ? '{nt}' : '{nt}%',
         number: [displayValue],
         style: digitalFlopStyle,
         toFixed: digitalFlopToFixed

lib/components/capsuleChart/src/main.css

@@ -31,28 +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 div .capsule-item-val {
+.dv-capsule-chart .capsule-item .capsule-item-column .capsule-item-value {
-  position: absolute;
-  top: -5px;
   font-size: 12px;
+  transform: translateX(100%);
 }
 .dv-capsule-chart .unit-label {
   height: 20px;
   font-size: 12px;
   position: relative;
-}
+  display: flex;
-.dv-capsule-chart .unit-label:not(:first-child) {
+  justify-content: space-between;
-  text-align: right;
+  align-items: center;
-}
-.dv-capsule-chart .unit-label div {
-  position: absolute;
 }
 .dv-capsule-chart .unit-text {
   text-align: right;

lib/components/capsuleChart/src/main.vue

@@ -9,13 +9,13 @@
       <div class="capsule-container">
         <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]};`"
           >
-            <span
+            <div
-              v-if="mergedConfig.showVal"
+              v-if="mergedConfig.showValue"
-              class="capsule-item-val"
+              class="capsule-item-value"
-              :style="`right:-${`${capsuleValue[index]}`.length * 7}px`"
+            >{{ capsuleValue[index] }}</div>
-            >{{ capsuleValue[index] }}</span>
           </div>
         </div>
 
@@ -23,7 +23,6 @@
           <div
             v-for="(label, index) in labelData"
             :key="label + index"
-            :style="calcUnitLabelStyle(index)"
           >{{ label }}</div>
         </div>
       </div>
@@ -77,7 +76,12 @@ export default {
          * @default unit = ''
          */
         unit: '',
-        showVal: false
+        /**
+         * @description Show item value
+         * @type {Boolean}
+         * @default showValue = false
+         */
+        showValue: false
       },
 
       mergedConfig: null,
@@ -135,15 +139,6 @@ export default {
       this.labelDataLength = Array.from(labelData).map(v =>
         maxValue ? v / maxValue : 0
       )
-    },
-    /**
-     * 计算x轴label位置
-     */
-    calcUnitLabelStyle(index) {
-      if (this.labelData.length - 1 === index) {
-        return `right: 0;`
-      }
-      return `left: ${this.labelDataLength[index] * 100}%;`
     }
   },
   mounted() {