決策報儲存格件聯動ECharts圖表

1.1 版本

1.2 問題描述

在決策報表的 body 中，直接使用元件綁定參數是可以實現 自動查詢 的。但是，對 ECharts 圖表來說，並不支援直接使用 body 中的元件實現聯動。那麼要實現 body 中的元件聯動 ECharts 圖表應該怎麼做呢？

1.3 解決思路

給 body 中的元件新增「編輯後」事件，使用 FR.Chart.WebUtils.changeParameter() 給圖表參數指派，ECharts 圖表利用 FR.remoteEvaluate() 接收參數實現 ECharts 圖表動態展示。實現效果如下圖所示：

2.1 準備範本

在設計器中建立決策報表，建立兩個資料集。

ds1：SQL 查詢語句為 SELECT * FROM 銷量。獲取銷量表中全部資料。

ds2：SQL 查詢語句為SELECT * FROM 銷量 WHERE 1=1  ${if(len(area) == 0,"","and 地區 = '" + area + "'")} ，實現參數 area 為空時獲取全部資料，否則根據參數 area 獲取對應資料。

2.2 設計範本

2.2.1 拖入組件

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

2）向 body 中拖入一個標籤元件、下拉框元件、ECharts 圖表。如下圖所示：

3）設定標籤元件的元件值為 area： 。設定下拉框元件名稱為「area」，資料字典為「資料查詢」，選擇 ds1 資料集，實際值和顯示值均為「地區」欄位。

如下圖所示：

2.2.2 新增編輯後事件

給下拉框元件新增一個編輯後事件，輸入 JavaScript 程式碼如下：

FR.Chart.WebUtils.changeParameter({
	chartID:'chart0',
	para:{ 
		area:this.getValue()
	      }
})

步驟如下圖所示：

2.2.3 新增圖表資料結構

雙擊 ECharts 圖表，在配置中新增一個二維陣列結構，綁定設定了參數的 ds2 資料集中的「銷售員」和「銷量」欄位。如下圖所示：

2.2.4 編輯程式碼

點選「程式碼編輯器」，因為 ds2 資料集中定義的參數為 $area ，所以透過 FR.remoteEvaluate("$area") 接收參數。輸入程式碼如下所示：

try
{var area = FR.remoteEvaluate('$area');}
catch(err){}
const TABLE_DATA = getData("data1");
option = {
      title: {subtext: area},
  legend: {},
  tooltip: {},
  dataset: {
    source: TABLE_DATA,
  },
  xAxis: { type: "category" },
  yAxis: {},
  series: [{ type: "bar" }],
};

如下圖所示：

2.3 效果預覽

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

注：不支援行動端。

點選下載範本：决策报表控件联动ECharts图表.frm