feat: add countTo and numberScroll

components/CountTo/CountTo.vue

+<template>
+	<view class="count-to" >
+		<BasicText :elementInfo="elementInfo"></BasicText>
+		<!-- warning:count-to的font-size单位为rpx -->
+		<u-count-to :start-val="startVal" :end-val="endVal" :color="elementInfo.option.countTo.color" :font-size="elementInfo.option.countTo.fontSize"></u-count-to>	
+	</view>
+</template>
+
+<script>
+	import echartElementData from '@/mixins/echartElementData.js'
+	export default {
+		name:"CountTo",
+		mixins: [echartElementData],
+		data() {
+			return {
+				startVal: 0,
+				endVal: 0,
+			};
+		},
+	
+		computed: {
+		},
+		methods: {
+			initChart() {
+				this.$nextTick(() => {
+					this.startVal = this.endVal
+					this.endVal = this.elementData.dataList.endVal
+				})
+			},
+		},
+		
+	}
+	
+</script>
+
+<style>
+.count-to {  
+  font-size: 30px;
+  color: #f9bb70;
+  font-weight: bold;
+  text-align: center;
+}
+
+</style>

components/NumberScroll/NumberScroll.vue

+<template>
+	<view class="chart-num">
+		<BasicText :elementInfo="elementInfo"></BasicText>
+		<ul class="box-item marginTop20">
+			<li v-for="(item, index) in orderNum" :key="index"
+				:class="{'number-item': !isNaN(item), 'mark-item': isNaN(item)}" :style="{
+		          width: `${elementInfo.option.title.numItemWidth}px`,
+		          height: `${elementInfo.option.title.numItemHeight}px`,
+		          fontSize: `${elementInfo.option.title.numItemFontSize}px`
+		        }">
+				<span v-if="!isNaN(item)"
+					:class="{'hasDividingLine': elementInfo.option.title.dividingLine && !isNaN(item)}"
+					:style="{'background': elementInfo.option.title.backgroundColor}">
+					<!-- 第一个数字为0，不显示 -->
+					<i v-if="item === '0' && index === 0" :class="[numberItemsClass()]" :id="index" :style="{transform:setTransformByIndex(index)}"/>
+					<i v-else :id="index" :class="[numberItemsClass()]" :style="{transform:setTransformByIndex(index)}">0123456789</i>
+				</span>
+				<span v-else class="comma">
+					<!-- 第一个数字为0，不显示逗号 -->
+					<i v-if="orderNum[index - 1] === '0' && index === 1" />
+					<i v-else>{{ item }}</i>
+				</span>
+			</li>
+		</ul>
+	</view>
+</template>
+
+<script>
+	import echartElementData from '@/mixins/echartElementData.js'
+
+	export default {
+		name: "NumberScroll",
+		mixins: [echartElementData],
+		data() {
+			return {
+				orderNum: [],
+				endVal: 100,
+			};
+		},
+		computed: {
+		},
+		methods: {
+			initChart() {
+				this.$nextTick(() => {
+					this.endVal = this.elementData.dataList.endVal
+					this.toOrderNumber(this.endVal)
+				})
+			},
+
+			toOrderNumber(num) {
+				if (!num) return
+				// numDigit代表前面预留几个空格
+				let len = num.toString().length
+				this.orderNum = this.$u.common.toThousands(num).split('')
+				debugger
+				// len < 8,超过8位，前面不预留空格
+				if (this.elementInfo.option.title.numDigit && len < 8) {
+					len = len + this.elementInfo.option.title.numDigit
+					// 加上这个没有效果，下面的toThousands会把前面补的0去掉
+					// num = this.$u.common.fillDigit(num, len)
+					let l = this.elementInfo.option.title.numDigit
+					for(let i = 0 ; i < l; i++) {
+						this.orderNum.unshift('0')
+					}
+				}
+				debugger
+			},
+
+			setTransformByIndex(index) {
+				return `translate(-50%, -${this.orderNum[index] * 10}%)`
+			},
+
+			numberItemsClass() {
+				return 'numberItems-' + this.elementInfo.id
+			}
+		},
+	}
+</script>
+
+<style scoped lang="less">
+	.box-item {
+		font-family: '微软雅黑';
+		text-align: left;
+		white-space: nowrap;
+	}
+
+	.hasDividingLine {
+		&::before {
+			display: block;
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			content: ' ';
+			width: 100%;
+			height: 4%;
+			background: #0c0062;
+		}
+	}
+
+	.number-item {
+		display: inline-block;
+		position: relative;
+		width: 11%;
+		list-style: none;
+		color: #f2a867;
+		margin-right: 6px;
+		border-radius: 4px;
+
+		&>span {
+			position: relative;
+			display: inline-block;
+			margin-right: 10px;
+			width: 100%;
+			height: 100%;
+			writing-mode: vertical-rl;
+			text-orientation: upright;
+			-webkit-text-orientation: upright;
+			overflow: hidden;
+
+			&>i {
+				font-style: normal;
+				position: absolute;
+				top: 5px;
+				left: 50%;
+				transform: translate(-50%, 0);
+				transition: transform 1s ease-in-out;
+				letter-spacing: 10px;
+			}
+		}
+	}
+
+	.number-item:last-child {
+		margin-right: 0;
+	}
+
+	.comma {
+		display: inline-block;
+		color: #fff;
+		font-size: 20px;
+	}
+
+	.mark-item {
+		display: inline-block;
+		margin-right: 6px;
+		width: 5px !important;
+	}
+</style>

pages/index/index.vue

@@ -22,6 +22,10 @@
 			<BarMixMap v-if="element.type == 'BarMixMap'" :elementInfo="element"></BarMixMap>
 			<!-- 雷达图 -->
 			<NormalRadar v-if="element.type == 'NormalRadar'" :elementInfo="element"></NormalRadar>
+			<!-- 普通数字滚动 -->
+			<CountTo v-if="element.type == 'CountTo'" :elementInfo="element"></CountTo>
+			<!-- 数字滚动 -->
+			<NumberScroll v-if="element.type == 'NumberScroll'" :elementInfo="element"></NumberScroll>
 			<!-- 文本框 -->
 			<BasicText v-if="element.type == 'BasicText'" :elementInfo="element"></BasicText>
 			<!-- 真实时间 -->

utils/common.js

@@ -9,8 +9,32 @@ const install = (Vue, vm) => {
 	  return new Function('"use strict";return (' + func + ')')()(data);
 	}
 	
+	/**
+	   * 补足数字位数
+	   * @param digit 数字
+	   * @param len 位数
+	   */
+	const fillDigit = (digit, len) => {
+	  return padStart('' + digit, len, '0')
+	}
+	
+	const toThousands = (value) => {
+	  let result = ''
+	  let num = (parseInt(value) || 0).toString()
+	  while (num.length > 3) {
+	    result = ',' + num.slice(-3) + result
+	    num = num.slice(0, num.length - 3)
+	  }
+	  if (num) {
+	    result = num + result
+	  }
+	  return result
+	}
+	
 	vm.$u.common = {
-		converFunction
+		converFunction,
+		fillDigit,
+		toThousands
 	}
 }