dv-scroll-ranking-board---排名轮播

小付-小付

已于 2022-09-06 10:53:57 修改

阅读量1.5k

点赞数

文章标签：前端 javascript npm

于 2022-09-06 10:44:23 首次发布

本文链接：https://blog.csdn.net/weixin_58431406/article/details/126719621

版权

npm 安装

npm install @jiaminghi/data-view

main.js 引用

import DataV from '@jiaminghi/data-view'
Vue.use(DataV)

页面展示

<div>
    <dv-scroll-ranking-board :config="config" style="width: 95%;background: #AA7700;  height: 370px" />
</div>

假数据：

 config: {
        data: [{
          name: "小明",
          value: 551,
        }, 
        {
          name: "小红",
          value: 501,
        },
        {
          name: "小兰",
          value: 490,
        },
        {
          name: "小强",
          value: 489,
        },
        {
          name: "小美",
          value: 449,
        },
        {
          name: "小程",
          value: 349,
        }]
 }

调接口：

 config: {
    data: []
 }
 getWarnData() {
      api.statisticsFactoryMaintenance({})
        .then((res) => {
          this.config = { data: res.data };
        })
        .catch((e) => {
          console.log(e);
        });
 },