数据可视化-echarts地图

矢量地图的实现步骤

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

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

• 使用 Ajax 获取 china.json

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

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

1. echarts.registerMap('chinaMap',chinaJson)

type:'map',
map:'chinaMap'

常用配置

roam:true

label: {show: true}

zoom: 1.2 

• 地图中心点 center

• 

示例代码：

常见效果

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

5. 通过 center 定位中心点

    

   

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

示例代码如下：

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

地图特点

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