datav
前面豬豬俠已經分享了很多數據大屏可視化的精美模板，都是小編浪里淘沙一點一點收集起來的，感興趣的小伙伴們可以進入豬豬俠主頁直接獲取大屏可視化模板，完全免費的哦。
古人有云，授人以魚不如授人以漁，基于這方面的考慮，所以豬豬俠這次給大家帶來了數據大屏可視化的一套工具DataV。
首先來介紹一下，DataV是干什么的？
- DataV是一個基于Vue的數據可視化組件庫（有vue版本和react版本，今天主要介紹vue版本）
- 提供用于提升頁面動態視覺效果svg邊框和裝飾
- 提供常用的圖標(loading加載，邊框，裝飾，圖表，動態環圖，膠囊柱圖，水位圖，進度池，飛線圖，錐形柱圖，數字翻牌器，輪播表等等)
如何使用
創建vue項目
組件庫依賴vue，要想使用它，首先要創建一個vue項目
// 1.安裝vue-cli
// npm i -g @vue/cli 或者 yarn global add @vue/cli
// 2.創建Vue項目
// vue create datav-project
安裝
// cd datav-project
// npm install @jiaminghi/data-view 或者 yarn add @jiaminghi/data-view
使用
// 將自動注冊所有組件為全局組件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)
按需引用
import { borderBox1 } from '@jiaminghi/data-view'
Vue.use(borderBox1)
詳細的文檔可以參展官網文檔
組件介紹
loading加載
數據尚未加載完成時，可以顯示Loading效果，增強用戶體驗。
<dv-loading>Loading...</dv-loading>
loading圖，原圖有動態效果
邊框
邊框均由SVG元素繪制，體積輕量不失真，它們的使用極為方便
<dv-border-box-1 :color="['red', 'green']" backgroundColor="blue" >dv-border-box-1</dv-border-box-1>
dv-border-Box-1，原圖有動態效果
膠囊柱圖
<dv-capsule-chart :config="config" style="width:300px;height:200px" />
膠囊柱圖
水位圖
<dv-water-level-pond :config="config" style="width:150px;height:200px" />
水位圖，原圖有動態效果
進度池
<dv-percent-pond :config="config" style="width:200px;height:100px;" />
進度池
飛線池
設置一個中心點，若干飛線點，即可得到動態飛線圖，組件提供的dev模式可以幫你快速配置飛線點位置。
<dv-flyline-chart :config="config" style="width:100%;height:100%;" />
飛線圖，原圖有動態效果
錐形柱圖
錐形柱圖是特殊的柱狀圖，它將根據數值大小，降序排列錐形柱，適合排名類數據展示。
<dv-conical-column-chart :config="config" style="width:400px;height:200px;" />
錐形柱圖
輪播表
輪播表可以單條輪播也可以整頁輪播，支持點擊事件，展示數據使用v-html渲染，因此你可以傳遞html字符串，定制個性化元素。
<dv-scroll-board :config="config" style="width:500px;height:220px" />
輪播表，原圖有滾動效果
最后還是要給大家發福利，哈哈哈，三套基于datav的大屏可視化模板。
施工養護綜合數據
機電設備電子檔案
機電運維管理
