天天看點

實踐DataV大屏開發中遇到的問題

DataV是實作資料可視化的應用,通過圖形化的界面輕松搭建專業水準的可視化應用,但是再好的應用在使用過程中不免也會出現一些小問題,對前端開發的精準性有着一些影響,如果需要用到的元件沒有的樣式或者沒有想要的元件可能就會影響頁面開發效果,這時就需要使用一些小技巧,友善前端人員實作設計稿中的樣式,我在前一段時間大屏開發中遇到了很多問題,同時也有了一些心得和解決問題的小技巧,例如:

1.tab清單在DataV中是不能設定圓角和邊框的,這樣可能會影響樣式的美觀程度,而且無法完全滿足設計稿樣式,要想使tab清單外面有邊框和圓角可以考慮在tab清單外部加上裝飾框,裝飾框本身是可以設定圓角的,這可以解決tab清單不能設定圓角的問題,而使用大框套小框的方式即可以讓tab清單輕松擁有邊框。

實踐DataV大屏開發中遇到的問題

圖1.1 tab清單邊框圓角組成

實踐DataV大屏開發中遇到的問題

圖1.2 tab清單樣式

2.互動操作:DataV中主要有兩種互動方式,

(1)在畫布中回調id

 步驟:1.在tab清單中點選上方第三個按鈕 2.勾選啟用欄 3.給id字段綁定到變量,給變量賦一個值 4.在需要通過tab切換的元件中使用該變量

實踐DataV大屏開發中遇到的問題

圖2.1 tab清單操作

實踐DataV大屏開發中遇到的問題

圖2.2 變量在sql中寫法

(2)在藍圖編輯器裡操作,通過這兩種方式可以實作tab清單和單選框等的互動切換操作,點選單選框選項使得樣式來回切換,這可以在藍圖編輯器中進行(在DataV中的互動操作都是在藍圖編輯器中操作),兩個選項的時候隻需串行資料處理連接配接樣式切換顯隐即可(如:

省市地圖,全國地圖的切換),而選項多的時候可以序列執行節點,首先是所有樣式隐藏,然後連接配接多路判斷寫出每個選項對應的判斷語句,最後當點選某一選項的時候該選項對應的樣式顯示(如:點選選項時對應的選項外邊框樣式的變化,點選不同tab清單或單選框時不同樣式的切換)。

實踐DataV大屏開發中遇到的問題

圖2.3 藍圖中切換顯隐

3.使用畫布編輯器時要注意層級關系,該置底的置底,該隐藏的隐藏,剛開始玩DataV的時候經常遇到本來樣式好好的,一到預覽頁面就不能用了,比如:我在使用地圖自帶的互動時,明明在畫布編輯器已經打開了,但是預覽的時候又不能拖拽地圖了,結果苦惱了半天才發現頁面邊框的樣式是個單張圖檔被我放在中間,而地圖被我放在了最底層。

4.寫大屏的時候一定好劃分子產品,而且子產品裡的元件應該逐層包裹,這樣調整子產品内部樣式的時候不至于牽一發而動全身,隻想調一個小樣式,結果導緻子產品整體樣式推翻,多推翻幾次就長記性了,别問我怎麼知道的。

5.做大屏的時候,最重要的還是效果,各種動效都是必不可少的,隻有元件都動起來才會有超好超酷超炫的視覺效果,比如:翻牌器實時資料更新,地圖柱形圖定時輪播,輪播圖輪播清單的使用,tab清單輪播切換等,這些全都一起動起來時,我們想要的酷炫大屏就基本完成了。

6.業務趨勢元件,如果不想在下降時value是負數,可以使得base大于value值,也可以使符号是下降的而值是正數。

以上算是我在應用DataV開發時的一些淺薄的經驗總結吧,之後可能有更加深入的實踐經驗總結時再進一步的談談資料切換互動等問題。