地图图表的使用方式

百度地图API

需要申请百度地图ak

矢量地图

需要准备矢量地图数据
image.png
代码过程
image.png
image.png
image.png

矢量地图的常用配置

缩放拖动

设置允许缩放以及拖动的效果
roam写在geo里面
image.png

名称显示

让省份的名称默认展示
label标签
image.png

地图常用的配置

image.png

地图常见的效果

显示某个区域

想看某一个省的全部信息

1.加载该区域的矢量地图数据

加载想查看省份的矢量数据（黑龙江省）

2.将查看省份的数据通过registerMap的方式注册到echarts全局对象中

3.配置geo下面的type和map属性

4.通过zoom放大该区域

5.通过center定位中心点

  1.   <script>
  2.         var mCharts = echarts.init(document.querySelector("div"))
  3.         //使用ajax获取黑龙江省数据
  4.         $.get('json/heilongjiang.json',function(ret){
  5.             console.log(ret);
  6.             // 注册数据
  7.             echarts.registerMap('heilongjiang',ret)
  8.             var option = {
  9.                 geo:{
  10.                     type:'map',
  11.                     map:'heilongjiang',
  12.                     // 设置初始化比例，没有设置默认为1
  13.                     zoom:1.2,
  14.                     // 展示黑龙江的每一个市
  15.                     label:{
  16.                         show:true
  17.                     },
  18.                     // 拖动和缩放
  19.                     roam:true,
  20.                     // 确认哈尔滨为整个图表中央
  21.                     center:[126.642464, 45.756967]
  22.                 }
  23.             }
  24.             mCharts.setOption(option)
  25.         })
  27.     </script>

不同城市颜色不同

1.首先显示中国地图

2.城市的空气质量数据设置给series

image.png
3.将series下的数据与geo关联起来
image.png
4.结合visualMap配合使用
image.png
要指明最大值（max），最小值（min），以及颜色的范围（inRange），它是和series平级的，calculable会出现小三角用来筛选数据

image.png

地图和散点图结合

1.给series下增加一个新的对象

image.png
image.png
因为新增加了一个新的图表———散点图

2.准备好散点数据，设置给新对象的data

image.png

3.配置新对象的type

type：effectScatter
image.png

4.让散点图使用地图坐标系统

地图坐标的精度维度就是散点图的数据
配置项：coordinateSystem:’geo’,
image.png

5.让涟漪的效果明显

rippleEffect:{
scale:10
}
image.png

总结

image.png