1. 概述
1.1 版本
| 報表伺服器版本 | 插件版本 | 功能變動 |
|---|---|---|
| 11.0 | V1.0.0 | - |
| 11.0 | V1.0.2 | 程式碼編輯器彈窗交互優化：支援拖曳調整大小。詳情請參見 2.3.2 節 |
| 11.0.18 | V1.0.6 | 自該版本起，11.0與10.0版本插件拆分，升級需要重新下載安裝 |
1.2 應用場景
ECharts 是一個基於 JavaScript 的開源視覺化圖表庫。在使用 FineReport 時，當基礎圖表的通用配置不足以滿足使用者需求時，使用者可安裝「echarts圖表插件」透程式式碼自訂個性化圖表。
且 FineReport 在支援使用者使用 ECharts 開源API的同時，也支援引用範本中的資料集，實現參數傳遞、與其他組件交互等功能，幫助使用者在 FineReport 中更好的運用視覺化圖表。
1.3 功能簡介
使用該插件需對 ECharts 的使用方法有一定了解，且有一定的 JS 基礎
普通報表、複合式報表以及決策報表中任何插入圖表的元素，均支援插入「ECharts圖表」
支援將範本資料集轉化為可直接在 ECharts 中使用的 JSON 資料，再透過 getData() 引用
支援參數查詢、參數傳遞、圖表交互等功能
「參數元件」傳參僅支援透過參數面板使用，不支援直接在儲存格中或決策報表 body 中使用。
不支援匯出
不支援行動端
不支援 FVS 視覺化看板直接使用，可以在表格組件中使用
2. 插件介紹
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 圖表，可能會出現錯誤提示如下圖所示：
這可能是因為設計器開啟時，插件商城市場還未載入成功但範本已載入，為了保護範本不被損壞，所以會出現該錯誤提示。點選「確定」之後，等幾秒鐘點選「重試」，若沒有其他問題，範本則恢復正常。
3. 範例索引
以下是一些使用 ECharts 圖表製作範本的範例，詳情請點選文檔連結查看。
| 文檔 | 應用場景 | 預期效果 |
|---|---|---|
| ECharts圖表引用範本資料集 | ECharts 圖表如何引用範本資料集的資料展示圖表 | |
| ECharts圖表實現系列條件顯示 | ECharts 圖表引用範本資料集資料並進行資料預處理，實現系列條件顯示 | |
| ECharts圖表實現旭日圖 | Echarts 圖表引用範本資料集資料生成的樹形結構，製作一個旭日圖，並對外圈設定了條件顯示 | |
| 儲存格聯動ECharts圖表 | ECharts 圖表接收儲存格或其他組件傳來的參數，實現被聯動的效果 | |
| ECharts圖表聯動其他組件 | ECharts 圖表傳遞參數給其他組件，透過區域性重新整理實現聯動效果 | |
| ECharts圖表實現動態參數聯動效果 | ECharts 圖表透過傳遞動態參數，實現全局重新整理，可聯動範本中所有引用了該參數的組件；並且在普通報表中，可實現圖表傳參給表格資料 | |
| ECharts圖表實現定時重新整理 | ECharts 圖表引用範本資料集時，由於 getData 在瀏覽器預覽環境時不能動態獲取資料，這時可透過新增事件使其定時重新整理 | |
