1.add showVal prop;

2.optimize unit-label child style;

lib/components/capsuleChart/src/main.css

@@ -37,13 +37,21 @@
   border-radius: 5px;
   transition: all 0.3s;
 }
+.dv-capsule-chart .capsule-item div .capsule-item-val {
+  position: absolute;
+  top: -5px;
+  font-size: 12px;
+}
 .dv-capsule-chart .unit-label {
   height: 20px;
   font-size: 12px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
+  position: relative;
+}
+.dv-capsule-chart .unit-label:not(:first-child) {
+  text-align: right;
+}
+.dv-capsule-chart .unit-label div {
+  position: absolute;
 }
 .dv-capsule-chart .unit-text {
   text-align: right;

lib/components/capsuleChart/src/main.vue

@@ -7,16 +7,24 @@
       </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
+            :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
+          >
+            <span
+              v-if="mergedConfig.showVal"
+              class="capsule-item-val"
+              :style="`right:-${`${capsuleValue[index]}`.length * 7}px`"
+            >{{ capsuleValue[index] }}</span>
+          </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"
+            :style="calcUnitLabelStyle(index)"
+          >{{ label }}</div>
         </div>
       </div>
 
@@ -26,19 +34,19 @@
 </template>
 
 <script>
-import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+import { deepMerge } from "@jiaminghi/charts/lib/util/index";
 
-import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+import { deepClone } from "@jiaminghi/c-render/lib/plugin/util";
 
 export default {
-  name: 'DvCapsuleChart',
+  name: "DvCapsuleChart",
   props: {
     config: {
       type: Object,
       default: () => ({})
     }
   },
-  data () {
+  data() {
     return {
       defaultConfig: {
         /**
@@ -54,61 +62,94 @@ 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: "",
+        showVal: false
       },
 
       mergedConfig: null,
 
       capsuleLength: [],
-      labelData: []
-    }
+      capsuleValue: [],
+      labelData: [],
+      labelDataLength: []
+    };
   },
   watch: {
-    config () {
-      const { calcData } = this
+    config() {
+      const { calcData } = this;
 
-      calcData()
+      calcData();
     }
   },
   methods: {
-    calcData () {
-      const { mergeConfig, calcCapsuleLengthAndLabelData } = this
+    calcData() {
+      const { mergeConfig, calcCapsuleLengthAndLabelData } = this;
 
-      mergeConfig()
+      mergeConfig();
 
-      calcCapsuleLengthAndLabelData()
+      calcCapsuleLengthAndLabelData();
     },
-    mergeConfig () {
-      let { config, defaultConfig } = this
+    mergeConfig() {
+      let { config, defaultConfig } = this;
 
-      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+      this.mergedConfig = deepMerge(
+        deepClone(defaultConfig, true),
+        config || {}
+      );
     },
-    calcCapsuleLengthAndLabelData () {
-      const { data } = this.mergedConfig
+    calcCapsuleLengthAndLabelData() {
+      const { data } = this.mergedConfig;
 
-      if (!data.length) return
+      if (!data.length) return;
 
-      const capsuleValue = data.map(({ value }) => value)
+      const capsuleValue = data.map(({ value }) => value);
 
-      const maxValue = Math.max(...capsuleValue)
+      const maxValue = Math.max(...capsuleValue);
 
-      this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0)
+      this.capsuleValue = capsuleValue;
 
-      const oneFifth = maxValue / 5
+      this.capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0));
 
-      this.labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))))
+      const oneFifth = maxValue / 5;
+
+      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
+      );
+    },
+    /**
+     * 计算x轴label位置
+     */
+    calcUnitLabelStyle(index) {
+      if((this.labelData.length - 1) === index){
+        return `right: 0;`;
+      }
+      return  `left: ${this.labelDataLength[index] * 100}%;`;
     }
   },
-  mounted () {
-    const { calcData } = this
+  mounted() {
+    const { calcData } = this;
 
-    calcData()
+    calcData();
   }
-}
+};
 </script>

src/components/capsuleChart/src/main.vue

@@ -7,16 +7,24 @@
       </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
+            :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
+          >
+            <span
+              v-if="mergedConfig.showVal"
+              class="capsule-item-val"
+              :style="`right:-${`${capsuleValue[index]}`.length * 7}px`"
+            >{{ capsuleValue[index] }}</span>
+          </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"
+            :style="calcUnitLabelStyle(index)"
+          >{{ label }}</div>
         </div>
       </div>
 
@@ -26,19 +34,19 @@
 </template>
 
 <script>
-import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+import { deepMerge } from "@jiaminghi/charts/lib/util/index";
 
-import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+import { deepClone } from "@jiaminghi/c-render/lib/plugin/util";
 
 export default {
-  name: 'DvCapsuleChart',
+  name: "DvCapsuleChart",
   props: {
     config: {
       type: Object,
       default: () => ({})
     }
   },
-  data () {
+  data() {
     return {
       defaultConfig: {
         /**
@@ -54,63 +62,96 @@ 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: "",
+        showVal: false
       },
 
       mergedConfig: null,
 
       capsuleLength: [],
-      labelData: []
-    }
+      capsuleValue: [],
+      labelData: [],
+      labelDataLength: []
+    };
   },
   watch: {
-    config () {
-      const { calcData } = this
+    config() {
+      const { calcData } = this;
 
-      calcData()
+      calcData();
     }
   },
   methods: {
-    calcData () {
-      const { mergeConfig, calcCapsuleLengthAndLabelData } = this
+    calcData() {
+      const { mergeConfig, calcCapsuleLengthAndLabelData } = this;
 
-      mergeConfig()
+      mergeConfig();
 
-      calcCapsuleLengthAndLabelData()
+      calcCapsuleLengthAndLabelData();
     },
-    mergeConfig () {
-      let { config, defaultConfig } = this
+    mergeConfig() {
+      let { config, defaultConfig } = this;
 
-      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+      this.mergedConfig = deepMerge(
+        deepClone(defaultConfig, true),
+        config || {}
+      );
     },
-    calcCapsuleLengthAndLabelData () {
-      const { data } = this.mergedConfig
+    calcCapsuleLengthAndLabelData() {
+      const { data } = this.mergedConfig;
 
-      if (!data.length) return
+      if (!data.length) return;
 
-      const capsuleValue = data.map(({ value }) => value)
+      const capsuleValue = data.map(({ value }) => value);
 
-      const maxValue = Math.max(...capsuleValue)
+      const maxValue = Math.max(...capsuleValue);
 
-      this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0)
+      this.capsuleValue = capsuleValue;
 
-      const oneFifth = maxValue / 5
+      this.capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0));
 
-      this.labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))))
+      const oneFifth = maxValue / 5;
+
+      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
+      );
+    },
+    /**
+     * 计算x轴label位置
+     */
+    calcUnitLabelStyle(index) {
+      if((this.labelData.length - 1) === index){
+        return `right: 0;`;
+      }
+      return  `left: ${this.labelDataLength[index] * 100}%;`;
     }
   },
-  mounted () {
-    const { calcData } = this
+  mounted() {
+    const { calcData } = this;
 
-    calcData()
+    calcData();
   }
-}
+};
 </script>
 
 <style lang="less">
@@ -155,16 +196,27 @@ export default {
       margin-top: 1px;
       border-radius: 5px;
       transition: all 0.3s;
+
+      .capsule-item-val {
+        position: absolute;
+        top: -5px;
+        font-size: 12px;
+      }
     }
   }
 
   .unit-label {
     height: 20px;
     font-size: 12px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
+    position: relative;
+
+    &:not(:first-child) {
+      text-align: right;
+    }
+
+    div {
+      position: absolute;
+    }
   }
 
   .unit-text {