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

1.1 版本

1.2 預期效果

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

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

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

1.3 實現思路

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

2.1 準備資料

點選設計器左上角「檔案>建立普通報表」，建立兩個資料庫查詢，SQL 查詢語句分別為：

ds1 ：SELECT * FROM 銷量。

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

2.2 設計報表

2.2.1 插入圖表

選中一片儲存格區域，合併儲存格後，再點選插入圖表，選擇「ECharts圖表」。如下圖所示：

2.2.2 設計表格

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

2.2.3 新增資料結構

選中圖表，點選右側「儲存格元素>配置」，新增一個「二維陣列結構」。

資料集選擇 ds1，計算方式保持「匯總計算」，字串欄位新增一個「地區」欄位，數值欄位新增一個「銷量」欄位，匯總方式為「求和」。

配置完成後點選最上方「完成」按鈕，則傳回到資料結構面板，新增的資料結構顯示在下方，名稱預設為 data1。如下圖所示：

2.2.4 儲存報表

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

2.2.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.3 效果預覽

儲存報表，點選「分頁預覽」，效果如 1.2 節預期效果所示。

注1：不支援行動端。

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

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