JavaScript数据可视化:ECharts制作地图 JavaScript数据可视化:ECharts制作

概述
注意事项

一. 使用方式
二. 实现步骤

初步实现代码

效果：

geo常见配置

添加上面配置之后的效果图：

显示某一个省份（河南省）

效果

不同区域显示不同颜色

地图和散点图的结合

总结

概述地图在我们日常的数据可视化分析中是很常见的一种展示手段，不仅美观而且很大气。尤其是在大屏展示中更是扮演着必不可缺的角色

注意事项 【JavaScript数据可视化:ECharts制作地图】
一. 使用方式
1.百度地图API（高德地图API）

需要申请百度API

2.矢量地图

需要准备矢量地图数据

二. 实现步骤
1.ECharts最基本的代码结构

引入js文件–DOM容器–初始化对象–设置option

2.准备中国的矢量地图json文件，放到json/map/的目录下
3.使用Ajax获取china.json

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

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

echarts.registerMap('chinaMap',chinaJson)

5.在geo下设置

{type:'map',map:'chinaMap'}

初步实现代码

地图的实现 - 锐客网

返回数据chinaJson在浏览器后台输出截图：

文章图片

我们展开某一省份看一下（以台湾省为例）：

文章图片

效果：

文章图片

geo常见配置允许缩放和拖拽效果

roam: true

名称显示

label{
show:true
}

初始缩放比例

zoom: 1.2

设置地图中心点的坐标

// 这个坐标点在我们返回的数据里是可以拿到的
center: [121.509062, 25.044332]

添加上面配置之后的效果图：

显示某一个省份（河南省）这里没什么好说的，就是把矢量地图数据由原来的全国换成河南就好

PS：款哥是河南的，所以用了河南省举例

地图-某一区域的展示 - 锐客网

效果

文章图片

不同区域显示不同颜色 1.显示基本的中国地图
2.将空气质量的数据设置给series下的对象
3.将series下的数据和geo关联起来
4.配置visualMap

注意：这里我们需要准备一个数组，这个数组里面是一个一个对象，每个对象有两个key值name对应省份名称，value对应的是颜色值
先看下效果图是不是很熟悉：