ECharts圖表實現定時重新整理

1.1 版本

1.2 預期效果

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

1.3 實現思路

• 普通報表中，在「範本>範本Web屬性」中新增「載入結束事件」。
  

• 決策報表中，給 ECharts 圖表新增「初始化後事件」。

2.1 準備資料

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

2.2 報表設計

2.2.1 插入圖表

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

2.2.2 新增資料結構

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

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

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

2.2.3 編輯程式碼

點選「程式碼編輯器」，輸入程式碼：

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

2.2.4 設定載入結束事件

點選「範本>範本Web屬性>分頁預覽設定」，選擇「為該範本單獨設定」，在最下方事件設定處，點選新增下拉按鈕，選擇「載入結束」事件，在彈出的事件設定框中，輸入 JavaScript 程式碼如下：

setTimeout(function() {
    var chart = FR.Chart.WebUtils.getChart("A1"); // 獲取echarts圖表物件
    chart && chart.autoRefresh(3000); //設定 3 秒自動重新整理
}, 1000);

2.3 效果預覽

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

注：不支援行動端。

2.4 決策報表範例

決策報表中，選中 ECharts 圖表，在其屬性面板「事件」中新增一個初始化後事件，程式碼中只需更換 ECharts 圖表的 chartID 即可。如下圖所示：

點選下載範本：

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

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