報表中如何實現中國地圖鑽取到各省地圖
需求描述:
使用 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 模板。
設計器下發布中國區域地圖,在頁面上展現如下:
由於目前省份的資料集資料是內建的只是有江西的資料,所以,我們點選江西的時候,可以在一個新的頁面中展現江西的資料。
點選西藏可以彈出西藏的地圖,但因省份地圖沒有對應西藏的資料所以會顯示下方的效果。
注意事項:
1. 地圖中使用的資料集裡的省,市的名稱要和 Echarts 裡的對應,例如“北京”,避免寫成“北京市”。
2. 設計器下自帶的省份的 echarts 的 JS 模板都是省份的全拼,傳遞的引數預設是中文,所以就需要將自帶的模板的檔名改成中文。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69900830/viewspace-2671007/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- React,Echarts實現2D地圖並且支援地圖下鑽ReactEcharts地圖
- three.js+vue3三維地圖下鑽地圖,實現下鑽全國-》省份-》城市-》區縣JSVue地圖
- 大屏報表中如何實現多圖表間的聯動?
- vue+echarts+datav大屏資料展示及實現中國地圖省市縣下鑽VueEcharts地圖
- web 報表專案中想嵌入地圖?用什麼工具實現?怎樣實現?Web地圖
- 騰訊地圖實現地圖找房功能地圖
- ECharts系列 (01):地圖三級下鑽Echarts地圖
- HTML地圖,圖表HTML地圖
- layui 中echarts實現圖表UIEcharts
- echart 各種圖實現
- 怎麼自己製作地圖?如何快速實現簡單地圖繪製?地圖
- 超連結鑽取之圖表鑽取、單元格資料鑽取
- ECharts 實現地圖散點圖(上)Echarts地圖
- 高德地圖定位實現地圖
- 如何實現OSM地圖本地釋出並自定義配圖地圖
- TaroEcharts-各種圖表在Taro中的實踐Echarts
- 如何製作省市級別上鑽下取的線上疫情地圖地圖
- web 報表中電子圖章 / 水印的輕鬆實現Web
- 【高德地圖SDK】如何實現軌跡平滑移動?地圖
- Echarts 中國地圖各個省市自治區自定義顏色Echarts地圖
- Openlayers初步實現地圖功能地圖
- 騰訊地圖Flutter業務實踐——地圖SDK Flutter外掛實現(一)地圖Flutter
- vue+echarts實現地圖及飛線圖VueEcharts地圖
- 如何實現一個地相簿封裝,可以快速切換地圖封裝地圖
- 百度地圖開發-實現離線地圖功能 05地圖
- 實現地圖實時定位,拯救“路痴”地圖
- 關於ECharts外掛實現中國地圖效果的總結Echarts地圖
- java實現各種資料統計圖(柱形圖,餅圖,折線圖)Java
- 如何製作手繪地圖?如何將圖片圖層精確地對準在地圖上?地圖
- ReactNative實現地圖導航React地圖
- 如何在 Java 中實現無向圖Java
- android ---------高德地圖實現定位和3D地圖顯示Android地圖3D
- 利用百度地圖實現支付寶 “到位” 功能(地圖模式)地圖模式
- 中國姓氏勢力地圖地圖
- 如何利用 Seaborn 實現高階統計圖表
- 產業園區智慧化導航地圖開發平臺,如何實現園區內地圖導航?產業地圖
- 騰訊地圖SDK Flutter外掛實現地圖Flutter
- 高德地圖-地理圍欄功能實現地圖