參數查詢聯動ECharts圖表

1.1 版本

1.2 預期效果

當使用 ECharts圖表引用範本資料集 時，希望 ECharts 圖表透過參數查詢實現動態變化。預期效果如下圖所示：

1.3 實現思路

在普通報表或決策報表的「參數面板」中，設定參數和查詢元件，ECharts 圖表利用 FR.remoteEvaluate() 接收參數實現 ECharts 圖表動態展示。

注：暫不支援在「填報報表」或「決策報表 body」中，直接使用參數元件給 ECharts 圖表傳參。

2.1 準備範本

在設計器中建立普通報表，建立兩個資料集。

ds1：SQL 查詢語句為 SELECT * FROM 銷量。獲取銷量表中全部資料。

ds2：SQL 查詢語句為SELECT * FROM 銷量 WHERE 1=1  ${if(len(area) == 0,"","and 地區 = '" + area + "'")} ，實現參數 area 為空時獲取全部資料，否則根據參數 area 獲取對應資料。

2.2 設計範本

2.2.1 設計參數面板

1）進入參數面板編輯介面，將參數 area 新增到參數面板中。如下圖所示：

2）選擇參數元件為「下拉框元件」。如下圖所示：

3）設定下拉框元件的資料字典為「資料查詢」，選擇 ds1 資料集，實際值和顯示值均為「地區」欄位。如下圖所示：

4）選中「para」參數面板，在屬性中取消勾選「點選查詢前不顯示報表內容」，這樣在預覽範本時，初始狀態下也可以展示出報表內容。

2.2.2 新增圖表

合併一片區域儲存格 ，點選工具欄中的「插入圖表」按鈕，選擇 ECharts 圖表。如下圖所示：

2.3 圖表配置

2.3.1 新增資料結構

給 ECharts 圖表新增一個二維陣列結構，綁定設定了參數的 ds2 資料集中的「銷售員」和「銷量」欄位。如下圖所示：

2.3.2 編輯程式碼

點選「程式碼編輯器」，因為 ds2 資料集中定義的參數為 $area ，所以透過 FR.remoteEvaluate("$area") 接收參數。輸入程式碼如下所示：

var titleText;
 
if (window.FR) {
  titleText = window.FR && window.FR.remoteEvaluate("$area");
}
 
var TABLE_DATA = getData('data1');
 
option = {
  title: {
    text: titleText + '地區銷量統計圖',
    left: "center"
  },
  tooltip: {},
  dataset: {
    source: TABLE_DATA,
  },
  xAxis: { type: "category" },
  yAxis: {},
  series: [{ type: "bar" }],
};
显示代码

點選「運作」，效果如下圖所示：

2.4 效果預覽

儲存報表，點選「分頁預覽」，效果如 1.2 節預期效果所示。

注：不支援行動端。

點選下載範本：參數查詢聯動ECharts圖表.cpt