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

59人浏览 / 0人评论

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

《半成品》

 

全部评论