echarts 地图及常见效果

矢量地图的实现步骤

• echarts最基本的代码结构：
  引入js文件，DOM容器，初始化对象，设置option

• 准备中国的矢量地图json文件，放到json/map/的目录下
  china.json
  json文件下载地址：DataV.GeoAtlas地理小工具系列 (aliyun.com)

• 使用Ajax获取china.json

$.get('./json/map/china.json',(chinaJson)=>{ })

• 在回调函数中往echarts全局对象注册地图的json数据

 echarts.registerMap('chinaMap',chinaJson)

• 在geo下设置

type:'map',
map:'chinaMap'

image.png

常用配置

• 缩放拖动 roam

roam:true

• 名称显示 label

label: {
  show: true
}

image.png

• 初始缩放比例 zoom

zoom: 1.2 

• 地图中心点 center

image.png

示例代码：

常见效果

• 显示某个区域：

1. 加载该区域的矢量地图数据
2. 通过registerMap注册到echarts全局对象中
3. 指明geo配置下的type和map属性
4. 通过zoom放大该区域

5. 通过center定位中心点

   
   
   image.png

• 不同城市颜色不同

1.显示基本的中国地图
2.城市的空气质量数据设置给series
3.将series下的数据和geo关联起来
4.结合visualMap配合使用

image.png

示例代码如下：

• 地图和散点图结合

1.给series下增加新的对象
2.准备好散点数据，设置给新对象的data （坐标信息）
3.配置新对象的type
type: effectScatter
4.让散点图使用地图坐标系统
coordinateSystem:'geo'
5.让涟漪的效果增加明显
rippleEffect:{
scale: 10
}

image.png

地图特点

• 地图主要可以帮助我们从宏观的角度快速看出不同地理位置上数据的差异