ECharts圖表實現動態參數聯動效果

1

版本。

2

預期效果。

1. 在 ECharts圖表聯動其他組件 文檔中，ECharts 圖表使用的 【changeParameter】 和 【gotopage 】API實現的是區域性重新整理聯動效果，且存在某些場景無法實現：例如決策報表中無法對組件標題傳參、普通報表中無法對儲存格資料傳參。

2. 那要如何實現這些場景呢？

3. 例如在普通報表中，表格根據點選的餅圖系列展示資料，預期效果如下圖所示。

3

實現思路。

1. 使用 【FR.doHyperlinkByGet(url,config,target,feature) 】API結合 ECharts 事件 實現動態參數全局重新整理。

4

安裝插件。

1. 點選下載插件：ECharts圖表整合

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

1

準備資料。

1. 點選設計器左上角【檔案】→【建立普通報表】，建立兩個資料庫查詢，SQL 查詢語句分別為：

   ds1 ：【SELECT * FROM 銷量】。

   ds2 ：【SELECT * FROM 銷量 WHERE 1=1  ${if(len(area) == 0,"","and 地區 = '" + area + "'")} 】，該語句可實現參數為空時選擇全部資料。

2

設計報表。

1. 插入圖表：選中一片儲存格區域，合併儲存格後，再點選插入圖表，選擇【ECharts圖表】。如下圖1所示；

2. 設計表格：在圖表下方設計表格，其資料來源是含有參數的 ds2 資料集，其中 C23 儲存格的資料設定為【彙總】→【求和】。展示時會根據接收到的參數進行展示，初始狀態參數為空時，展示全部資料。如下圖2所示；

3. 新增資料結構：選中圖表，點選右側【儲存格元素】→【配置】，新增一個【二維陣列結構】。資料集選擇 ds1，計算方式保持【彙總計算】，字串欄位新增一個【地區】欄位，數值欄位新增一個【銷量】欄位，彙總方式為【求和】。配置完成後點選最上方【完成】按鈕，則傳回到資料結構面板，新增的資料結構顯示在下方，名稱預設為 data1。如下圖3所示；

4. 儲存報表：先儲存下報表，並給報表命名，在使用動態參數時需要用到範本名稱。如下圖4所示；

5. 編輯代碼：點選【代碼編輯器】，輸入代碼如下：如下圖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：決策報表中寫法一緻。

3

效果預覽。

1. 儲存報表，點選【分頁預覽】，效果如 第一章第2節預期效果所示。

注1：不支援行動端。

注2：預覽時，實現傳參之後，參數會被保留在 URL 中，重新整理瀏覽器時彈出如下圖提示，即重新整理瀏覽器無法恢複初始狀態，只能從設計器中重新預覽範本。

1. 點選下載範本：ECharts圖表實現動態參數全局重新整理.cpt。