報表中如何實現中國地圖鑽取到各省地圖

xiaohuihui發表於2019-12-27

需求描述:

使用 Echarts 統計圖從中國地圖,點選某一省份,在新的頁面中顯示該省份的地圖。

實現思路:

在國家地圖上新增 onclick 事件,點選國家地圖中的省份,生成省份對應的 url, 其中將對應省份的名稱以引數傳遞,在省地圖報表中增加省份的引數,過濾出對應省份的資料,以及動態載入不同省份 echarts 模板中的地圖,在 echarts 統計圖展現的頁面中接收到省份對應的引數,動態在頁面載入出不同省份對應的 JS 檔案。

具體實現:

1. 中國地圖報表製作。

在自帶例項地圖 \ 中國區域圖中的 Echarts 統計圖中新增事件如下:

myChart.on(‘click’,function(param){

window.open(‘showReport.jsp?rpx=/ 地圖 / 省地圖.rpx&province=’+param.name);

                  });

2. 省地圖報表的製作。

(1)新建名為省地圖.rpx 的報表,在該報表中新增引數名為 province。[size=18.6667px]

(2)資料集的建立

無論使用什麼型別的資料集,需要透過上一步驟中的 province 引數過濾出對應省份的資料。

例如:province 輸入江西,得到的資料應該是下面的形式:

(3)新增 echarts 統計圖

右鍵統計圖所在單元格的區域,選擇第三方統計圖,開啟任意省份的 echartsJS 模板,然後在右側將原來 mapType 的固定值透過 mt 這個引數傳遞,mt 透過 province 給定。

在 echarts 所在目錄 \demo\raqsoft\echarts3\map\js\province 目錄下的各省份的 JS 改成中文名稱,例如 jiangxi.js 改為江西.js。

在 echarts.jsp 中加上獲取 province 引數值的語句,然後在該頁面中載入到對應省份的 echarts 的 JS 模板。

設計器下發布中國區域地圖,在頁面上展現如下:

由於目前省份的資料集資料是內建的只是有江西的資料,所以,我們點選江西的時候,可以在一個新的頁面中展現江西的資料。

QQ20180921131732jpg

點選西藏可以彈出西藏的地圖,但因省份地圖沒有對應西藏的資料所以會顯示下方的效果。

QQ20180921131748jpg

注意事項:

1. 地圖中使用的資料集裡的省,市的名稱要和 Echarts 裡的對應,例如“北京”,避免寫成“北京市”。

2. 設計器下自帶的省份的 echarts 的 JS 模板都是省份的全拼,傳遞的引數預設是中文,所以就需要將自帶的模板的檔名改成中文。

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69900830/viewspace-2671007/,如需轉載,請註明出處,否則將追究法律責任。

相關文章