ECharts圖表整合插件

1.1 版本

1.2 應用場景

ECharts 是一個基於 JavaScript 的開源視覺化圖表庫。在使用 FineReport 時，當基礎圖表的通用配置不足以滿足使用者需求時，使用者可安裝「echarts圖表插件」透程式式碼自訂個性化圖表。

且 FineReport 在支援使用者使用 ECharts 開源API的同時，也支援引用範本中的資料集，實現參數傳遞、與其他組件交互等功能，幫助使用者在 FineReport 中更好的運用視覺化圖表。

1.3 功能簡介

• 使用該插件需對 ECharts 的使用方法有一定了解，且有一定的 JS 基礎

• 普通報表、複合式報表以及決策報表中任何插入圖表的元素，均支援插入「ECharts圖表」

• 支援將範本資料集轉化為可直接在 ECharts 中使用的 JSON 資料，再透過 getData() 引用

• 支援參數查詢、參數傳遞、圖表交互等功能

• 「參數元件」傳參僅支援透過參數面板使用，不支援直接在儲存格中或決策報表 body 中使用。

• 不支援匯出

• 不支援行動端

• 不支援 FVS 視覺化看板直接使用，可以在表格組件中使用
  

2.1 插件安裝

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

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

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

注：FineReport11.0工程中，插件自V1.0.5版本升級至V1.0.6及以上版本，需要卸載老版本插件，重新下載安裝新版本插件。

2.2 插入圖表

安裝插件後，在圖表類型中會多出一個「ECharts圖表」，插入方式和插入其他內建圖表的方式相同。例如：

• 普通報表

• 決策報表

2.3 圖表配置

ECharts圖表 的「配置」包含兩個功能：新增資料結構 和 程式碼編輯器。如下圖所示：

2.3.1 新增資料結構

1）新增資料結構時可選擇新增「二維陣列結構」或「樹形結構」，根據選擇的結構自動將引用的資料集轉化為 ECharts 可直接使用的 JSON 資料，在程式碼編輯器中透過 getData() 引用。

• 二維陣列結構支援選擇計算方式為「匯總計算」或「明細計算」

• 樹形結構按層級劃分，支援配置不同層級的資料。

注：樹形結構節點的數值欄位不是必填項，可以不設定；若最後一層的數值設定了欄位，其餘層級的數值則按照最後一層的數值匯總得來。

2）支援新增多個結構，每個結構可選擇不同的資料集，新增的資料結構名稱預設為 data+數字，且不支援修改。

新增的資料結構顯示在面板中，滑鼠懸浮時，右側出現幾個按鈕，分別是：查看資料、編輯和刪除。

點選「查看資料」可查看資料集被轉化之後的 JSON 資料，例如一個二維陣列結構，查看資料如下圖所示：

2.3.2 程式碼編輯器

• 程式碼編輯器支援對資料進行預處理、呼叫 FineReport 的圖表API引用參數、對 ECharts 圖表的配置項進行編輯等，運作程式碼後可預覽圖表效果。

• 點選右上角「去ECharts官網除錯」可進入其官網範例除錯介面。

• 建立 ECharts 圖表時，開啟程式碼編輯器預設有一個範例，如下圖所示：

• V1.0.2 及之後版本的插件，程式碼編輯器彈窗支援拖曳調整大小，程式碼區域和圖表展示區域也可拖動調整佔比。如下圖所示：

2.4 效果預覽

ECharts 圖表支援除了「行動端預覽」之外的所有預覽方式，在瀏覽器端預覽的效果與程式碼編輯器中預覽的效果一致。例如預設範例圖表預覽效果如下：

2.5 注意事項

開啟設計器時，若預設開啟的範本中使用了 ECharts 圖表，可能會出現錯誤提示如下圖所示：

這可能是因為設計器開啟時，插件商城市場還未載入成功但範本已載入，為了保護範本不被損壞，所以會出現該錯誤提示。點選「確定」之後，等幾秒鐘點選「重試」，若沒有其他問題，範本則恢復正常。

以下是一些使用 ECharts 圖表製作範本的範例，詳情請點選文檔連結查看。

文檔	應用場景	預期效果
ECharts圖表引用範本資料集	ECharts 圖表如何引用範本資料集的資料展示圖表
ECharts圖表實現系列條件顯示	ECharts 圖表引用範本資料集資料並進行資料預處理，實現系列條件顯示
ECharts圖表實現旭日圖	Echarts 圖表引用範本資料集資料生成的樹形結構，製作一個旭日圖，並對外圈設定了條件顯示
儲存格聯動ECharts圖表	ECharts 圖表接收儲存格或其他組件傳來的參數，實現被聯動的效果
ECharts圖表聯動其他組件	ECharts 圖表傳遞參數給其他組件，透過區域性重新整理實現聯動效果
ECharts圖表實現動態參數聯動效果	ECharts 圖表透過傳遞動態參數，實現全局重新整理，可聯動範本中所有引用了該參數的組件；並且在普通報表中，可實現圖表傳參給表格資料
ECharts圖表實現定時重新整理	ECharts 圖表引用範本資料集時，由於 getData 在瀏覽器預覽環境時不能動態獲取資料，這時可透過新增事件使其定時重新整理