ECharts圖表如何接收參數

1

版本。

2

預期效果。

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

3

實現思路。

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

注：暫不支援在【填報報表】或【決策報表 body】中，使用參數元件對 ECharts 圖表傳參。

4

安裝插件。

1. 點選下載插件：ECharts圖表集成。

2. 伺服器安裝插件方法請參見：伺服器插件管理。

3. 設計器安裝插件方法請參見：設計器插件管理。

1

準備範本。

1. 本文範例直接使用 A10-08 圖表超連結-聯動儲存格 文檔中的範本做修改。

2. 開啟設計器內建範本：【%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\SpecialSubject\HyplinkReport\超連結到儲存格圖表.cpt】，或點選下載範本：超連結到儲存格圖表.cpt。

3. 點選設計器左上角【檔案】→【開啟】，開啟該範本。

2

更換圖表。

1. 選中圖表，點選【儲存格元素】→【型別】，將圖表更換為【ECharts圖表】。如下圖所示。

3

圖表配置。

1. 新增資料結構：

   原圖表綁定的資料是 ds2 資料集中的【銷售員】和【銷量】欄位，故 ECharts 圖表需新增一個【二維陣列結構】，選擇的【資料集】和【欄位區】均需和原來的圖表保持一緻。如下圖1所示。

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" }],
   };

3. 點選【执行】，效果如下圖2所示。

4

效果預覽。

1. 儲存報表，點選【分頁預覽】，效果如 第一章第2節預期效果所示。

注：不支援行動端。

1. 點選下載範本：ECharts圖表如何接收參數.cpt。