- 產品
- 產品解決方案
- 行業解決方案
- 案例
- 數據資產入表
- 賦能中心
- 伙伴
- 關于
時間:2019-10-15來源:億信華辰瀏覽數:796次
在近期的回訪電話中很多用戶在使用酷屏云體驗的時候,覺得不好用,細問之下才得知,原來是自己動手制作的大屏可視化太丑了,跟線上的案例圖片比起來簡直沒眼看。這倒是讓我不厚道的笑了,一番安慰后,還是要鼓勵用戶繼續多體驗,畢竟咱們酷屏的特效組件太多了,好不好看也是需要打磨和染色的,今天給大家詳細講解的功能是能讓你的大屏可視化變的更加炫酷——大屏聯動效果。
酷屏是億信華辰自主研發的新一代數據可視化產品,內置近百種組件特效,六十余種風格各異的表格、導航、統計圖等組件及SVG特效可供用戶選擇,展示效果炫酷,可任意制作酷炫靈動的圖表和大屏。
酷屏的炫酷效果我們已經展示過不少,今天我們來上點干貨!話不多說,先上圖為敬!
實際上這是一個非常簡單的小例子,很容易上手,點擊中心主圖圍繞著的小球,左上角發光柱狀圖隨之變化。下面,我們一步步來看是怎么實現的。
第一步:做好表格
?
第二步:確定聯動依據
聯動時,我們需要一個依據作為參數,例如時間,地區,性別,年齡、id等都是常見的聯動刷新參數,這里我們以id為例。
?
第三步:寫過濾條件
左上角的發光柱狀圖的數據是依賴表格1進行展示的,所以我們找到表格1,點擊聯動依據所在的表元,寫過濾條件<#=mkfilter("F_CPUNCFPQS.CODE=@code")#>。
?
聯動的過程實際上是,通過點擊的操作,得到參數值,表元根據過濾條件和參數值進行計算,得到數據,最后,需要聯動的組件通過腳本重新刷新渲染,將這些數據展示出來。
此次例子中的過濾條件為<#=mkfilter("主題表字段名稱=@code")#>,其中@code是我們自己取的參數名稱,過一會兒會在點擊事件的腳本中用到。
?
第四步:寫點擊事件腳本
這一步因為有“腳本”這個詞,所以聽上去非常高級,但是大家不要被表象所迷惑,覺得難就害怕去動手(一共也就一行,再慢也不過2分鐘說完)
先看一下完整腳本,長這樣:

?
選中需要設置點擊事件的組件,去屬性面板中找到對應位置,然后你會發現,彈出的腳本對話框長這樣:
?
所以,實際上需要我們寫的只有一行。而calc_Special_Widget接口是內置實現好的,格式長這樣:calc_Special_Widget(new EUI.Map("calc_widget_id=表格/統計圖的代號;參數名=參數值"))
也就是說,真正需要我們操心的,只有紅色標記的那部分。
代號——組件唯一標識符,選中組件看屬性面板:HHH24
?
參數名自己取,這次是@code,參數值ele.id是點擊對象的id,然后就搞定了。
是不是看起來復雜,實際上很簡單呢,難的部分都已經封裝好了,直接上手拿著用就行了~
小伙伴們還在等什么呢?趕緊動手試試吧!~~