ECharts圖表引用範本資料集

1

版本。

2

應用場景。

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

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

3

安裝插件。

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

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

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

1

準備資料。

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

2

報表設計。

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

2. 新增資料結構：選中圖表，點選右側【儲存格元素】→【設定】，新增一個【二維陣列結構】。

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

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

5. 編輯代碼：點選【代碼編輯器】，初次進入時，預設有一個二維陣列結構的範例，並附有基礎參數的說明。本例中需要將資料更換成用 getData() 引用的 data1 的資料，代碼如下。

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

6. 輸入代碼後，點選【执行】按鈕，若代碼正確，右側則會出現對應的圖表，點選【確定】儲存代碼後跳出。如下圖4所示。

3

效果預覽。

1. 儲存報表，點選【分頁預覽】，其效果和代碼編輯器中預覽的效果一緻。如下圖所示。

注：不支援行動端。

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