Echarts3地图可视化教程
概述
ECharts是百度開源的Javascript 的圖表庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 Canvas 類庫?ZRender，提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。
http://echarts.baidu.com/feature.html
本文介紹如何使用ECharts3來制作地圖可視化展示。
?
地圖+散點圖+動畫散點圖
這個示例介紹如何制作一個在地圖上標注數據點，并且能夠動態顯示Top數據點
示例是一個全國主要城市空氣質量顯示，標點出了全國主要城市的PM25值，并且針對Top5城市動畫顯示標點
http://echarts.baidu.com/demo.html#effectScatter-map
?
散點圖
ECharts 2.x 中在地圖上通過 markPoint 標記大量數據點方式在 ECharts 3 中建議通過地理坐標系上的 散點圖scatter 實現。
散點圖scatter的代碼如下：
| series : [ ?{ ?????name:?'pm2.5', ?????type:?'scatter', ?????coordinateSystem:?'geo', ?????data: convertData(data), ?????symbolSize: function (val) { ?????????return?val[2] /?10; ?????}, ?????label: { ?????????normal: { ?????????????formatter:?'{b}', ?????????????position:?'right', ?????????????show:?false ?????????}, ?????????emphasis: { ?????????????show:?true ?????????} ?????}, ?????itemStyle: { ?????????normal: { ?????????????color:?'#ddb926' ?????????} ?????} ?} ] |
- series[i]-scatter.name:?名稱。
- series[i]-scatter.type: 類型，聲明是散點圖scatter。
- series[i]-scatter.coordinateSystem：使用的坐標系，geo表示使用地理坐標系，通過?geoIndex?指定相應的地理坐標系組件。
- series[i]-scatter.data[i]：數據內容
- series[i]-scatter.symbolSize：標記的大小，這里使用回調函數，根據數據點的數據來設置圖形大小
- series[i]-scatter.label：圖形上的文本標簽
- series[i]-scatter.itemStyle?：圖形樣式
scatter屬性詳情參考：http://echarts.baidu.com/option.html#series-scatter
地圖
散點圖scatter使用geo坐標系，geo的代碼如下：
| geo: { ???????map:?'china', ???????label: { ???????????emphasis: { ???????????????show:?false ???????????} ???????}, ???????roam:?true, ???????itemStyle: { ???????????normal: { ???????????????areaColor:?'#323c48', ???????????????borderColor:?'#111' ???????????}, ???????????emphasis: { ???????????????areaColor:?'#2a333d' ???????????} ???????} ???} |
- geo.map:地圖類型,?china:中國地圖,world:世界地圖
- geo.roam:是否開啟鼠標縮放和平移漫游
geo屬性詳情參考http://echarts.baidu.com/option.html#geo
?
GeoJSON參考http://blog.csdn.net/yaoxiaochuang/article/details/53117379
動畫散點圖
動畫散點圖是利用動畫特效可以將某些想要突出的數據進行視覺突出，即帶有漣漪特效動畫的散點圖
示例中是突出顯示TOP5城市，代碼：
| series : [ ???????{ ???????????name:?'Top 5', ???????????type:?'effectScatter', ???????????coordinateSystem:?'geo', ???????????data: convertData(data.sort(function (a, b) { ???????????????return?b.value - a.value; ???????????}).slice(0,?6)), ???????????symbolSize: function (val) { ???????????????return?val[2] /?10; ???????????}, ???????????showEffectOn:?'render', ???????????rippleEffect: { ???????????????brushType:?'stroke' ???????????}, ???????????hoverAnimation:?true, ???????????label: { ???????????????normal: { ???????????????????formatter:?'{b}', ???????????????????position:?'right', ???????????????????show:?true ???????????????} ???????????}, ???????????itemStyle: { ???????????????normal: { ???????????????????color:?'#f4e925', ???????????????????shadowBlur:?10, ???????????????????shadowColor:?'#333' ???????????????} ???????????}, ???????????zlevel:?1 ???????} ???] |
- series[i]-effectScatter.showEffectOn:何時顯示特效,'render'?繪制完成后顯示特效。
- series[i]-effectScatter.rippleEffect:漣漪特效相關配置
effectScatter屬性詳情參考http://echarts.baidu.com/option.html#series-effectScatter
?
百度地圖
Echarts和百度地圖原生集成，示例http://echarts.baidu.com/demo.html#map-polygon
?
百度地圖bmap代碼：
| bmap: { ???????center: [104.114129,?37.550339], ???????zoom:?5, ???????roam:?true, ???????mapStyle: { ???????????styleJson: [ ???????????????????{ ???????????????????????"featureType":?"water", ???????????????????????"elementType":?"all", ???????????????????????"stylers": { ???????????????????????????"color":?"#044161" ???????????????????????} ???????????????????}, ???????????????????{ ???????????????????????"featureType":?"land", ???????????????????????"elementType":?"all", ???????????????????????"stylers": { ???????????????????????????"color":?"#004981" ???????????????????????} ???????????????????}, ???????????????????{ ???????????????????????"featureType":?"boundary", ???????????????????????"elementType":?"geometry", ???????????????????????"stylers": { ???????????????????????????"color":?"#064f85" ???????????????????????} ???????????????????}, ???????????????????{ ???????????????????????"featureType":?"railway", ???????????????????????"elementType":?"all", ???????????????????????"stylers": { ???????????????????????????"visibility":?"off" ???????????????????????} ???????????????????}, ???????????????????{ ???????????????????????"featureType":?"highway", ???????????????????????"elementType":?"geometry", ???????????????????????"stylers": { ???????????????????????????"color":?"#004981" ???????????????????????} ???????????????????}, ???????????????????{ ???????????????????????"featureType":?"highway", ???????????????????????"elementType":?"geometry.fill", ???????????????????????"stylers": { ???????????????????????????"color":?"#005b96", ???????????????????????????"lightness":?1 ???????????????????????} ???????????????????}, ???????????????????{ ???????????????????????"featureType":?"highway", ???????????????????????"elementType":?"labels", ???????????????????????"stylers": { ???????????????????????????"visibility":?"off" ???????????????????????} ???????????????????}, ???????????????????{ ???????????????????????"featureType":?"arterial", ???????????????????????"elementType":?"geometry", ???????????????????????"stylers": { ???????????????????????????"color":?"#004981" ???????????????????????} ???????????????????}, ???????????????????{ ???????????????????????"featureType":?"arterial", ???????????????????????"elementType":?"geometry.fill", ???????????????????????"stylers": { ???????????????????????????"color":?"#00508b" ???????????????????????} ???????????????????}, ???????????????????{ ???????????????????????"featureType":?"poi", ???????????????????????"elementType":?"all", ???????????????????????"stylers": { ???????????????????????????"visibility":?"off" ???????????????????????} ???????????????????}, ???????????????????{ ???????????????????????"featureType":?"green", ???????????????????????"elementType":?"all", ???????????????????????"stylers": { ???????????????????????????"color":?"#056197", ???????????????????????????"visibility":?"off" ???????????????????????} ???????????????????}, ???????????????????{ ???????????????????????"featureType":?"subway", ???????????????????????"elementType":?"all", ???????????????????????"stylers": { ???????????????????????????"visibility":?"off" ???????????????????????} ???????????????????}, ???????????????????{ ???????????????????????"featureType":?"manmade", ???????????????????????"elementType":?"all", ???????????????????????"stylers": { ???????????????????????????"visibility":?"off" ???????????????????????} ???????????????????}, ???????????????????{ ???????????????????????"featureType":?"local", ???????????????????????"elementType":?"all", ???????????????????????"stylers": { ???????????????????????????"visibility":?"off" ???????????????????????} ???????????????????}, ???????????????????{ ???????????????????????"featureType":?"arterial", ???????????????????????"elementType":?"labels", ???????????????????????"stylers": { ???????????????????????????"visibility":?"off" ???????????????????????} ???????????????????}, ???????????????????{ ???????????????????????"featureType":?"boundary", ???????????????????????"elementType":?"geometry.fill", ???????????????????????"stylers": { ???????????????????????????"color":?"#029fd4" ???????????????????????} ???????????????????}, ???????????????????{ ???????????????????????"featureType":?"building", ???????????????????????"elementType":?"all", ???????????????????????"stylers": { ???????????????????????????"color":?"#1a5787" ???????????????????????} ???????????????????}, ???????????????????{ ???????????????????????"featureType":?"label", ???????????????????????"elementType":?"all", ???????????????????????"stylers": { ???????????????????????????"visibility":?"off" ???????????????????????} ???????????????????} ???????????] ???????} ???} |
- bmap.center:當前視角的中心點
- bmap.zoom:當前視角的縮放比例
- bmap.mapStyle: 百度地圖樣式，styleJson?與百度地圖內置的樣式配置一致，具體參考百度地圖API開發指南中?定制個性地圖章節的介紹。
百度地圖設置都可以通過?百度地圖提供的API?實現
獲取百度地圖實例的方法如下：
| var bmap = bmapCharts.getModel().getComponent('bmap').getBMap(); // 百度地圖實例 |
例如，我們可以為地圖添加一個縮放控件和一個比例尺：
| bmap.addControl(new BMap.NavigationControl()); // 縮放控件 bmap.addControl(new BMap.ScaleControl()); // 比例尺 |
參考http://efe.baidu.com/blog/echarts-map-tutorial-2/
去除百度地圖logo的方法，加上如下css：
?.anchorBL?{??
????display:?none;??
?} ?
總結
以上是生活随笔為你收集整理的Echarts3地图可视化教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： sqlyog注册码激活
- 下一篇： 混合模式程序集是针对“v2.0.5072