ECharts圖表實現定時重新整理

1

版本。

2

預期效果。

1. 使用 ECharts 圖表引用範本資料集時，由於 getData 在瀏覽器預覽環境時不能動態獲取資料，不能像普通圖表一樣實現 監視重新整理 ，但是可以透過給 ECharts 圖表新增事件，利用【autoRefresh(time)】 API實現定時重新整理。預期效果如下圖所示。

3

實現思路。

1. 普通報表中，在【範本】→【範本Web屬性】中新增【載入結束事件】。

2. 決策報表中，給 ECharts 圖表新增【初始化後事件】。

4

安裝插件。

1. 點選下載插件：ECharts圖表整合。

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

1

準備資料。

1. 點選設計器左上角【檔案】→【建立普通報表】，建立一個資料庫查詢，SQL 語句為：【SELECT * FROM 銷量 limit ${int(rand()*8)} 】，即隨機取出銷量表中的前幾筆資料。

2

報表設計。

1. 插入圖表：選中一片儲存格區域，合併儲存格後，再點選插入圖表，選擇【ECharts圖表】。如下圖1所示。

2. 新增資料結構：

      選中圖表，點選右側【儲存格元素】→【配置】，新增一個【二維陣列結構】。

      資料集選擇 ds1，計算方式保持【彙總計算】，字串欄位新增一個【銷售員】欄位，數值欄位新增一個【銷量】欄位，彙總方式為【求和】。

      配置完成後點選最上方【完成】按鈕，則傳回到資料結構面板，新增的資料結構顯示在下方，名稱預設為 data1。如下圖2所示。

3. 編輯代碼：點選【代碼編輯器】，輸入代碼；輸入代碼後，點選【運作】按鈕，每次預覽效果均不同，因為資料集是隨機取數。如下圖3所示。

   var TABLE_DATA = getData('data1');
option = {
  legend: {},
  tooltip: {},
  dataset: {
    source: TABLE_DATA,
  },
  xAxis: { type: "category" },
  yAxis: {},
  series: [{ type: "bar" }],
};
   

4. 設定載入結束事件：點選【範本】→【範本Web屬性】→【分頁預覽設定】，選擇【為該範本單獨設定】，在最下方事件設定處，點選新增下拉按鈕，選擇【載入結束】事件，在彈出的事件設定框中，輸入 JavaScript 代碼如下；步驟如下圖4所示。

   setTimeout(function() {
       var chart = FR.Chart.WebUtils.getChart("A1"); // 獲取echarts圖表物件
       chart && chart.autoRefresh(3000);
   }, 1000);
   

3

效果預覽。

1. 儲存報表，點選【分頁預覽】，效果如第一章第2節預期效果所示。注：不支援行動端。

注：不支持移動端。

4

決策報表範例。

1. 決策報表中，選中 ECharts 圖表，在其屬性面板【事件】中新增一個初始化後事件，代碼中只需更換 ECharts 圖表的 chartID 即可。如下圖所示。

1. 點選下載範本：

   ECharts圖表定時重新整理.cpt；

   ECharts圖表定時重新整理.frm。