datav-team / datav Goto Github PK

View Code? Open in Web Editor NEW

8.7K 8.7K 1.7K 3.08 MB

Vue数据可视化组件库（类似阿里DataV，大屏数据展示），提供SVG的边框及装饰、图表、水位图、飞线图等组件，简单易用，长期更新(React版已发布)

Home Page: http://datav.jiaminghi.com

License: MIT License

JavaScript 9.51% Vue 86.52% CSS 3.74% HTML 0.23%

bi datav svg vue

datav's Introduction

ENGLISH

DataV

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全屏后查看。

施工养护综合数据

机电运维管理台

机电设备电子档案

datav's People

Contributors

Stargazers

Watchers

Forkers

alinew fengjinli tsinemperor haoluziqi yangguichun herboys fatesta augly wwyyffaa wumiaosheng pittillo copywei leepule iderekli tchigher guoxiaodongmm tonsalhuang captain883 crazzy111 sirius65535 liangzuan1983 smaii zhangfeitaimengle leegkon tonylv sidsid1986 huazhz b-xiang haodaohong chinesehxj jonyhuang luoshulin zacobin hj3938 chanbaihai lxh674685799 hanqian200705 ftt1024 xueshan001 jiaxiang227 duyuxuan jangocheng tomissyou shine-lzx keep-alive junneyang cn-xufei zss1004504439 joncv piwenjun nankarina joinergreat nevellson songyongguang neppure casually zyxyuanxiao daisty gnahsnil aixj1984 xingwang0524 rain20188 xianlimei ahweb shiliangl baitcenter nepu1960 bg1011 sys2007 simlan fengzhiyang2019 dlsyaim layacoder luckilyhang huangkaizheng weikety cssrain wangdong121993 fantboy szhorizon hqz0129 chz367 grayguest jin20190923 dragonxu keyzf chandlertu warrior701 jeremychenn hellokung lt1067066026 chencunxin xdlailai rouroux lapchun foxxnuaa lanxianhui loveminer yanluohao bosioer

datav's Issues

import DataV之后，IE9内打开会报错，页面空白。

import DataV之后，IE9内打开会报错，页面空白。
显示的错误为“script1003: 缺少 ':' ”，经过排查，
发现确实是导入了这个包的原因，在谷歌浏览器中
则不存在类似问题。

Bug report

排名轮播表动态更新数据后轮播不会从第一个开始轮播，而是从上一次轮播的地方继续轮播。。
而且更新数据时必须要以this.config={
data:[]
}
这样的方式才能更新，否则视图无变化

出现Bug的组件？

组件配置数据？

config:{
data:[]
}

控制台错误输出？

期望情况？

实际情况？

其他相关信息

DataV版本
浏览器版本
其他

Feature request

这个特性解决了什么问题？

这个特性的实现形式？

是否愿意为此特性提交PR？

编译出错了

n ./node_modules/_@[email protected]@@jiaminghi/data-view/lib/components/conicalColumnChart/src/main.vue

Syntax Error: Unexpected token (159:8)

157 |
158 | data = data.map(item => ({

159 | ...item,
| ^
160 | percent: item.value / max
161 | }))
162 |

@ ./node_modules/@[email protected]@@jiaminghi/data-view/lib/components/conicalColumnChart/src/main.vue 4:0-122 5:0-135
@ ./node_modules/@[email protected]@@jiaminghi/data-view/lib/components/conicalColumnChart/index.js
@ ./node_modules/_@[email protected]@@jiaminghi/data-view/lib/index.js
@ ./src/main.js
@ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

error in ./node_modules/_@[email protected]@@jiaminghi/data-view/lib/components/scrollBoard/src/main.vue

Syntax Error: Unexpected token (263:35)

261 | }
262 |

263 | data = data.map((d, i) => ({ ...d, scroll: i }))
| ^
264 |
265 | this.rowsData = data
266 | this.rows = data

轮播会越来越快

轮播如果刷新数据，会播放越来越快

IE不兼容啊，而且有些效果火狐也不兼容

要如何获取压缩后的版本

您好，要如何获取压缩后的版本。谢谢

引入后项目显示无法找到依赖包

package.json中是否需要将如下片段
"main": "/lib/index.js",
修改为：
"main": "./lib/index.js",

排名轮播表与v-show有冲突

Bug report

排名轮播表在v-show初始为false的组件中使用时会无法显示

出现Bug的组件？

dv-scroll-ranking-board

组件配置数据？

控制台错误输出？

期望情况？

实际情况？

其他相关信息

DataV组件代码分析

//  src/components/scrollRankingBoard/src/main.vue
calcHeights (onresize = false) {
      // 初始v-show为false时，组件display为none，autoResize获取的height是0
      // 当v-show变为true时，autoResize并不会重新检查height值，此时height还是0
      const { height, mergedConfig } = this

      const { rowNum, data } = mergedConfig
      // 这里在计算时可以使用vue ref获取的高度
      const domHeight = this.$refs[this.ref].clientHeight
      
      const avgHeight = domHeight / rowNum

      // const avgHeight = height / rowNum

      this.avgHeight = avgHeight

      if (!onresize) this.heights = new Array(data.length).fill(avgHeight)

    }

或者在autoResize中增加一个组件display变化的监听？

DataV版本 v2.7.0
浏览器版本
其他

IE有兼容性问题，demo直接在IE11打开空白

Bug report

出现Bug的组件？

http://datav.jiaminghi.com/demo/ iE直接打开控制台报错

组件配置数据？

控制台错误输出？

期望情况？

兼容IE，至少11

实际情况？

其他相关信息

DataV版本
引入DataV,npm包使用也会报错，npm包是最新的
浏览器版本
IE11
其他

柱形图等新增

Component request

新组件的类型？

边框
装饰
图表
其他

这个组件的功能描述 (边框及装饰类，请提供样图)？

看demo网站柱形图没有x轴排列的，后期是否有可能新增这些？图表没有hover效果，像echers那样鼠标方式显示信息是否会增加？

是否愿意为此组件提交PR？

码农，暂无能力

轮播图能否添加设置字的颜色、分割线及分割线颜色

Feature request

这个特性解决了什么问题？

这个特性的实现形式？

是否愿意为此特性提交PR？

排名轮播表data属性的name属性扩展

Feature request

多个值传入data子对象的name属性时可以对值添加样式或者标签

这个特性解决了什么问题？

可以在传入多个值时只对文字/数字/分割符添加样式

边框类11 dv-border-box-11 中titleWidth属性设置无效

Bug report

边框类11 dv-border-box-11 中titleWidth属性设置无效，

出现Bug的组件？

dv-border-box-11 无法设置标题宽度

组件配置数据？

dv-border-box-11 class="border-box" titleWidth=250 title="车间列表"

控制台错误输出？

期望情况？

期望上面那个设置文字的框框可以设置宽最好高也可以设置，特别是文字较多字体较大时就会溢出来

实际情况？

其他相关信息

DataV版本
"@jiaminghi/data-view": "^2.7.3",
浏览器版本
Google Chrome版本 76.0.3809.132（正式版本）
其他

typeScript好像无法使用

typeScript 无法安装使用

关于react版DataV

感谢作者的无私奉献，请问作者有打算出React版DataV吗，或者有啥推荐的，第一眼看到感觉好漂亮，我是名后端人员，对前端不太懂，但最近在学习react

全屏容器如何在非全屏的时候可以滚动，避免只显示部分的情况

刚用vue，看了源码不知道该如何下手，求大佬赐教！

饼图某些数据比较小，密集会导致标注重合

Bug report

饼图当某些数据比较小，会导致标注线重合

出现Bug的组件？

chart.js 饼图

组件配置数据？

控制台错误输出？

期望情况？

需要像E-chart那样有一个配置项，标注不会重合

实际情况？

其他相关信息

DataV版本
浏览器版本
其他

动态环图内的数字翻牌器设置两位小数只显示xx.00%

Bug report

出现Bug的组件？

dv-active-ring-chart

DataV版本
2.7.2
浏览器版本
其他

希望组件可以兼容Nuxt

试图通过NuxtJS框架中通过Plugin注册DataV时来开发Web应用时，出现错误

import Vue from 'vue'
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

module "d:/9. we-covmee/gdcc-datav/node_modules/@jiaminghi/data-view/lib/index"
Could not find a declaration file for module '@jiaminghi/data-view'. 'd:/9. we-covmee/gdcc-datav/node_modules/@jiaminghi/data-view/lib/index.js' implicitly has an 'any' type.
Try npm install @types/jiaminghi__data-view if it exists or add a new declaration (.d.ts) file containing declare module '@jiaminghi/data-view';ts(7016)
No quick fixes available

运行时错误：

SyntaxError
Unexpected token export

Feature request

这个特性解决了什么问题？

可以在NuxtJS中

这个特性的实现形式？

不清楚

是否愿意为此特性提交PR？

没有这个能力

开发一套可搭建的可视化系统

Feature request

这个特性解决了什么问题？

这个特性的实现形式？

是否愿意为此特性提交PR？

请问能把demo的源码分享一下吗

我想学一下demo里面的一些效果，谢谢

是否可以配合echarts使用

配合echarts使用后，echarts图表如有多个，则不能正常显示或只能显示其中的一个图表，请问datav组件可以配合echarts使用吗？

轮播表number类型的数据可能会报错

轮播表number类型的数据可能会报错,提示key值重复

比如动态环图等组件是否支持比如点击等事件

Component request

新组件的类型？

边框
装饰
图表
其他

这个组件的功能描述 (边框及装饰类，请提供样图)？

是否愿意为此组件提交PR？

请问作者是阿里DataV团队的吗

Bug report

出现Bug的组件？

组件配置数据？

控制台错误输出？

期望情况？

实际情况？

其他相关信息

DataV版本
浏览器版本
其他

支持可视化项目搭建？

现在的demo都是手动布局的，能否出一个类似DataV那种可视化搭建的工具？

轮播表会带动页面滚动？

Bug report

出现Bug的组件？

轮播表

组件配置数据？

官方实例

控制台错误输出？

官方实例这个轮播表
http://datav.jiaminghi.com/guide/scrollBoard.html#%E5%9F%BA%E6%9C%AC%E8%BD%AE%E6%92%AD%E8%A1%A8
页面下边缘位置在轮播表里时轮播表滚动会带动页面滚动

有成品的演示地址吗？

我在用排名轮播表的时候，发现，我不想要自动排序，怎么办

建议写一个类似用户可自由扩展的教程

这样可以丰富当前的组建库

城市三维地图组件

是否可以开源一些简单的三维地图组件.感谢
DataV团队

谷歌浏览器内存溢出崩溃的问题解决了么？

Bug report

出现Bug的组件？

组件配置数据？

控制台错误输出？

期望情况？

实际情况？

其他相关信息

DataV版本
浏览器版本
其他

飞线图能否提供对应points的mousedown mouseup click等弹层显示明细内容事件

Feature request

这个特性解决了什么问题？

这个特性的实现形式？

是否愿意为此特性提交PR？

轮播组件10条数据播放速度越来越快bug

动态环图内的数字翻牌器不能设置两位小数

Feature request

这个特性解决了什么问题？

希望能加一个配置项

启动项目后报错

Syntax Error: Unexpected token (255:35)

253 | }
254 |

255 | data = data.map((d, i) => ({ ...d, scroll: i }))
| ^
256 |
257 | this.rowsData = data
258 | this.rows = data

这个插件自带的图标不支持鼠标交互效果吗，比如讲鼠标移动到图表上，显示其对应的数据

Feature request

这个特性解决了什么问题？

这个特性的实现形式？

是否愿意为此特性提交PR？

打包时报错了。

Bug report

出现Bug的组件？

npm run build
打包时报的错误

组件配置数据？

控制台错误输出？

Microsoft Windows [版本 10.0.17134.472]
(c) 2018 Microsoft Corporation。保留所有权利。

d:\VProjects\DataV>npm run build

@jiaminghi/[email protected] build d:\VProjects\DataV
node build/index.js

Unhandled Rejection at: Promise Promise {
TypeError: "callback" argument must be a function
at makeStatsCallback (fs.js:148:11)
at Object.fs.stat (fs.js:924:14)
at resolve (d:\VProjects\DataV\node_modules@jiaminghi\fs\src\index.js:38:8)
at new Promise ()
at stat (d:\VProjects\DataV\node_modules@jiaminghi\fs\src\index.js:37:10)
at emptyDir (d:\VProjects\DataV\node_modules@jiaminghi\fs\src\index.js:159:25)
at } reason: TypeError: "callback" argument must be a function
at makeStatsCallback (fs.js:148:11)
at Object.fs.stat (fs.js:924:14)
at resolve (d:\VProjects\DataV\node_modules@jiaminghi\fs\src\index.js:38:8)
at new Promise ()
at stat (d:\VProjects\DataV\node_modules@jiaminghi\fs\src\index.js:37:10)
at emptyDir (d:\VProjects\DataV\node_modules@jiaminghi\fs\src\index.js:159:25)
at

期望情况？

完成打包

实际情况？

其他相关信息

d:\VProjects\DataV>node -v
v8.11.3

DataV版本
浏览器版本
其他

边框类型里的1和10类型并没有混入initWH这个方法

我在使用边框部分时，需要调用initWH()方法，但我发现边框类型里的1和10类型并没有混入这个方法，这是为什么

轮播表在tabs切换的时候，隐藏tab页无法正常显示

Bug report

出现Bug的组件？

轮播表

组件配置数据？

rankItems: [ { header: ["姓名", "身份证号", "测试成绩", "国标分"], data: [ ["吴*", "-", "15.5", "100.00"], ["吴*", "3501****0142", "20.2", "100.00"], ["庄*", "3501****0100", "17.4", "100.00"], ["童*", "4209****1039", "15.5", "100.00"], ["关*", "2205****0204", "16.6", "95.00"], ["徐*", "3501****002X", "14.7", "94.00"], ["周*", "-", "12.4", "90.00"], ["蔡*", "3503****115x", "10.5", "90.00"], ["张*", "-", "8.4", "82.00"], ["荣*", "3501****0077", "8.1", "82.00"], ["陈*", "3504****3312", "6.6", "78.00"], ["吴*", "3501****0097", "6.7", "78.00"], ["阴*", "1101****9639", "5.7", "76.00"], ["李*", "3501****0422", "5.7", "75.00"], ["陆*", "3507****2513", "6.7", "70.00"] ], index: true, align: ["center"], columnWidth: [50, 120, 300, 60, 60], oddRowBGC: "rgba(9, 37, 50, 0.4)", evenRowBGC: "rgba(10, 32, 50, 0.3)" }, { header: ["姓名", "身份证号", "测试成绩", "国标分"], data: [ ["周*", "3501****0108", "38", "92.00"], ["禅*", "3501****0036", "40", "90.00"], ["陈*", "-", "39", "89.00"], ["陈*", "3501****0054", "46", "86.00"], ["童**", "4209****1039", "46", "86.00"], ["陈*", "3504****3312", "42", "82.00"], ["陆*", "3507****2513", "42", "82.00"], ["徐*", "3501****002X", "40", "70.00"], ["谢*", "6531****1623", "24", "69.00"], ["李*", "3501****0422", "38", "68.00"], ["陈*", "3501****0172", "40", "60.00"], ["阴*", "1101****9639", "40", "60.00"], ["蔡*", "3503****115x", "30", "60.00"], ["陈*", "3507****3024", "40", "60.00"], ["林*", "3501****005X", "44", "55.00"] ], index: true, align: ["center"], columnWidth: [50, 120, 300, 60, 60], oddRowBGC: "rgba(9, 37, 50, 0.4)", evenRowBGC: "rgba(10, 32, 50, 0.3)" } ]