在近期的回訪電話中很多用戶在使用酷屏云體驗(yàn)的時(shí)候，覺得不好用，細(xì)問之下才得知，原來是自己動(dòng)手制作的大屏可視化太丑了，跟線上的案例圖片比起來簡(jiǎn)直沒眼看。這倒是讓我不厚道的笑了，一番安慰后，還是要鼓勵(lì)用戶繼續(xù)多體驗(yàn)，畢竟咱們酷屏的特效組件太多了，好不好看也是需要打磨和染色的，今天給大家詳細(xì)講解的功能是能讓你的大屏可視化變的更加炫酷——大屏聯(lián)動(dòng)效果。

酷屏是億信華辰自主研發(fā)的新一代數(shù)據(jù)可視化產(chǎn)品，內(nèi)置近百種組件特效，六十余種風(fēng)格各異的表格、導(dǎo)航、統(tǒng)計(jì)圖等組件及SVG特效可供用戶選擇，展示效果炫酷，可任意制作酷炫靈動(dòng)的圖表和大屏。

酷屏的炫酷效果我們已經(jīng)展示過不少，今天我們來上點(diǎn)干貨！話不多說，先上圖為敬！

實(shí)際上這是一個(gè)非常簡(jiǎn)單的小例子，很容易上手，點(diǎn)擊中心主圖圍繞著的小球，左上角發(fā)光柱狀圖隨之變化。下面，我們一步步來看是怎么實(shí)現(xiàn)的。

第一步：做好表格

?

第二步：確定聯(lián)動(dòng)依據(jù)

聯(lián)動(dòng)時(shí)，我們需要一個(gè)依據(jù)作為參數(shù)，例如時(shí)間，地區(qū)，性別，年齡、id等都是常見的聯(lián)動(dòng)刷新參數(shù)，這里我們以id為例。

?

第三步：寫過濾條件

左上角的發(fā)光柱狀圖的數(shù)據(jù)是依賴表格1進(jìn)行展示的，所以我們找到表格1，點(diǎn)擊聯(lián)動(dòng)依據(jù)所在的表元，寫過濾條件<#=mkfilter("F_CPUNCFPQS.CODE=@code")#>。

?

聯(lián)動(dòng)的過程實(shí)際上是，通過點(diǎn)擊的操作，得到參數(shù)值，表元根據(jù)過濾條件和參數(shù)值進(jìn)行計(jì)算，得到數(shù)據(jù)，最后，需要聯(lián)動(dòng)的組件通過腳本重新刷新渲染，將這些數(shù)據(jù)展示出來。

此次例子中的過濾條件為<#=mkfilter("主題表字段名稱=@code")#>，其中@code是我們自己取的參數(shù)名稱，過一會(huì)兒會(huì)在點(diǎn)擊事件的腳本中用到。

?

第四步：寫點(diǎn)擊事件腳本

這一步因?yàn)橛小澳_本”這個(gè)詞，所以聽上去非常高級(jí)，但是大家不要被表象所迷惑，覺得難就害怕去動(dòng)手（一共也就一行，再慢也不過2分鐘說完）

先看一下完整腳本，長(zhǎng)這樣：

?

選中需要設(shè)置點(diǎn)擊事件的組件，去屬性面板中找到對(duì)應(yīng)位置，然后你會(huì)發(fā)現(xiàn)，彈出的腳本對(duì)話框長(zhǎng)這樣：

?

所以，實(shí)際上需要我們寫的只有一行。而calc_Special_Widget接口是內(nèi)置實(shí)現(xiàn)好的，格式長(zhǎng)這樣：calc_Special_Widget(new EUI.Map("calc_widget_id=表格/統(tǒng)計(jì)圖的代號(hào);參數(shù)名=參數(shù)值"))

也就是說，真正需要我們操心的，只有紅色標(biāo)記的那部分。

代號(hào)——組件唯一標(biāo)識(shí)符，選中組件看屬性面板：HHH24

?

參數(shù)名自己取，這次是@code，參數(shù)值ele.id是點(diǎn)擊對(duì)象的id，然后就搞定了。

是不是看起來復(fù)雜，實(shí)際上很簡(jiǎn)單呢，難的部分都已經(jīng)封裝好了，直接上手拿著用就行了~

小伙伴們還在等什么呢？趕緊動(dòng)手試試吧！~~