数据可视化工具-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模式，可以帮你快速确定飞线点位置，设置组件属性dev为true即可启用dev模式：

 

 

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

 

 eg:

 

更多惊喜等你开启哟！