ECharts圖表聯動其他組件

1.1 版本

1.2 預期效果

在 FineReport 中，使用普通圖表時，可在圖表特效中透過 超級鏈接 進行傳參，實現組件之間的聯動效果。 那麼 ECharts 圖表該如何傳參聯動其他組件呢？

例如將餅圖的系列值「地區」作為參數傳遞給報表塊和柱形圖，讓表格和柱形圖根據參數顯示對應地區下銷售員的銷量，預期效果如下圖所示：

1.3 實現思路

利用 FineReport 的傳參API結合 ECharts 事件 實現。

1）changeParameter API：該API只對「圖表物件」有效，對報表物件無效。例如 ECharts 圖表可傳參給普通報表中的圖表、決策報表中的圖表塊，但無法傳參給決策報表中的報表塊及報表塊中的圖表。

2）gotoPage API：可實現傳參給決策報表中的報表塊。

注：上述兩種傳參API屬於區域性重新整理，要實現動態參數傳參全局重新整理的效果，請參考文檔 ECharts圖表實現動態參數聯動效果。

2.1 準備資料

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

ds1 ：SELECT * FROM 銷量。

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

2.2 設計報表

1）首先將 body 的佈局方式改為「絕對佈局」。如下圖所示：

2）拖入一個 ECharts圖表、一個報表塊、一個柱形圖到 body 中，適當調整下組件的大小和位置。如下圖所示：

3）選中組件時，在右側屬性面板中可設定「組件標題」，分別設定各組件標題為：ECharts餅圖、報表塊、柱形圖，可自訂標題樣式。如下圖所示：

2.3 設定圖表

2.3.1 報表塊

雙擊報表塊進入編輯介面，設計表格樣式如下圖所示：

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

設定完成後，點選左下角「表單」傳回 body 介面。

2.3.2 柱形圖

雙擊組件進入編輯狀態：

1）給柱形圖綁定帶有參數的 ds2 資料集中的資料，展示時會根據接收到的參數進行展示，初始狀態參數為空時，則展示全部資料。

2）設定柱形圖的「樣式>標題」，勾選「標題可見」，輸入公式 =$area。

如下圖所示：

2.3.3 ECharts圖表

1）雙擊 ECharts 圖表組件進入編輯狀態，點選「配置」，新增一個「二維陣列結構」，選擇 ds1 資料集的地區和銷量欄位。

2）新增完資料結構後，再點選「程式碼編輯器」，輸入如下程式碼：

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,
      },
    }
  ]
};
//傳參給報表塊report0
myChart.on('click', function (params) {
    _g().getWidgetByName('report0').gotoPage(1, {
	"area": params.name
}, true);
});
//傳參給柱形圖chart1
myChart.on("click", function(params) {
  if(window.FR) {
    FR.Chart.WebUtils.changeParameter({
        chartID: 'chart1',
        //柱形圖的chartID為chart1
        para: {
            area: params.name
        }
    });
  }
});

注1：圖表在普通報表中，或在報表塊的儲存格中時，只支援圖表聯動圖表，不支援圖表聯動儲存格資料。

注2：在普通報表中傳參給圖表時， 將 chartID 換成圖表所在儲存格即可。

如下圖所示：

2.4 效果預覽

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

注：不支援行動端。

點選下載範本：ECharts圖表聯動其他組件.frm