jiaming743 / datav Goto Github PK
View Code? Open in Web Editor NEWVue数据可视化组件库(类似阿里DataV,大屏数据展示),提供SVG的边框及装饰、图表、水位图、飞线图等组件,简单易用,长期更新(React版已发布)
Home Page: http://datav.jiaminghi.com
License: MIT License
Vue数据可视化组件库(类似阿里DataV,大屏数据展示),提供SVG的边框及装饰、图表、水位图、飞线图等组件,简单易用,长期更新(React版已发布)
Home Page: http://datav.jiaminghi.com
License: MIT License
轮播如果刷新数据,会播放越来越快
试图通过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
可以在NuxtJS中
不清楚
没有这个能力
import DataV之后,IE9内打开会报错,页面空白。
显示的错误为“script1003: 缺少 ':' ”,经过排查,
发现确实是导入了这个包的原因,在谷歌浏览器中
则不存在类似问题。
我在使用边框部分时,需要调用initWH()方法,但我发现边框类型里的1和10类型并没有混入这个方法,这是为什么
看demo网站柱形图没有x轴排列的,后期是否有可能新增这些?图表没有hover效果,像echers那样鼠标方式显示信息是否会增加?
码农,暂无能力
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
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
这样可以丰富当前的组建库
希望能加一个配置项
dv-active-ring-chart
package.json中是否需要将如下片段
"main": "/lib/index.js",
修改为:
"main": "./lib/index.js",
我在用 排名轮播表 的时候,发现,我不想要自动排序,怎么办
轮播表
官方实例
官方实例这个轮播表
http://datav.jiaminghi.com/guide/scrollBoard.html#%E5%9F%BA%E6%9C%AC%E8%BD%AE%E6%92%AD%E8%A1%A8
页面下边缘位置在轮播表里时 轮播表滚动会带动页面滚动
我想学一下demo里面的一些效果,谢谢
感谢作者的无私奉献,请问作者有打算出React版DataV吗,或者有啥推荐的,第一眼看到感觉好漂亮,我是名后端人员,对前端不太懂,但最近在学习react
轮播表组件中附带行号以后,自定义行号列的表头名称
是否因为是 linx 的路径不同?请指导一下,在 windows 下想自己打包出来,要怎么调整???
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
http://datav.jiaminghi.com/demo/ iE直接打开控制台报错
兼容IE,至少11
轮播组件10条数据播放速度越来越快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
排名轮播表动态更新数据后轮播不会从第一个开始轮播,而是从上一次轮播的地方继续轮播。。
而且更新数据时必须要以this.config={
data:[]
}
这样的方式才能更新,否则视图无变化
config:{
data:[]
}
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
刚用vue,看了源码不知道该如何下手,求大佬赐教!
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
边框类11 dv-border-box-11 中titleWidth属性设置无效,
dv-border-box-11 无法设置标题宽度
dv-border-box-11 class="border-box" titleWidth=250 title="车间列表"
期望上面那个设置文字的框框可以设置宽最好高也可以设置, 特别是文字较多 字体较大时就会溢出来
有成品的演示地址吗?
是否可以开源一些简单的三维地图组件.感谢
DataV团队
排名轮播表在v-show初始为false的组件中使用时会无法显示
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变化的监听?
现在的demo都是手动布局的,能否出一个类似DataV那种可视化搭建的工具?
配合echarts使用后,echarts图表如有多个,则不能正常显示或只能显示其中的一个图表,请问datav组件可以配合echarts使用吗?
您好,要如何获取压缩后的版本。谢谢
轮播表number类型的数据可能会报错,提示key值重复
飞线图只能从散点飞向中心点,实际上很多需求是反向的,还有多中心点需求。
新增配置项
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.