scrollRankingBoard & capsuleChart add new params

lib/components/capsuleChart/src/main.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="dv-capsule-chart">
     <template v-if="mergedConfig">
-      <div class="label-column">
-        <div v-for="item in mergedConfig.data" :key="item.name">{{ item.name }}</div>
+      <div class="label-column" v-if="mergedConfig.yAxis.show">
+        <div 
+          v-for="item in mergedConfig.data" 
+          :key="item.name" 
+          :style="`font-size: ${mergedConfig.yAxis.fontSize}px; color: ${mergedConfig.yAxis.fill};`"
+        >{{ item.name }}</div>
         <div>&nbsp;</div>
       </div>
 
@@ -13,16 +17,18 @@
             :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
           >
             <div
-              v-if="mergedConfig.showValue"
+              v-if="mergedConfig.value.show"
               class="capsule-item-value"
+              :style="`font-size: ${mergedConfig.value.fontSize}px; color: ${mergedConfig.value.fill};`"
             >{{ capsuleValue[index] }}</div>
           </div>
         </div>
 
-        <div class="unit-label">
+        <div class="unit-label" v-if="mergedConfig.xAxis.show">
           <div
             v-for="(label, index) in labelData"
             :key="label + index"
+            :style="`font-size: ${mergedConfig.xAxis.fontSize}px; color: ${mergedConfig.xAxis.fill};`"
           >{{ label }}</div>
         </div>
       </div>
@@ -77,11 +83,77 @@ export default {
          */
         unit: '',
         /**
-         * @description Show item value
-         * @type {Boolean}
-         * @default showValue = false
+         * @description item value style
+         * @type {Object}
          */
-        showValue: false
+        value: {
+        /**
+          * @description Show item value
+          * @type {Boolean}
+          * @default show = false
+          */
+          show: false,
+        /**
+          * @description item value fontSize
+          * @type {Number}
+          * @default fontSize = 12
+          */  
+          fontSize: 12,
+        /**
+          * @description item value color
+          * @type {Number}
+          * @default fill = '#fff'
+          */  
+          fill: '#fff'
+        },
+        /**
+         * @description xAxis style
+         * @type {Object}
+         */
+        xAxis: {
+        /**
+          * @description Show xAxis text
+          * @type {Boolean}
+          * @default show = true
+          */
+          show: true,
+        /**
+          * @description xAxis text fontSize
+          * @type {Number}
+          * @default fontSize = 12
+          */  
+          fontSize: 12,
+        /**
+          * @description xAxis text color
+          * @type {Number}
+          * @default fill = '#fff'
+          */  
+          fill: '#fff'
+        },
+        /**
+         * @description yAxis style
+         * @type {Object}
+         */
+        yAxis: {
+        /**
+          * @description Show yAxis text
+          * @type {Boolean}
+          * @default show = true
+          */
+          show: true,
+        /**
+          * @description yAxis text fontSize
+          * @type {Number}
+          * @default fontSize = 12
+          */  
+          fontSize: 12,
+        /**
+          * @description yAxis text color
+          * @type {Number}
+          * @default fill = '#fff'
+          */  
+          fill: '#fff'
+        }
       },
 
       mergedConfig: null,

lib/components/percentPond/src/main.vue

@@ -236,7 +236,7 @@ export default {
 
       await $nextTick()
 
-      const { clientWidth, clientHeight } = $refs['percent-pond']
+      const { clientWidth, clientHeight } = $refs['percent-pond'] || {}
 
       this.width = clientWidth
       this.height = clientHeight

lib/components/scrollBoard/src/main.vue

@@ -9,6 +9,7 @@
           height: ${mergedConfig.headerHeight}px;
           line-height: ${mergedConfig.headerHeight}px;
           width: ${widths[i]}px;
+          font-size: ${mergedConfig.headerFontSize}px
         `"
         :align="aligns[i]"
         v-html="headerItem"
@@ -27,14 +28,14 @@
         :style="`
           height: ${heights[ri]}px;
           line-height: ${heights[ri]}px;
-          background-color: ${mergedConfig[row.rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC']};
+          background: ${mergedConfig.highlightRowNum > 0 && row.rowIndex < mergedConfig.highlightRowNum ? `linear-gradient(to left, rgba(0,0,0,0) 0%,${mergedConfig.highlightBgColor} 50%, rgba(0,0,0,0) 100%)` : (mergedConfig[row.rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC'])};
         `"
       >
         <div
           class="ceil"
           v-for="(ceil, ci) in row.ceils"
           :key="`${ceil}${ri}${ci}`"
-          :style="`width: ${widths[ci]}px;`"
+          :style="`width: ${widths[ci]}px;font-size: ${mergedConfig.bodyFontSize}px`"
           :align="aligns[ci]"
           v-html="ceil"
           @click="emitEvent('click', ri, ci, row, ceil)"
@@ -117,6 +118,18 @@ export default {
          * @default headerHeight = 35
          */
         headerHeight: 35,
+        /**
+         * @description Header font size
+         * @type {Number}
+         * @default headerFontSize = 15
+         */
+        headerFontSize: 15,
+        /**
+         * @description Body font size
+         * @type {Number}
+         * @default bodyFontSize = 14
+         */
+        bodyFontSize: 14,
         /**
          * @description Column width
          * @type {Array<Number>}
@@ -155,7 +168,19 @@ export default {
          * @default hoverPause = true
          * @example hoverPause = true | false
          */
-        hoverPause: true
+        hoverPause: true,
+        /**
+         * @description highlight rowNum
+         * @type {Number}
+         * @default highlightRowNum = 0
+         */
+        highlightRowNum: 0,
+        /**
+         * @description highlight color
+         * @type {String}
+         * @default highlightBgColor = '#fff'
+         */
+        highlightBgColor: '#fff'
       },
 
       mergedConfig: null,

lib/components/scrollRankingBoard/src/main.css

@@ -18,19 +18,16 @@
 }
 .dv-scroll-ranking-board .ranking-info .rank {
   width: 40px;
-  color: #1370fb;
 }
 .dv-scroll-ranking-board .ranking-info .info-name {
   flex: 1;
 }
 .dv-scroll-ranking-board .ranking-column {
-  border-bottom: 2px solid rgba(19, 112, 251, 0.5);
   margin-top: 5px;
 }
 .dv-scroll-ranking-board .ranking-column .inside-column {
   position: relative;
   height: 6px;
-  background-color: #1370fb;
   margin-bottom: 2px;
   border-radius: 1px;
   overflow: hidden;

lib/components/scrollRankingBoard/src/main.vue

@@ -7,15 +7,15 @@
       :style="`height: ${heights[i]}px;`"
     >
       <div class="ranking-info">
-        <div class="rank">No.{{ item.ranking }}</div>
+        <div class="rank" :style="`color: ${mergedConfig.themeColor};`">No.{{ item.ranking }}</div>
         <div class="info-name" v-html="item.name" />
         <div class="ranking-value">{{ mergedConfig.valueFormatter ? mergedConfig.valueFormatter(item) : item.value + mergedConfig.unit }}</div>
       </div>
 
-      <div class="ranking-column">
+      <div class="ranking-column" :style="`border-bottom: 2px solid ${transformToRgba(mergedConfig.themeColor, 0.5)}`">
         <div
           class="inside-column"
-          :style="`width: ${item.percent}%;`"
+          :style="`width: ${item.percent}%;background-color: ${mergedConfig.themeColor};`"
         >
           <div class="shine" />
         </div>
@@ -31,6 +31,8 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
+import { colorRgba } from '../../../util'
+
 export default {
   name: 'DvScrollRankingBoard',
   mixins: [autoResize],
@@ -88,7 +90,13 @@ export default {
          * @type {Function}
          * @default valueFormatter = null
          */
-        valueFormatter: null
+        valueFormatter: null,
+        /**
+         * @description theme color
+         * @type {String}
+         * @default themeColor = '#1370fb'
+         */
+        themeColor: '#1370fb',
       },
 
       mergedConfig: null,
@@ -239,6 +247,9 @@ export default {
 
       clearTimeout(animationHandler)
     },
+    transformToRgba () {
+      return colorRgba(this.mergedConfig.themeColor, 0.5)
+    }
   },
   destroyed () {
     const { stopAnimation } = this

lib/util/index.js

@@ -45,3 +45,45 @@ export function uuid (hasHyphen) {
 		return v.toString(16)
   })
 }
+
+
+/**
+* 转换为rgba
+* @param sHex  
+* @param alpha
+*/
+ export function colorRgba(sHex, alpha = 1) {
+  if (sHex.indexOf('rgb') === -1) {
+    // 十六进制颜色值的正则表达式
+    const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{4}|[0-9a-fA-f]{6}|[0-9a-fA-f]{8})$/
+    /* 16进制颜色转为RGB格式 */
+    let sColor = sHex.toLowerCase()
+    if (sColor && reg.test(sColor)) {
+      if (sColor.length === 4 || sColor.length === 5) {
+        var sColorNew = '#'
+        for (var i = 1; i < sColor.length; i += 1) {
+          sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
+        }
+        sColor = sColorNew
+      }
+      // 如果有透明度并且传入的透明度为1再执行
+      if (sColor.length === 9 && alpha === 1) {
+        alpha = Number((parseInt('0x' + sColor.slice(7, 9)) / 255).toFixed(2))
+      }
+      //  处理六位的颜色值
+      var sColorChange = []
+      for (var i = 1; i < 7; i += 2) {
+        sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
+      }
+      return 'rgba(' + sColorChange.join(',') + ',' + alpha + ')'
+    } else {
+      return sColor
+    }
+  }
+  else { // 若原本就是rgba或rgb，则需要再次转换
+    let colorList = sHex.replace('rgba(', '').replace('rgb(', '').replace(')', '').replace(/\s*/g, "").split(',')
+    if (colorList.length === 4) // 若为rgba
+      colorList.pop() //删除最后一个
+    return ('rgba(' + colorList.join(',') + ',' + alpha + ')')
+  }
+}