ECharts圖表引用範本資料集

1.1 版本

1.2 應用場景

在 FineReport 中使用 ECharts 圖表引用範本中的資料集時，需要先新增資料結構，再在程式碼編輯器中透過 getData('name') 實現資料呼叫，name 指的是資料結構的名稱。

本文將用一個簡單的範例作下示範：將 FRDemo 中「銷量」表的產品欄位和銷量欄位取出，並轉換為一個二維陣列，再呼叫生成圖表。預期效果如下圖所示：

2.1 準備資料

點選設計器左上角「檔案>建立普通報表」，建立一個資料庫查詢，SQL 語句為：SELECT * FROM 銷量。

2.2 報表設計

2.2.1 插入圖表

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

2.2.2 新增資料結構

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

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

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

2.2.3 編輯程式碼

點選「程式碼編輯器」，初次進入時，預設有一個二維陣列結構的範例，並附有基礎參數的說明。

本例中需要將資料更換成用 getData() 引用的 data1 的資料，程式碼如下：

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

輸入程式碼後，點選「運作」按鈕，若程式碼正確，右側則會出現對應的圖表，點選「確定」儲存程式碼後跳出。如下圖所示：

2.3 效果預覽

儲存報表，點選「分頁預覽」，其效果和程式碼編輯器中預覽的效果一致。如下圖所示：

注：不支援行動端。

點選下載範本：ECharts圖表引用範本資料集.cpt