ECharts圖表聯動其他組件

1

版本。

2

預期效果。

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

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

3

實現思路。

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

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

3. gotopage API：可實現傳參給決策報表中的報表塊。

注：上述兩種傳參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. 首先將 body 的佈局方式改為【絕對佈局】。如下圖1所示；

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

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

3

設定圖表。

1. 報表塊：

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

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

4. 設定完成後，點選左下角【表單】傳回 body 介面。

1. 柱形圖：

2. 雙擊組件進入編輯狀態：

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

4. 設定柱形圖的【樣式】→【標題】，勾選【標題可見】，輸入公式 【=$area】。

5. 如下圖所示。

1. ECharts圖表：

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

3. 新增完資料結構後，再點選【代碼編輯器】，輸入如下代碼。如下圖所示。

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,
      },
    }
  ]
};
//傳參給報表塊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 換成圖表所在儲存格即可。

4

效果預覽。

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

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