儲存格聯動ECharts圖表

1.1 版本

1.2 預期效果

當使用 ECharts 圖表引用範本資料集 時，若該資料集中設定了參數，那麼 ECharts 圖表也是可以根據參數動態顯示的，但如果想將參數傳遞給 ECharts 圖表，例如 圖表超連結-聯動儲存格 文檔中，將儲存格中的地區欄位作為參數傳遞給柱形圖的標題，該如何做呢？預期效果如下圖所示： 

1.3 實現思路

其他組件或儲存格正常設定參數，ECharts 圖表利用 FR.remoteEvaluate() 接收傳來的參數並使用。

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 新增表格

A1~C2 儲存格設計為表格，將資料集 ds1 中的欄位拖到對應儲存格中。其中「銷量」欄位的資料設定需修改為「匯總>求和」。

如下圖所示：

2.2.2 新增圖表

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

2.2.3 設定儲存格超連結

選中地區欄位所在的 A2 儲存格，新增一個聯動儲存格圖表的超連結，設定聯動儲存格為圖表所在儲存格 A5 ，並新增參數 area，其值為公式 =$$$（表示當前值）。

這樣做可實現將點選的「地區」指派給參數 area，再將參數傳遞給 A5 儲存格的圖表。

如下圖所示：

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