GithubHelp home page GithubHelp logo

jiaming743 / datav Goto Github PK

View Code? Open in Web Editor NEW
8.8K 169.0 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%
datav svg vue bi

datav's Issues

关于react版DataV

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

是否可以配合echarts使用

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

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

Bug report

出现Bug的组件?

组件配置数据?

控制台错误输出?

期望情况?

实际情况?

其他相关信息

  • DataV版本
  • 浏览器版本
  • 其他

windows 下运行打包会报错

Bug report

出现Bug的组件?

组件配置数据?

控制台错误输出?

期望情况?

实际情况?

其他相关信息

是否因为是 linx 的路径不同?请指导一下,在 windows 下想自己打包出来,要怎么调整???

  • DataV版本
  • 浏览器版本
  • 其他

柱形图等新增

Component request

新组件的类型?

  • 边框
  • 装饰
  • 图表
  • 其他

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

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

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

码农,暂无能力

边框变大之后 ,效果异常

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

<style scoped> .dv-res >>> .demo-dv1 .border{ width: 100%; height: 100% } .dv-res >>> .border-box-content{ width: 100%; height: 100%; } .dv-res p{ color:yellow; text-align: center; } </style>

1、边框正常显示
Image 2

2、边框变大之后效果异常
Image 1

编译出错了

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

启动项目后报错

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

排名轮播表与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
  • 浏览器版本
  • 其他

动态环图当页面切换到后台后会内存泄露,导致页面崩溃,chrome测试

Bug report

出现Bug的组件?

动态环图

组件配置数据?

无特殊配置

控制台错误输出?

期望情况?

不会产生内存泄露

实际情况?

实测切换后台后内存占用一直上升,最终导致网站崩溃
实测datav文档官网也存在相同问题,切换到动态环图文档,打开chrome devtool,memory选项,切换到其他tab页,js heap size一直在上升,若长时间后台则网页会崩溃

其他相关信息

  • DataV版本
  • 浏览器版本
    chrome
  • 其他
    image

image

排名轮播表

Bug report

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

出现Bug的组件?

组件配置数据?

config:{
data:[]
}

控制台错误输出?

期望情况?

实际情况?

其他相关信息

  • DataV版本
  • 浏览器版本
  • 其他

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

Feature request

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

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

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

打包时报错了。

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版本
  • 浏览器版本
  • 其他

轮播表在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)" } ]

控制台错误输出?

期望情况?

在切换tabs的时候,轮播情况应该是一样的。而不是当前显示的tab页轮播正常

实际情况?

在初次加载页面的时候,当前显示的tab页的轮播表是正常显示,但是其他隐藏的tab页就是乱的,而且,随着轮播完就不没有了。内容里面height是0

其他相关信息

  • DataV版本 2.4.8
  • 浏览器版本 谷歌浏览器
  • 其他
    1
    3

边框类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(正式版本)
  • 其他

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

Bug report

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

出现Bug的组件?

chart.js 饼图

组件配置数据?

控制台错误输出?

期望情况?

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

实际情况?

image

其他相关信息

  • DataV版本
  • 浏览器版本
  • 其他

希望组件可以兼容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?

没有这个能力

边框变大之后,效果异常

Image 1

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

啊啊啊啊啊啊啊啊

<style scoped> .dv-res >>> .demo-dv1 .border{ width: 100%; height: 100% } .dv-res >>> .border-box-content{ width: 100%; height: 100%; } .dv-res p{ color:yellow; text-align: center; } </style>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.