ENGLISH

DataV 是干什么的?

• DataV 是一个基于Vue的数据可视化组件库（当然也有React 版本）
• 提供用于提升页面视觉效果的SVG边框和装饰
• 提供常用的图表如折线图等
• 飞线图/轮播表等其他组件

npm 安装

$ npm install @jiaminghi/data-view

使用

import Vue from "vue";
import DataV from "@jiaminghi/data-view";

Vue.use(DataV);

// 按需引入
import { borderBox1 } from "@jiaminghi/data-view";
Vue.use(borderBox1);

详细文档及示例请移步HomePage.

UMD 版

UMD版可直接使用script标签引入，UMD版文件位于项目dist目录下，引入后将自动把所有组件注册为Vue 全局组件，引入DataV前请确保已引入Vue。

UMD 版使用示例

TODO

• 地图组件
• TS重构组件库底层依赖

致谢

组件库的开发基于个人学习和兴趣，由于技术水平及经验的限制，组件尚有许多不完善之处，如有 BUG 可及时提交issue或添加反馈群进行反馈，也欢迎提供指正和建议，感谢各位的支持。

反馈

Demo

Demo 页面使用了全屏组件，请 F11 全屏后查看。

• 施工养护综合数据

• 机电运维管理台

• 机电设备电子档案

修改成兼容 vue3 版改动

基于 DataV 2.10.0 版本的打包改动 由于 vue3 兼容 vue2 option API,且 datav 源码采用的 vue2api 在 vue3 中也兼容,改动内容如下

1. decoration3 和 decoration6 组件源码里将 template 的 v-for 绑定在 rect 上
2. 增加了打包成 esm,iife,cjs 格式,将依赖其余的库如@jiaminghi/charts 也打包进去(为了在 vite 中可以直接将使用 esm 格式,如果不打包,由于依赖的其他库作者是打包成 umd 模块,在开发过程中 vite 需要单独配置这些依赖或者单独引入才能进行依赖预购建成 esm 模块)
3. 修改了 rollup.config.mjs 和 rollup.terse 人.config.mjs 中的配置,增加了esm,iife,cjs入口文件,

Vue2 版使用方式

和原来一样,只不过包名变成@iamzzg/data-view

Vue3 版使用方式

datav 打包成 vue3 的版本在 dist/vue3 文件夹下

1. umd 使用方式 未托管到 cdn,可以直接复制dist/vue3/datav.map.vue.js

<script src="dist/vue3/datav.map.vue.js"></script>
<script>
  // app是createApp()的返回值
  app.use(datav);
</script>

2. esm 使用方式 安装

npm i @iamzzg/data-view

全局注册

import datav from "@iamzzg/data-view/dist/vue3/datav.map.vue.esm";

app.use(datav);

按需导入,和 vue2 方式一致

import { borderBox1 } from "@iamzzg/data-view/dist/vue3/datav.map.vue.esm";
app.use(borderBox1);