5、图表5 地图
1.地图图表的使用方式
百度地图API : 使用百度地图的 api , 它能够在线联网展示地图, 百度地图需要申请 ak
矢量地图 : 可以离线展示地图, 需要开发者准备矢量地图数据
接下来的实现是通过矢量图的方式来实现的
2.矢量地图的实现步骤
步骤1 ECharts 最基本的代码结构
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div")) var option = {}
mCharts.setOption(option)
</script>
</body>
</html>
此时 option 是一个空空如也的对象
步骤2 准备中国的矢量 json 文件, 放到 json/map/ 目录之下
步骤3 使用 Ajax 获取 china.json
代码语言：javascript复制$.get('json/map/china.json', function (chinaJson) {})步骤4 在Ajax的回调函数中, 往 echarts 全局对象注册地图的 json 数据
代码语言：javascript复制echarts.registerMap('chinaMap', chinaJson) $.get('json/map/china.json', function (chinaJson) {
echarts.registerMap('chinaMap', chinaJson)
})
步骤5 获取完数据之后, 需要配置 geo 节点, 再次的 setOption
type : ‘map’
map : ‘chinaMap’
代码语言：javascript复制var mCharts = echarts.init(document.querySelector("div")) $.get('json/map/china.json', function (chinaJson) {
echarts.registerMap('chinaMap', chinaJson)
var option = {
geo: {
type: 'map', // map是一个固定的值
map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致
}
};
mCharts.setOption(option)
})
（地图不给放，大家自行尝试）
注意: 需要注意的是, 由于在代码中使用了 Ajax , 所以, 关于此文件的打开, 不能以 file 的协议打开, 应该将其置于 HTTP 的服务之下方可正常展示地图
