数据可视化工具-Vue-DataV入门


官网:http://datav.jiaminghi.com/guide

项目效果图【注:已创建Vue项目】

 

 

 

1.npm安装

npm install @jiaminghi/data-view

 

2.全局引用

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

 

 3.项目案例使用

在官方文档中选择想要的效果,复制代码即可

eg:加载效果    <dv-loading>Loading...</dv-loading>

 

 4.效果展示

 5.水位图的完整代码

 

 

 

 

 

 

 

 6.胶囊柱图

 

 

 7.飞线图

 

 

1)组件提供了dev模式,可以帮你快速确定飞线点位置,设置组件属性devtrue即可启用dev模式:

 

 

2)根据config参数调整飞线图效果

 

 eg:

 

更多惊喜等你开启哟!


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM