起步
@1.在vue項目中通過 :cnpm install @jiaminghi/data-view進行安裝組件
@2.引入
@2.1 在main.js中進行全局引入
@2.2 按需引入，僅支持ES module的tree shaking
使用
@1. 全屏容器
數據可視化頁面一般在游覽器全屏播放，使用全屏容器可以填充整個屏幕。
全屏容器使用：
Tips：使用時最好設置全局樣式，將body的margin，padding設為0，以提供更好的展示。
@2. Loading加載
在頁面加載過程中可以使用，dv-loading可以提供加載動畫。
@3.邊框
@3.1使用事項
1. 邊框內樣式
內部填充物相當於被slot插槽塞入了邊框組件下的class名為：border-box-content的容器中，所以我們需要進行樣式調整時，可以對其class進行修改
2. 組件化使用
建議使用組件化開發，把邊框內的節點作為單獨組件的形式置入邊框中。這是Vue中slot的渲染導致的，如果你要在生命周期：mounted之后對置入邊框內的節點進行DOM操作，繪制echarts圖等，可能會出現獲取不到的情況，使用組件置入會避免這類事情發生。
3. 寬高變化
如果邊框所在的父容器寬高變化，導致邊框沒有隨之變化，我們可以使用組件內置的initWH方法來重置邊框組件的寬高，以避免寬高變化導致的一系列問題的產生。
@3.2 背景顏色
可以設置邊框顏色（color），邊框內部背景顏色（backgroundColor），color支持一主一副兩種顏色。
@3.3 具體樣式
共有十幾款不同樣式，不一一例舉，具體樣式請詳見：請點這里
基本用法：
@4.裝飾物
@4.1 背景顏色
與邊框類似，裝飾都支持自定義顏色，配置也類似邊框設置，可以設置一主一副雙色。
@4.2具體樣式
也有十幾款樣式，具體事例，可詳見：點我
其中有幾個特殊樣式，例如
其為一段不斷延長的射線，可以設置其動畫速度：dur
掃描圖樣式的dv-decoration-12，可設置其掃描動畫和光暈動畫
@5.圖表
@5.1基本
圖表組件是基於chart的封裝，如果我們使用，我們只需要將圖表對應的option數據傳入就可以了
Option數據按你需要的寫入就可以了。
大部分配置項都有其默認配置，我們只需要配置個別屬性就可以生成需要圖表。如需設計個性化圖表，需要對，樣式，動畫，顏色等進行設置，以下為主要需要做的配置項:
如果我們需要修改默認配置，可以如下圖，進行引用。
@5.2 title
title標簽是用來顯示圖表的標題的，有以下可以設置的標簽
show：是否展示標簽（默認true）
text:標題文字
offset：標題位置偏移
style：標題樣式（經常使用），寫法如下
rLevel:標題渲染效果（默認20），暫時沒用過
animationCurve：標題緩動曲線（默認easeOutCubic），沒用過
animationFrame：標題緩動幀數（默認50），沒用過
@5.3 legend
legend即是為圖表提供標簽，以下為常用的，全部請看文檔
left,right,top,bottom:圖例標簽的邊距
data：構成圖例標簽的數據（以數組形式）
textstyle：標簽文字默認樣式
@5.4 xAxis，yAxis
xAxis，yAxis用來設置x，y坐標軸，值可以為對象或者數組，以下為常用
name:設置坐標軸的名稱
data：設置坐標軸的標簽內容，xAxis為橫向，yAxis為縱向
positon：設置坐標軸位置
nameTextStyle：可以設置坐標軸名稱的樣式
axisLabel：可以設置坐標軸標簽的樣式
@5.5 grid
grid主要是配合坐標系工作，配置它，可以設置坐標系的寬高大小（沒用過）
主要也是left，right，top，bottom等等基礎設置，詳見文檔
@5.6 radar
Radar主要是為了雷達圖提供坐標系支持，如果需要使用雷達圖，需要使用該配置，常用如下，詳情完整個性化件見文檔
Indicator：指示器，常用name（指示符標簽名），max（指示符最大值）
Show：是否顯示該雷達圖坐標系（默認true）
Center：坐標系中心點（默認[50%,50%]，中心）
Radius：坐標系半徑
@5.7 實用series
可以通過series來配置我們需要的各種圖表信息，以下為幾個常用圖表
@5.7.1.折線圖
通過配置上面幾個常用選項（xAxis，yAxis，title這些），以及定制化的series對應的屬性：設置series,type為line，即為折線圖，具體某些定制化樣式，詳見文檔。
定制化方面常用的有
stack：控制數據堆疊時誰顯示在上面，類似z-index
data：設置我們需要展示的數據信息（數組形式）
@5.7.2. 柱狀圖
基礎配置同上，定制化的series對應屬性：type設為bar，定制化樣式具體api，也可見上方折線圖列出的文檔
定制化相關主要為優化顯示，例如橫向柱狀圖，就是講data綁定在yAxis中
效果如下：
@5.7.3 餅狀圖
基礎配置同上，定制化的series對應屬性：type設為pie，定制化樣式具體api，也可見上方折線圖列出的文檔
定制化主要就是樣式優化
insideLabel：控制餅狀圖旁邊的label是否顯示
roseType：玫瑰形餅狀圖
radius：環形餅狀圖（數組['40%', '50%']）
@5.7.4 雷達圖
基礎配置同上，定制化的series對應屬性：type設為radar，定制化樣式具體api，也可見上方折線圖列出的文檔
特別的是，需要用到我們@5.6的radar的相關配置，具體常用見5.6所列。
Indicator：控制了，外側指示符顯示的數值和大小
Polygon：控制是否顯示多邊形坐標系（Boolean類型）
axisLine：坐標軸線的配置
splitArea：坐標系分隔區配置（實現多種顏色雷達圖）
@5.7.5. 儀表盤
基礎配置同上，定制化的series對應屬性：type設為gauge，定制化樣式具體api，也可見上方折線圖列出的文檔
常用的專業化配置：
Details：用於控制輪盤中間的顯示文字，show用來設置是否展示，formatter用來填寫需要顯示的信息
axisLabel：坐標標簽配置項，數據會自動計算，可以設置其formatter格式
一個基本儀盤表大概配置如下
@6.動態環圖
是基於Charts的封裝，data等數據都寫在config中
Config中配置具體需要顯示的數據，可配置項如下：
常用的有：
Data：用來寫展示的具體數據，
Radiu：控制環半徑的顯示。
@7.膠囊柱圖
常用的Config如下：
Data：可以設置柱顯示的數據，需要用數組寫入，有name，value
Color：控制柱子每項的顏色
@8.水位圖
常用config如下：
Shape：控制水位圖的形狀，默認rect，可選：roundRect，round
@9.進度池
如果只需要實用最基礎的，我們只需要配置一個value值就可以了，當然，我們可以配置邊框的弧度（borderRadius），間距（borderGap）等等
以下是詳細可配置項：
@10.飛線圖及飛線增強圖
我理解的，大概效果就是你自己通過坐標設置N個飛線點（point）之后，通過lines在任意兩點之間設置飛線，初始點是source，終點是target，完成類似的效果圖：
Tips：上面不是真的地圖，只是我設置的背景圖。
一張圖中，我們可以通過組件提供的dev模式，來幫助我們快速確定我們所需的飛線點的具體位置：
我們會在F12控制台中，打印出所需飛線點的位置信息，即Point的coordinate
飛線點寫法是這樣的，point為飛線點數組集合：
飛線是這樣的：
常用的API有：
Dev：尋找具體點坐標
Text：show是否顯示點名稱，color顏色，fontsize字體等
@11.錐形柱圖
是一種特殊樣式的柱狀圖，用法也類似，詳情看柱狀圖，不多做介紹，樣式如下：
@12. 數字翻牌器
一種數碼牌類似的，可以用來大屏展示，效果如右圖：
主要用到的需要設置的config屬性有：
Number：顯示的數字，類型是數組，
Content：是顯示的內容模板，形如：{nt}個，其中{nt}是被number元素替換的，按順序一一對應。
toFixed：是用來顯示小數位數，形如XXX.XX這種，類型為number，數值為小數位數。
@13.輪播表
是一個表格樣式的輪播表：與下圖類似：
同時對超過行，有滾動效果，適合用於列表數據的展示，其中config綁定數據如下：
主要用到的是header和data數據，以及樣式里面的表行數和表的背景顏色，這些數據都是寫在config里面，如下圖：
翻牌器同時內置支持click事件和mouseover事件，當我們點擊某一行時候，會在游覽器控制台中打印點擊相關的事件屬性，把鼠標停留在某一行上面時，也會觸發mouseover事件，打印對應的屬性。
@14.排名輪播表
和輪播表類似，整體config設置也類似，只是顯示帶上了排名。
Data數據有所區別，是以鍵值對數組的方式進行存儲，屬性是下圖：
整體寫法大概是類似這種：
結尾
這篇主要寫了我在使用datav中，覺得比較常用的組件，和每個組件大概的使用方法，也有一些原文檔沒有寫清楚實際開發中遇到的坑，數據基本都是和config綁定，大部分config屬性和常用的方法我都進行了展示。datav里面同時也集成了作者封裝的簡易charts組件，具體的使用我也在@5圖標中有寫。如果有實在不清楚的，可以去官方文檔看看有沒有自己想要的對應解決方案。地址見下：