datav-轮播排名-对数据进行处理

前言

对于大屏需求我们排名数据轮播也是经常需要用到的需求，datav也是给我们提供了
不是说我们自己不能写，而是提供好的轮子比我们自己写的，更全面，更周到，
没有特殊需求的话，使用datav配置一下完成这个是真的快，处理一下数据就可以了

代码实现-子组件-可复制

<template><div id="DatavRanking"><dv-scroll-ranking-board :config="config" style="width:100%;height:100%" /></div>
</template>

<script>
export default {name: 'DatavRanking',data () {return {// 配置项config: {// 数据data: [{name: '周口',value: 5512},{name: '南阳',value: 120220},{name: '西峡',value: 789},{name: '驻马店',value: 63411},{name: '新乡',value: 44231},{name: '周口',value: 5512},{name: '南阳',value: 1202},{name: '西峡',value: 789},{name: '驻马店',value: 6341},{name: '新乡',value: 44231}],// 显示几行rowNum: 5,// 轮播时间waitTime: 3500,// 数值单位-写了valueFormatter-这个就不生效unit: '秦',// 自动排序sort: true,// 数据格式valueFormatter ({ name, value, percent, ranking }) {// 打印数值console.warn(arguments)// 处理数字分隔const reverseNumber = (value + '').split('')let valueStr = ''
while (reverseNumber.length) {const seg = reverseNumber.splice(0, 3).join('')
valueStr += segif (seg.length === 3) valueStr += ','}
// 清除最后一个逗号问题if (valueStr[valueStr.length - 1] == ',')return valueStr.toString().slice(0, -1) + '(次数)'console.log('valueStr', valueStr)
// 最后一位不是逗号，不用处理return valueStr + '(次数)'}}}},created () {},methods: {}
}
</script>

<style lang="scss" scoped>
#DatavRanking {width: 100%;height: 100%;
}
</style>

总结：

经过这一趟流程下来相信你也对 datav-轮播排名-对数据进行处理有了初步的深刻印象，但在实际开发中我们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！