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

小付-小付

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

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript npm

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

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

本文介绍了如何通过npm安装@jiaminghi/data-view库，并在Vue项目中使用该库进行数据可视化。示例展示了在main.js中引入DataV，以及在页面上创建滚动排名板组件的配置和数据绑定。通过调用接口获取数据并更新配置，实现动态数据展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
        });
 },