反饋已提交
網絡繁忙
在 FineReport 中,使用普通圖表時,可在圖表特效中透過 超級連結 進行傳參,實現組件之間的聯動效果。 那麼 ECharts 圖表該如何傳參聯動其他組件呢?
例如將餅圖的系列值【地區】作為參數傳遞給報表塊和柱形圖,讓表格和柱形圖根據參數顯示對應地區下銷售員的銷量,預期效果如下圖所示。
利用 FineReport 的傳參API結合 ECharts 事件 實現。
changeParameter API:該API只對【圖表物件】有效,對報表物件無效。例如 ECharts 圖表可傳參給普通報表中的圖表、決策報表中的圖表塊,但無法傳參給決策報表中的報表塊及報表塊中的圖表。
gotopage API:可實現傳參給決策報表中的報表塊。
注:上述兩種傳參API屬於區域性重新整理,要實現動態參數傳參全局重新整理的效果,請參考文檔 ECharts圖表實現動態參數聯動效果。
點選下載插件:ECharts圖表整合
伺服器安裝插件方法請參見:A11-18 伺服器-插件管理
點選設計器左上角【檔案】→【建立決策報表】,建立兩個資料庫查詢,SQL 查詢語句分別為:
ds1 :【SELECT * FROM 銷量】。
ds2 :【SELECT * FROM 銷量 WHERE 1=1 ${if(len(area) == 0,"","and 地區 = '" + area + "'")} 】,該語句可實現參數為空時選擇全部資料。
首先將 body 的佈局方式改為【絕對佈局】。如下圖1所示;
拖入一個 ECharts圖表、一個報表塊、一個柱形圖到 body 中,適當調整下組件的大小和位置。如下圖2所示;
選中組件時,在右側屬性面板中可設定【組件標題】,分別設定各組件標題為:ECharts餅圖、報表塊、柱形圖,可自訂標題樣式。如下圖3所示。
報表塊:
雙擊報表塊進入編輯介面,設計表格樣式如下圖1所示;
其資料是來源於有參數的 ds2 資料集,其中 C2 儲存格的資料設定為【彙總】→【求和】。展示時會根據接收到的參數進行展示,初始狀態參數為空時,則展示全部資料。如下圖2所示;
設定完成後,點選左下角【表單】傳回 body 介面。
柱形圖:
雙擊組件進入編輯狀態:
給柱形圖綁定帶有參數的 ds2 資料集中的資料,展示時會根據接收到的參數進行展示,初始狀態參數為空時,則展示全部資料。
設定柱形圖的【樣式】→【標題】,勾選【標題可見】,輸入公式 【=$area】。
如下圖所示。
ECharts圖表:
雙擊 ECharts 圖表組件進入編輯狀態,點選【配置】,新增一個【二維陣列結構】,選擇 ds1 資料集的地區和銷量欄位。
新增完資料結構後,再點選【代碼編輯器】,輸入如下代碼。如下圖所示。
var TABLE_DATA=getData('data2')option = { title: { text: '各地區銷量', left: 'center' }, tooltip: { trigger: 'item' }, legend: { top: '50%', left: '85%' }, dataset: { source: TABLE_DATA, }, series: [ { type: 'pie', radius: '50%', label: { show: false, }, } ]};//傳參給報表塊report0myChart.on('click', function (params) { _g().getWidgetByName('report0').gotoPage(1, {"area": params.name}, true);});//傳參給柱形圖chart1myChart.on("click", function(params) { if(window.FR) { FR.Chart.WebUtils.changeParameter({ chartID: 'chart1', //柱形圖的chartID爲chart1 para: { area: params.name } }); }});
注1:圖表在普通報表中,或在報表塊的儲存格中時,只支援圖表聯動圖表,不支援圖表聯動儲存格資料。
注2:在普通報表中傳參給圖表時, 將 chartID 換成圖表所在儲存格即可。
儲存報表,點選【PC端預覽】,效果如第一章第2節預期效果所示。
點選下載範本:ECharts圖表聯動其他組件.frm。
文 檔回 饋
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉