反饋已提交

網絡繁忙

ECharts圖表整合插件

1. 概述

1.1 版本

報表伺服器版本插件版本功能變動
11.0V1.0.0-
11.0V1.0.2程式碼編輯器彈窗交互優化:支援拖曳調整大小。詳情請參見 2.3.2 節
11.0.18V1.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 及之後版本的插件,程式碼編輯器彈窗支援拖曳調整大小,程式碼區域和圖表展示區域也可拖動調整佔比。如下圖所示:

2024-04-25_10-34-52.gif

2.4 效果預覽

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

2.5 注意事項

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

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

3. 範例索引

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

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


附件列表


主題: 圖表應用
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 圖片不清晰
  • 用語看不懂
  • 功能說明看不懂
  • 操作說明太簡單
  • 內容有錯誤
中文(繁體)

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

10s後關閉

獲取幫助
線上支援
獲取專業技術支援,快速幫助您解決問題
工作日9:00-12:00,13:30-17:30在线
頁面反饋
針對當前網頁的建議、問題反饋
售前咨詢
業務咨詢
電話:0933-790886或 0989-092892
郵箱:taiwan@fanruan.com
頁面反饋
*問題分類
不能為空
問題描述
0/1000
不能為空

反馈已提交

网络繁忙