地圖資料輪播突出顯示

1.1 預期效果

某些情況下地圖資料輪播時需要將省份高亮展示，並且可以聯動其他圖表達到拓寬地圖資料展示維度的目的，如下圖所示：

1.2 實現思路

• 地圖省份高亮的效果透過設定「特效>條件顯示」來實現。

• 地圖和其他圖表之間的聯動透過參數面板來實現，具體方法為將所有區域名放到參數介面的一個文字元件裏，文字元件用「初始化後事件」實現依次取值賦給下拉框元件，然後用下拉框元件實現過濾查詢。

注1：參數查詢時範本重新載入，會出現短暫的空白介面。若不需要突出顯示，可參考文檔：自動輪播資料點提示時聯動其他圖表 。

注2：FVS的實現方式可參考文檔：FVS圖表提示輪播聯動其他組件

注3：普通報表設定方法與決策報表相同

注4：不支援行動端

2.1 準備資料

建立決策報表，建立兩個資料庫查詢，SQL 查詢語句分別為：

ds1：SELECT * FROM 地圖 where 省份 like '%省%'

ds2：SELECT * FROM 地圖 where 1=1 ${if(len(省份)==0,"","and 省份='"+省份+"'")} and 省份 like '%省%'

其中 ds2 資料集定義了一個參數，參數名為「省份」。如下圖所示：

2.2 設計圖表

將地圖和柱形圖拖入到 body 中，適當的拉寬地圖組件大小。如下圖所示：

2.2.1 設計地圖

1）編輯地圖，綁定地圖資料。如下圖所示：

2）點選「特效>條件顯示」，給地圖新增一個條件屬性，實現輪播時區域名即省份根據參數「省份」顯示為紅色。設定如下圖所示：

2.2.2 設計柱形圖

1）編輯柱形圖，綁定柱形圖的資料。如下圖所示：

2）點選「樣式」，取消勾選標題可見，設定圖例位置居上。如下圖所示：

2.3 設計參數介面

2.3.1 新增參數

將參數介面拖入 body，自動置入 body 最上方。點選右上角的「全部新增」按鈕，參數「省份」即被新增進參數介面。如下圖所示：

2.3.2 設定下拉框元件

設定「省份」為下拉框元件。點選  圖示，選擇「下拉框元件」，如下圖所示：

設定下拉框元件的元件值預設為「安徽省」，資料字典為「資料查詢>ds1」，實際值與顯示值均為「省份」。如下圖所示：

2.3.3 設定文字元件

1）向參數介面拖入一個文字元件，設定其元件名稱為「text0」，並取消勾選可見。

設定其元件值為公式：=sql("FRDemoTW","select 省份 from 地圖 where 省份 like '%省'",1)。即元件值是從資料庫表中獲取的省份。

2）給「文字元件」新增一個初始化後事件，JavaScript 程式碼如下：

var text0=this.getValue();
var arr=text0.split(",");
var i=1;
var a=this.options.form.getWidgetByName("省份");
setInterval(function(){
var value=arr[i];
if(i<=arr.length){
a.setValue(value);
_g().parameterCommit();
if(i==arr.length-1){
i=0;
}
else{i=i+1;}
}
},5000);
显示代码

步驟如下圖所示：

2.3.4 設定參數介面屬性

選中參數介面 para，取消勾選「點選查詢前不顯示報表內容」和「使用常用參數組合」。如果勾選了「點選查詢前不顯示報表內容」，那麼報表預覽時第一個省份的資料將不會顯示。

2.4 效果預覽

儲存報表，點選「PC端預覽」，效果如 1.1 節預期效果所示。

點選下載範本：地圖資料輪播突出顯示.frm