前言

• 對于大屏需求我們排名數據輪播也是經常需要用到的需求，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-輪播排名-對數據進行處理 有了初步的深刻印象，但在實際開發中我 們遇到的情況肯定是不一樣的，所以我們要理解它的原理，萬變不離其宗。加油，打工人！

有什么不足的地方請大家指出謝謝 -- 風過無痕