報表中如何實現中國地圖鑽取到各省地圖
需求描述:
使用 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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- three.js+vue3三維地圖下鑽地圖,實現下鑽全國-》省份-》城市-》區縣JSVue地圖
- React,Echarts實現2D地圖並且支援地圖下鑽ReactEcharts地圖
- vue+echarts+datav大屏資料展示及實現中國地圖省市縣下鑽VueEcharts地圖
- 大屏報表中如何實現多圖表間的聯動?
- web 報表專案中想嵌入地圖?用什麼工具實現?怎樣實現?Web地圖
- layui 中echarts實現圖表UIEcharts
- Echarts 中國地圖各個省市自治區自定義顏色Echarts地圖
- TaroEcharts-各種圖表在Taro中的實踐Echarts
- 在報表中可以如何使用 ECharts 做圖形展現?Echarts
- web 報表中電子圖章 / 水印的輕鬆實現Web
- 如何在 Java 中實現無向圖Java
- HTML地圖,圖表HTML地圖
- echart 各種圖實現
- ECharts系列 (01):地圖三級下鑽Echarts地圖
- 中國地圖繪製-點選事件地圖事件
- M01 中國地圖空白版地圖
- 怎麼自己製作地圖?如何快速實現簡單地圖繪製?地圖
- 2019中國實體書店圖書報告
- 如何實現OSM地圖本地釋出並自定義配圖地圖
- 美國地圖中的四色定理地圖
- 超連結鑽取之圖表鑽取、單元格資料鑽取
- 中國2050:一個全面實現現代化國家的零碳圖景報告
- 請問 appium 中如何實現滾動截圖APP
- 資料庫中的圖片欄位怎麼在報表中呈現資料庫
- ReactNative實現地圖導航React地圖
- Openlayers初步實現地圖功能地圖
- vue-2 引入echarts畫中國地圖底部地圖填充不顯示, 只出現了南海諸島部分VueEcharts地圖
- vue+echarts實現地圖及飛線圖VueEcharts地圖
- 如何在移動應用中實現AI畫圖?AI
- 如何製作省市級別上鑽下取的線上疫情地圖地圖
- 如何實現一個地相簿封裝,可以快速切換地圖封裝地圖
- 百度地圖開發-實現離線地圖功能 05地圖
- 實現地圖實時定位,拯救“路痴”地圖
- CSS3 - vue中純css實現柱狀圖表效果CSSS3Vue
- 百度地圖:2020年Q2中國城市活力研究報告地圖
- 在cesium中實現熱力圖
- 淘寶:2018年中國民間美食地圖地圖
- 定義新下沉 · 中國城市媒介消費地圖地圖