# 介绍

组件库基于VueReact版,主要用于构建大屏(全屏)数据展示页面即数据可视化,具有多种类型组件可供使用:

  • 边框

带有不同边框的容器

  • 装饰

用来点缀页面效果,增加视觉效果

  • 图表

图表组件基于Charts封装,轻量,易用

  • 其他

飞线图/水位图/轮播表/...

TIP

建议使用Chrome浏览器。

用前必看

避免你的组件更新了数据后,状态却不刷新,也就是没变化,请务必看这里

组件props均未设置deep监听,刷新props时,请直接生成新的props,请勿直接更新props下某一个属性,这样组件将无法刷新状态。

this.someProps.someAttr = ['foo', 'foo']是无效的

this.someProps = { someAttr: ['foo', 'foo'] }才是有效的

建议的更新数据的方式

点击以展示/隐藏示例
<template>
  <div class="update-demo">
    <dv-scroll-board :config="config" style="width:500px;height:300px" />
  </div>
</template>

<script>
export default {
  name: 'UpdateDemo',
  data () {
    return {
      // data写好默认配置
      config: {
        header: ['列1', '列2', '列3'],
        data: [],
        index: true,
        columnWidth: [50],
        align: ['center']
      }
    }
  },
  methods: {
    updateHandler () {
      const { config, getScrollBoardData } = this

      const data = getScrollBoardData()

      // 生成新的config 并使用新的data覆盖原有config中的data
      this.config = {
        ...config,
        data
      }
    },
    getScrollBoardData () {
      return [
        ['行1列1', '行1列2', '行1列3'],
        ['行2列1', '行2列2', '行2列3'],
        ['行3列1', '行3列2', '行3列3'],
        ['行4列1', '行4列2', '行4列3'],
        ['行5列1', '行5列2', '行5列3'],
        ['行6列1', '行6列2', '行6列3'],
        ['行7列1', '行7列2', '行7列3'],
        ['行8列1', '行8列2', '行8列3'],
        ['行9列1', '行9列2', '行9列3'],
        ['行10列1', '行10列2', '行10列3']
      ]
    }
  }
}
</script>

# 安装

  • npm安装
npm install @jiaminghi/data-view
  • yarn安装
yarn add @jiaminghi/data-view

# 使用

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

Vue.use(dataV)

# 按需引入

按需引入仅支持基于ES moduletree shaking,按需引入示例如下:

import { borderBox1 } from '@jiaminghi/data-view'

Vue.use(borderBox1)

# UMD版

UMD版可直接使用script标签引入,UMD版文件下载请移步UMD,引入后将自动把所有组件注册为Vue全局组件,引入DataV前请确保已引入Vue

点击以展示/隐藏UMD版使用示例
<!DOCTYPE html>
<html>
<head>
  <title>DataV</title>
  <script src="https://unpkg.com/vue"></script>
  <!--调试版-->
  <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.map.vue.js"></script>
  <!--压缩版 生产版本-->
  <!-- <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.min.vue.js"></script> -->
  <style>
    html, body, #app {
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
    }

    .border-box-content {
      color: rgb(66,185,131);
      font-size: 40px;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <div id="app">
    <dv-border-box-1>Welcome to DataV</dv-border-box-1>
  </div>

  <script>
    var app = new Vue({
      el: '#app'
    })
  </script>
</body>
</html>