ECharts圖表整合插件

1

版本。

2

應用場景。

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

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

3

功能簡介。

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

2. 普通報表、複合式報表以及決策報表中任何插入圖表的元素，均支援插入【ECharts圖表】。

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

4. 支援參數查詢、參數傳遞、圖表交互等功能（暫不支援【參數元件】傳遞參數給 ECharts圖表）。

5. 不支援匯出。

6. 不支援行動端。

1

插件安裝。

1. 點選下載插件：ECharts圖表集成。

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

2

插入圖表。

1. 安裝插件後，在圖表類型中會多出一個【ECharts圖表】，插入方式和插入其他內建圖表的方式相同。
   

2. 普通報表，如下圖1所示。

3. 決策報表，如下圖2所示。

3

圖表配置。

1. ECharts圖表 的【配置】包含兩個功能：【新增資料結構】 和 【代碼編輯器】。如下圖1所示。

2. 新增資料結構：

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

   二維陣列結構支援選擇計算方式為【彙總計算】或【明細計算】。

   樹形結構按層級劃分，支援配置不同層級的資料。如下圖2所示。

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

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

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

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

4. 代碼編輯器：

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

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

   建立 ECharts 圖表時，開啟代碼編輯器預設有一個範例，如下圖5所示。

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

4

效果預覽。

1. ECharts 圖表支援除了【行動端預覽】之外的所有預覽方式，在瀏覽器端預覽的效果與代碼編輯器中預覽的效果一緻。例如預設範例圖表預覽效果如下。

5

注意事項。

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

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

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

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