# 介绍

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

  • 边框

带有不同边框的容器

  • 装饰

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

  • 图表

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

  • 其他

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

# 用前必看

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

兼容性

组件库的开发和调试都使用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官网

# 安装

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 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>