第十二期分享:DataV数据可视化组件

59人浏览 / 1人评论

官网地址:http://datav.jiaminghi.com/



GIT地址:https://github.com/DataV-Team/datav.jiaminghi.com


具体文档参考官网介绍,这里简单介绍(基于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);



附半成品效果图:




全部评论

2021-04-15 19:34
请问dataV的click事件该怎样添加,参数是什么啊?