Echarts 实现全国地图展示

Echarts 介绍:
ECharts 是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari 等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表
官方地址
:https://echarts.apache.org/zh/index.html
全国地图展示实现:
准备步骤:
1.准备好 echarts.js 文件
2.阿里云地理下载全国省市区地图的 js 文件
china.js 全国地图文件

全省地图文件

全市地图文件

1.准备一个具备大小的 DOM 容器,生成的地图会放入这个容器内
复制代码
2.初始化 echarts 实例对象
复制代码
3.指定配置项和数据(option),根据具体需求修改配置选项
配置 title 标题组件,text:title 内容,left:距离左边大小,textStyle:字体样式
复制代码
配置 tooltip 自定义提示框组件,formatter:自定义,trigger 鼠标悬浮交互时的信息提示,item 只显示该点的信息,axis 显示该列坐标轴对应的数据
复制代码
配置 visualMap 视觉映射组件,根据传入的 data 显示不同的颜色
复制代码
配置 series 系列列表,用于配置数据,type 设置为 map 地图类型,mapType 为对应的 js 文件名称,开始默认为全国地图,roam 开启缩放
复制代码
4.实现地图展示及下钻
准备好省地图列表,点击地图根据 id 跳转到对应省级地图

初始化配置
复制代码
创建获取省市 ID 的函数
复制代码
初始化全国地图
复制代码
点击地图下钻到对应省市区地图
复制代码
最后设置右键单击事件返回上一级地图
复制代码
最终实现效果

版权声明: 本文为 InfoQ 作者【格斗家不爱在外太空沉思】的原创文章。
原文链接:【http://xie.infoq.cn/article/3dc31304c640a6b077f4c95e3】。文章转载请联系作者。
评论