推荐一款好用的大屏组件库--DataV，主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用

最新推荐文章于 2025-06-18 18:01:06 发布

原创最新推荐文章于 2025-06-18 18:01:06 发布 · 置顶 · 7.1k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #node.js

vue.js 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍如何在Vue项目中使用DataV数据可视化组件，包括安装依赖、全局注册、按需引入及具体组件应用示例，如全屏容器、轮播表、边框和装饰组件等。

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

DataV数据可视化组件

官网地址：DataV

GIT地址：官方GIT、demo

具体文档参考官网介绍，这里简单介绍（基于VUE项目）：

创建VUE项目（这里不多解释）。

注：一定要注意看官方文档！！！

安装依赖：

npm install @jiaminghi/data-view

在main.js加入（全局）：

import dataV from '@jiaminghi/data-view'

Vue.use(dataV)

组件化方式：参考官方demo

按需引入：

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'

Vue.use(dataV)

使用：

在需要引入的页面，添加全屏容器

<dv-full-screen-container>全屏容器</dv-full-screen-container>

全屏组件中可以添加自定义模块，根据实际需要添加dataV组件，这里列举部分：

<dv-full-screen-container class="mains">
      <dv-border-box-1 class="divone">
        <dv-decoration-7 class="newtitle" style="width: 250px ; height: 30px;">
          <span style="margin: 0 10px;">标题</span>
        </dv-decoration-7>
        <div class="statics">
          共计
          <span class="nums">9999</span>项
        </div>
        <dv-decoration-10 style="width:90%;height:5px;margin:0 auto;margin-top: -50px;" />
        <dv-scroll-board ref="deconfig" :config="configone" class="one-table" />
      </dv-border-box-1>
    </dv-full-screen-container>

export default {
  name: "Home",
  data() {
    return {
    configone: {
        header: [ "h1", "h2","h3"],
        data: [],
        index: false,
        align: ["left"],
        headerHeight: 50,
        headerBGC: "#010c5100",
        oddRowBGC: "#061152",
        evenRowBGC: "#010c5100",
        rowNum: 6
      },
    }
}

上面代码涉及到全屏组件、轮播表组件、边框组件、装饰组件等，其他组件应用类似。

config相关属性参考官网说明~~~

updateRows方法使用

/**
 * @param {string[][]} rows 更新后的行数据
 * @param {number} index 下次滚动的起始行 （可缺省）
 */
function updateRows(rows, index) {
  // ...
}

组件上设置ref属性，通过ref获取轮播表实例，在实例上调用updateRows方法，例：

<dv-scroll-board ref="deconfig" :config="configone" class="one-table" />

/**
this.configone.data数据为更新后的数据
*/
this.$refs.deconfig.updateRows(this.configone.data, 0);

后面的就都差不多了，大差不差0.0

个人博客：http://www.hongxiawangluo.com/