反饋已提交
網絡繁忙
在 ECharts圖表聯動其他組件 文檔中,ECharts 圖表使用的 【changeParameter】 和 【gotopage 】API實現的是區域性重新整理聯動效果,且存在某些場景無法實現:例如決策報表中無法對組件標題傳參、普通報表中無法對儲存格資料傳參。
那要如何實現這些場景呢?
例如在普通報表中,表格根據點選的餅圖系列展示資料,預期效果如下圖所示。
使用 【FR.doHyperlinkByGet(url,config,target,feature) 】API結合 ECharts 事件 實現動態參數全局重新整理。
點選下載插件:ECharts圖表整合
伺服器安裝插件方法請參見:A11-18 伺服器-插件管理
點選設計器左上角【檔案】→【建立普通報表】,建立兩個資料庫查詢,SQL 查詢語句分別為:
ds1 :【SELECT * FROM 銷量】。
ds2 :【SELECT * FROM 銷量 WHERE 1=1 ${if(len(area) == 0,"","and 地區 = '" + area + "'")} 】,該語句可實現參數為空時選擇全部資料。
插入圖表:選中一片儲存格區域,合併儲存格後,再點選插入圖表,選擇【ECharts圖表】。如下圖1所示;
設計表格:在圖表下方設計表格,其資料來源是含有參數的 ds2 資料集,其中 C23 儲存格的資料設定為【彙總】→【求和】。展示時會根據接收到的參數進行展示,初始狀態參數為空時,展示全部資料。如下圖2所示;
新增資料結構:選中圖表,點選右側【儲存格元素】→【配置】,新增一個【二維陣列結構】。資料集選擇 ds1,計算方式保持【彙總計算】,字串欄位新增一個【地區】欄位,數值欄位新增一個【銷量】欄位,彙總方式為【求和】。配置完成後點選最上方【完成】按鈕,則傳回到資料結構面板,新增的資料結構顯示在下方,名稱預設為 data1。如下圖3所示;
儲存報表:先儲存下報表,並給報表命名,在使用動態參數時需要用到範本名稱。如下圖4所示;
編輯代碼:點選【代碼編輯器】,輸入代碼如下:如下圖5所示。
var TABLE_DATA=getData('data1')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, }, } ]};//動態參數全局重新整理myChart.on("click", function(params) { var url = FR.servletURL + "?viewlet=ECharts圖表實現動態參數全局重新整理.cpt"; // 獲取servletURL 後連接成當前範本的 url FR.doHyperlinkByPost({url: url, para:{ area: params.name }, target: "_self"});});
注1:範本修改名稱後,代碼 "?viewlet=ECharts圖表實現動態參數全局重新整理.cpt" 中的範本名稱也需要更換,否則會報錯找不到範本檔案。
注2:決策報表中寫法一緻。
儲存報表,點選【分頁預覽】,效果如 第一章第2節預期效果所示。
注1:不支援行動端。
注2:預覽時,實現傳參之後,參數會被保留在 URL 中,重新整理瀏覽器時彈出如下圖提示,即重新整理瀏覽器無法恢複初始狀態,只能從設計器中重新預覽範本。
點選下載範本:ECharts圖表實現動態參數全局重新整理.cpt。
文 檔回 饋
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉