dataV下的轮播表利用(保姆级)

需求：展示车辆的当天的里程数，取前10名，滚动播放。需求很简朴，思量到dataV组件里有该功能，以是就直接采用了。

1. <dv-scroll-ranking-board :config="config" style="width:500px;height:220px" />

复制代码

具体代码：

1. <template>
2.         <div class="rightboxbottom">  
3.             <div class="bg-image">
4.                 <div class="text-gradient">
5.                 <h1>车辆行驶排行榜</h1>
6.                 </div>
7.             </div>
9.             <div class="body-box">
10.               <dv-scroll-board class="dv-scr-board" :config="config" ref="scrollBoard" />
11.             </div>
13.             <div class="rightBottomNname-content">今日自动驾驶公里数: {{ mileCount }}</div>  
15.         </div>
16.       </template>
18.     <script>
19.     import axios from 'axios';
21.     export default {
22.         data() {
23.             return {
24.                 noticeData:[],
25.                 config: {
26.                     header: ['id', 'Speed', 'A-mile', 'T-mile'],
27.                     data: [],
28.                     index: true,
29.                     columnWidth: [45],
30.                     align: ['center'],
31.                     carousel: 'page',
32.                     rowNum: 5, //表格行数
33.                     headerHeight: 35, // 表头高度
34.                     // headerBGC: '#0f1325', //表头
35.                     // oddRowBGC: '#0f1325', //奇数行
36.                     // evenRowBGC: '#171c33', //偶数行
37.                     waitTime: 4000 ,// 轮播时间
38.                     // hoverPause : true
39.                 },
40.                 mileCount:100,
41.                 }
42.             },
43.         async mounted() {  
44.             await this.fetchdata();  
45.             // 开始模拟异步数据返回  
46.             this.startMockData();
47.         } ,
48.         methods: {  
49.             startMockData() {  
50.                 // 使用 setTimeout 来模拟定期获取数据，确保每次请求之间有适当的间隔  
51.                 this.fetchDataAndScheduleNext();  
52.             },  
54.             async fetchDataAndScheduleNext() {  
55.                 try {  
56.                     await this.fetchdata();  
57.                     // 设置下一次请求的时间  
58.                     setTimeout(this.fetchDataAndScheduleNext, 20000); // 20 秒后  
59.                 } catch (error) {  
60.                     console.error('Error fetching data:', error);  
61.                 }  
62.             },  
64.             async fetchdata() {  
65.                 try {  
66.                     console.log("开始获取数据")
67.                 //获取今日自动驾驶总公里数
68.                 const responseAmile = await axios.get('/api/driveSumMile') // 发送请求到 Mock.js 拦截的 URL  
69.                 this.mileCount = responseAmile.data.mileCount.sumMileToday ;
72.                 //获取驾驶排名数据
73.                 const response = await axios.get('/api/driveRank') // 发送请求到 Mock.js 拦截的 URL  
74.                 const driveRank_data = response.data.driveRank_data ;  
76.                 console.log("*****获取到的数据driveRank_data****",driveRank_data)
78.                 const result_data = driveRank_data.map(v => {
79.                     return [
80.                         v['vehicle_id'],
81.                         v['speed'],
82.                         v['auto_driving_mileage'],
83.                         v['total_mileage'],
84.                         ]
85.                 })
86.                 console.log("*****result_data****",result_data)
88.                 // 假设 levelData 包含所需的数据
89.                 this.updateChart(result_data); // 更新图表数据
90.                 } catch (error) {  
91.                 console.error('Error fetching user:', error)  
92.                 }  
93.             } ,   
95.             updateChart(data) {  
96.                 console.log("*****更新前this.config****",this.config);        
97.                 this.config.data = data;
98.                 console.log("*****更新后this.config.data****",this.config);                  
99.                 this.config={...this.config}
100.                 console.log("***对象赋值之后this.config***",this.config)
101.             }  
102.         }
103.     }
104.     </script>
106.     <style lang="scss" scoped>
107.     $box-width: 378px;
108.     $box-height: 320px;
109.     .rightboxbottom {
110.       padding: 16px;
111.       padding-top: 20px;
112.       height: $box-height;
113.       width: $box-width;
114.       border-radius: 5px;
116.     .bg-image {
117.     background-image: url('../../assets/title.png') ;
118.     background-size: 100% ;
119.     background-repeat: no-repeat;
120.     background-position: center;
121.     width: 80%;
122.     height: 10%; /* 根据需要设置高度 */
123.     position: relative;
124.     display: flex;
125.     justify-content: center;
126.     align-items: center;
127.     left:10%;
128.     top:5px;
129.     }
130.     .text-gradient h1 {
131.         font-size: 18px; /* 根据需要调整字体大小 */
132.         font-weight: bold;
133.         color: transparent;
134.         background-image: linear-gradient(to right, #1c5ee4, #07e2f1, #0080ff);
135.         -webkit-background-clip: text;
136.         background-clip: text;
137.         display: inline-block;
139.         letter-spacing: 0.2rem;
140.         text-shadow: 0 0 30px #89deed;        
141.     }
142.     .body-box {
143.         margin-top:12px;
144.         // border-radius: 10px;
145.         // overflow: visible;
146.         .dv-scr-board {
147.         width: 100%;
148.         height: $box-height - 105px;
150.         }
151.     }
152.     .rightBottomNname-content {
153.     text-align: center;  
154.     margin-top: 12px;  
156.     font-size : 22px;
157.     font-weight: 800;
158.     font-family: 'Times New Roman', Times, serif;
160.     color: transparent;
161.     background-image: linear-gradient(to right, #1c5ee4, #07e2f1, #0080ff);
162.     -webkit-background-clip: text;
163.     background-clip: text;
164.     // display: inline-block;
166.     letter-spacing: 0.2rem;
167.     text-shadow: 0 0 30px #89deed;  
169.     }
171.   }
173.   </style>

复制代码

上述具体代码中，有几点需留意：
1. 数据更新使借助mockjs 来实现的，等后续接入后端接口，再须改动；
  
2. 在updateChart(data) 这个方法中，更新数据需利用 this.config={...this.config}，若仅仅利用this.config.data = data 更新数据，往往结果不能更新；
  
3. config 中的data 数据的数据范例也应留意：应为 data:['foo','foo']
  
4. 更多具体内容可参考官方文档：[DataV 官方文档](http://datav.jiaminghi.com/guide/)，上述的2、3两点文档里也有，只是为易错点，需特殊留意

  

本想着这样就可以了，运行了短时间，也很满足。但是过了一会，轮播就出差错了。表现如下：

这个48不是返回的数据，打印config.data ，数据也没问题，只是发现多了告诫：

1. runtime-core.esm-bundler.js:47  [Vue warn]: Duplicate keys found during update: 48 Make sure keys are unique.
2.   at <DvScrollBoard class="dv-scr-board" config= Object ref="scrollBoard" >
3.   at <IndexDynamicDev2>
4.   at <DvBorderBox12>
5.   at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) > >
6.   at <RouterView>
7.   at <App>

复制代码

查了很多资料，也没找到雷同的问题，只有官方论坛一个哥们有雷同，但好像也是因为欣赏器自动翻译引起的，这里不多叙述。也希望后续看到这篇文章的朋侪若出现雷同问题，并有思绪解释的，告知一下。
因为dataV的轮播表是封装好的，本领有限，改不动，（md,人还能让N 憋死 ？？？）气不过只能换个思绪，用别的给平替掉，发现dataV 中的排名轮播表也可以，就抱着试试的态度用了一下，代码和上述险些同等，具体如下：

1. <template>
2. <div class="rightboxbottom">
3.     <div class="bg-image">
4.         <div class="text-gradient">
5.         <h1>车辆行驶排行榜</h1>
6.         </div>
7.     </div>
8.     <div class="body-box">
10.         <!-- <dv-scroll-board class="dv-scr-board" :config="config" ref="scrollBoard" /> -->
11.         <dv-scroll-ranking-board class="dv-scr-rank-board" :config="ranking" />
12.     </div>
13.         <div class="rightBottomNname-content">今日自动驾驶公里数: {{ mileCount }}</div>  
15. </div>
16. </template>
18.     <script>
19.     import axios from 'axios';
21.     export default {
22.         data() {
23.             return {
24.                 ranking: {
25.                     data: [
26.                         {
27.                         name: 'vid1',
28.                         value: 55
29.                         },
30.                         {
31.                         name: 'vid2',
32.                         value: 120
33.                         },
34.                         {
35.                         name: 'vid3',
36.                         value: 78
37.                         },
38.                         {
39.                         name: 'vid4',
40.                         value: 66
41.                         },
42.                         {
43.                         name: 'vid5',
44.                         value: 80
45.                         },
46.                         {
47.                         name: 'vid6',
48.                         value: 80
49.                         },
50.                         {
51.                         name: 'vid7',
52.                         value: 80
53.                         },
54.                         {
55.                         name: 'vid8',
56.                         value: 80
57.                         },
58.                         {
59.                         name: 'vid9',
60.                         value: 80
61.                         },
62.                         {
63.                         name: 'vid10',
64.                         value: 80
65.                         }
66.                     ],
67.                     carousel: 'page',
68.                     unit: ' KM'
69.                 },
70.                 mileCount:100,
71.                 }
72.             },
73.         async mounted() {  
74.             await this.fetchdata();  
75.             // // 开始模拟异步数据返回  
76.             this.startMockData();
77.         } ,
78.         methods: {  
79.             startMockData() {  
80.                 // 使用 setTimeout 来模拟定期获取数据，确保每次请求之间有适当的间隔  
81.                 this.fetchDataAndScheduleNext();  
82.             },  
84.             async fetchDataAndScheduleNext() {  
85.                 try {  
86.                     await this.fetchdata();  
87.                     // 设置下一次请求的时间  
88.                     setTimeout(this.fetchDataAndScheduleNext, 5000); // 20 秒后  
89.                 } catch (error) {  
90.                     console.error('Error fetching data:', error);  
91.                 }  
92.             },  
94.             async fetchdata() {  
95.                 try {  
96.                     console.log("开始获取数据")
97.                 //获取今日自动驾驶总公里数
98.                 const responseAmile = await axios.get('/api/driveSumMile') // 发送请求到 Mock.js 拦截的 URL  
99.                 this.mileCount = responseAmile.data.mileCount.sumMileToday ;
102.                 //获取驾驶排名数据
103.                 const response = await axios.get('/api/driveRank_2') // 发送请求到 Mock.js 拦截的 URL  
104.                 const driveRank_data = response.data.driveRank_data ;  
106.                 console.log("*****获取到的数据driveRank_data****",driveRank_data)
108.                 let result_data = []           
109.                 driveRank_data.forEach(v => {
110.                     result_data.push({
111.                         name: v['vehicle_id'],
112.                         value: v['auto_driving_mileage']
113.                     })                    
114.                 });
115.                 console.log("*****result_data****",result_data)
117.                 // 假设 levelData 包含所需的数据
118.                 this.updateChart(result_data); // 更新图表数据
119.                 } catch (error) {  
120.                 console.error('Error fetching user:', error)  
121.                 }  
122.             } ,   
124.             updateChart(data) {  
125.                 console.log("***赋值之前this.ranking***",this.ranking)
126.                 this.ranking =  {
127.                     data: data ,
128.                     carousel: 'page',
129.                     unit: ' KM'
130.                 },
131.                 console.log("***赋值之后this.ranking***",this.ranking)
132.             },  
133.         }
134.     }
135.     </script>
137. <style lang="scss" scoped>
138.     $box-width: 378px;
139.     $box-height: 320px;
140.     .rightboxbottom {
141.     padding: 16px;
142.     padding-top: 20px;
143.     height: $box-height;
144.     width: $box-width;
145.     border-radius: 5px;
147.     .bg-image {
148.     background-image: url('../../assets/title.png') ;
149.     background-size: 100% ;
150.     background-repeat: no-repeat;
151.     background-position: center;
152.     width: 80%;
153.     height: 10%; /* 根据需要设置高度 */
154.     position: relative;
155.     display: flex;
156.     justify-content: center;
157.     align-items: center;
158.     left:10%;
159.     top:5px;
160.     }
161.     .text-gradient h1 {
162.     font-size: 18px; /* 根据需要调整字体大小 */
163.     font-weight: bold;
164.     color: transparent;
165.     background-image: linear-gradient(to right, #1c5ee4, #07e2f1, #0080ff);
166.     -webkit-background-clip: text;
167.     background-clip: text;
168.     display: inline-block;
170.     letter-spacing: 0.2rem;
171.     text-shadow: 0 0 30px #89deed;        
172.     }
173.     .body-box {
174.     margin-top:15px;
175.     margin-left:10px;
176.     margin-right:10px;
178.     // border-radius: 10px;
179.     // overflow: visible;
180.     .dv-scr-rank-board {
181.     width: 100%;
182.     height: $box-height - 115px;  
183.     }
184.     }
186.     .rightBottomNname-content {
187.     padding-top:15px;
188.     height:50px;
189.     text-align: center;  
193.     font-size : 22px;
194.     font-weight: 800;
195.     font-family: 'Times New Roman', Times, serif;
197.     color: transparent;
198.     background-image: linear-gradient(to right, #1c5ee4, #07e2f1, #0080ff);
199.     -webkit-background-clip: text;
200.     background-clip: text;
201.     // display: inline-block;
203.     letter-spacing: 0.2rem;
204.     text-shadow: 0 0 30px #89deed;  
206.     }
209.     }
210. </style>

复制代码

运行结果展示如下图，因为默认有sort自动排序，倒也符合展示的意图；

本文到这里就竣事了，主要先容了dataV的轮播表的利用及留意事项。若有出现文中雷同环境的小伙伴，接待评论区讨论哈，下一篇见！！！

1. <注>这里放一篇类似的文章，小伙伴可参考着看下<DataV数据可视化之轮播表>：
2. https://blog.csdn.net/m0_46183499/article/details/112849298?spm=1001.2101.3001.6650.18&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-18-112849298-blog-131206356.235%5Ev43%5Epc_blog_bottom_relevance_base1&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-18-112849298-blog-131206356.235%5Ev43%5Epc_blog_bottom_relevance_base1&utm_relevant_index=24

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。