DataV

# 介绍

组件库基于Vue （React版 (opens new window)） ，主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用：

  • 边框

带有不同边框的容器

  • 装饰

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

  • 图表

图表组件基于Charts (opens new window)封装，轻量，易用

  • 其他

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

# 用前必看

使用前应阅读以下提示，这样出现相应问题后可以快速解决。

兼容性

组件库的开发和调试都使用Chrome浏览器，没有时间和精力做其他浏览器的兼容，尤其是IE。

所以请使用Chrome浏览器。

宽高异常

组件的默认宽高都是100%，可以根据父容器宽高进行自适应，但在某些情况下组件宽高可能表现异常，这种情况一般是因为组件的父容器宽高发生了变化，而组件没有侦知这一变化，你可以在组件上绑定key值，在更改父容器宽高且页面完成重绘后（使用$nextTick），更新key值，使组件强制刷新，以获取正确宽高。

状态更新

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

组件props均未设置deep监听，刷新props时，请直接生成新的props对象（基础数据类型除外），或完成赋值操作后使用ES6拓展运算符生成新的props对象（this.someProps = { ...this.someProps }）。

具体更新数据示例

点击以展示/隐藏示例
<template>
  <div class="update-demo">
    <dv-percent-pond :config="config" style="width:200px;height:100px;" />
  </div>
</template>

<script>
export default {
  name: 'UpdateDemo',
  data () {
    return {
      config: {
        value: 66,
        lineDash: [10, 2]
      }
    }
  },
  methods: {
    // 更新数据的示例方法
    updateHandler () {
      const { config } = this

      /**
       * 只是这样做是无效
       * config指向的内存地址没有发生变化
       * 组件无法侦知数据变化
       */
      this.config.value = 90
      this.config.lineDash = [10, 4]

      /**
       * 使用ES6拓展运算符生成新的props对象
       * 组件侦知数据变化 自动刷新状态
       */
      this.config = { ...this.config }
    }
  }
}
</script>

# 创建Vue项目

组件库依赖vue，要想使用它，创建一个Vue项目当然是必须的，如果已有Vue项目或使用UMD版开发可跳过此步骤。

安装Vue/Cli

  • npm安装
npm i -g @vue/cli
  • yarn安装
yarn global add @vue/cli

创建Vue项目

vue create datav-project

Vue/Cli官网 (opens new window)

# 安装

cd datav-project

在Vue项目下进行组件库安装。

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

# 使用

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

Vue.use(dataV)

# 按需引入

按需引入仅支持基于ES module的tree shaking，按需引入示例如下：

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

Vue.use(borderBox1)

# UMD版

UMD版可直接使用script标签引入，UMD版文件下载请移步UMD (opens new window)，引入后将自动把所有组件注册为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>

全屏容器 →