Echarts—地图的基本实现
首先放图
地图图表的使用方式
百度地图 API : 使用百度地图的 api , 它能够在线联网展示地图 , 百度地图需要申请 ak
矢量地图 : 可以离线展示地图 , 需要开发者准备矢量地图数据
接下来的实现是通过矢量图的方式来实现的
//1. ECharts最基本的代码结构
//2. 准备中国地图的矢量数据
//3. 使用Ajax获取矢量地图数据
//4. 在Ajax的回调函数中注册地图矢量数据 echarts.registerMap('chinaMap', 矢量地图数据)
//5. 配置geo的type为'map', map为'chinaMap'
相关配置如下，数据链接放文章最后
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图表</title><script src="lib/echarts.min.js"></script><script src="lib/jquery.min.js"></script>
</head><body><div style="width:600px;height:400px;border:1px solid red;"></div><script>//1. ECharts最基本的代码结构//2. 准备中国地图的矢量数据//3. 使用Ajax获取矢量地图数据//4. 在Ajax的回调函数中注册地图矢量数据 echarts.registerMap('chinaMap', 矢量地图数据)//5. 配置geo的type为'map', map为'chinaMap' var MyCharts = echarts.init(document.querySelector("div"))$.get('json/map/china.json', function (ret) {// $.get('json/map/province/neimenggu.json', function (ret) {console.log(ret);echarts.registerMap('chinaMap', ret)// echarts.registerMap('neimenggu', ret)var options = {geo: {type: 'map',map: 'chinaMap',//chinaMap要与registerMap第一个属性一致roam:true,//允许缩放和拖动效果label:{//省份名称一直显示show:true},zoom:5,//设置初始化的缩放比例，原始为1center:[116,39],//设置地图中心点坐标，经纬度}}MyCharts.setOption(options)})</script>
</body></html> 注意 : 需要注意的是 , 由于在代码中使用了 Ajax , 所以 , 关于此文件的打开 , 不能以 file 的协议打开 , 应该将其置于 HTTP 的服务之下方可正常展示地图
初学者总结，不喜轻喷
数据网盘链接：
链接：https://pan.baidu.com/s/1y1hu8wxjBYcIr887Rhp3XA?pwd=1111
提取码：1111