此前我一贯用的是highcharts,怎奈highcharts不支持舆图报表,于是转而利用百度的Echarts,Echarts本身的功能没的说,很赞,API也很详细,但是网上貌似玩的人不多,于是自己动手参照官方demo耍耍。
先展示下终极实现效果,如果诸位看官觉得效果还不错,欢迎连续向下看,如果觉得效果很逊
大略的描述下:上述舆图中,左侧是展示全国舆图(默认选择的是全国 ),右侧是展示的重庆各地市的用户数量,点击左侧的不同省份,右侧舆图会随之变革,从而显示不同省市的用户数量。
下面说下详细的实现:
Echarts 官网:http://echarts.baidu.com/
先说下思路:Echarts的样式是很随意马虎在前台jsp定制的,最主要的数据源(如图中的各区域的用户数量)是须要在geojson拼装,然后解析显示的。
难点:
该舆图也便是须要用户群区域,也便是4级或5级舆图,比如全国是一级,重庆市是二级,重庆市下面的沙坪坝是三级,沙坪坝上的用户群是4级
舆图采纳的geojson,全国三级舆图可在Echatrs官方读取,http://ecomfe.github.io/echarts-map-tool/,剩下的数据可在http://geojson.io/自定义抓取
代码部分,下载Echatrs
定义地区编码,配对
然后配对geojson 数据
这个demo是去世数据,后续将更改动态数据
我一贯认为写文章是最好的思考办法,不只在分享,也在沉淀自己。张德Talk上的文章紧张是分享技能、产品、创业和生活的干系有趣故事和经历。
欢迎关注我的微信"大众年夜众号[zhangdeTalk],我最近在开一个学习小程序的班,加入我们,我们一起转玩微信小程序~。