ECharts 实现地图散点图(上)

ECharts 作为国内应用最广泛的前端可视化生成工具,提供了丰富的图表展现方式和便捷的图表操作。 ECharts 支持 geoJson 格式的地图,并且官网上提供了现成的 world,china 及全国34个省市自治区地图的下载。这篇文章中我们将会讲解如何使用 ECharts 实现一个中国地图上绘制的散点图。

一、初始准备

1. 新建html

首先,新建项目目录 echartsMapDemo,在其中新建一个 html 文件 index.html

echartsMapDemo/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  	<meta charset="UTF-8">
  	<title>ECharts map Demo</title>
</head>
<body>
</body>
</html>

2.引入echarts文件

echarts官网 下载最新完整开发包(目前最新版本是3.1.4)。

将下载好的包放置在 echartsMapDemo/dep 目录下并在 html 中以 script 标签引入:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts map Demo</title>
</head>
<body>
</body>

<script src="/dep/echarts.min.js"></script>

</html>

3.创建图标容器

在 html 中定义一个 div 作为地图的容器,高度设为 500px 。别忘了,一定要保证容器高度不为 0:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts map Demo</title>
</head>
<body>

	<div id="map-wrap" style="height: 500px;">
		<!-- 这里以后是地图 -->
	</div>

</body>
<script src="/dep/echarts.min.js"></script>
</html>

然后,我们还需要一个地图文件,echart 提供两种格式的地图数据,一种是 js 格式,一种是 JSON 格式。下文中我们会分别使用这两种方式实现。

同样去 官网 上下载,这里选择下载中国地图 china.js 或 china.json 。你也可以根据需要选择其他省份地图或世界地图

好了,准备工作完成,现在就开始绘制地图了~

二、绘制地图

echart 提供两种格式的地图数据,一种是 js 格式,一种是 JSON 格式。下面分别介绍两种格式的用法:

引用js格式地图数据:

1.在官网上下载 js 格式中国地图 china.js,将下载好的 china.js 放在 echartsMapDemo/map/js 目录下,以 script 标签引入到 html 中:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts map Demo</title>
</head>
<body>
	<div id="map-wrap" style="height: 500px;">
		<!-- 这里以后是地图 -->
	</div>
</body>
<script src="/dep/echarts.min.js"></script>

<script src="/map/js/china.js"></script>

</html>

2.在js中用 echarts.init() 方法初始化一个 ECharts 实例,在 init() 中传入图表容器 Dom 对象,

同时定义一个变量 option,作为图表的配置项:

// 初始化echarts示例mapChart
var mapChart = echarts.init(document.getElementById('map-wrap'));

// mapChart的配置
var option = {

};

3.通过配置 option,新建一个地理坐标系 geo ,地图类型为中国地图。

var option = {
	geo: {
      	map: 'china'
  	}
}

geo.map 属性定义该地理坐标系中的地图数据,这里我们要用 china.js ,设置map值为 ‘china’。

这里需要注意,中国地图的map值为 ‘china’ ,世界地图的map值为 ‘world’ ,但如果要引用省市自治区地图 map 值为简体中文,例如 beijing.js,map 值为’北京’。

4.调用 setOption(option) 为图表设置配置项。

mapChart.setOption(option);

引用JSON格式地图数据:

1.同样在官网下载JSON格式的地图数据,放在echartsMapDemo/map/json目录下

2.json数据通过异步方式加载,加载完成后需要手动注册地图

这里我们使用 jQuery 的 $.get() 方法异步加载 china.json (首先要在html中引用 jquery ,这里省略操作说明),在回调函数中,以上述同样的方法初始化一个 mapCharts 、注册地图并设置 option:

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

		echarts.registerMap('china', chinaJson); // 注册地图

		var mapChart = echarts.init(document.getElementById('map-wrap'));

  		var option = {
  			geo: {
      			map: 'china'
  			}
  		}

 		 	mapChart.setOption(option);

  	});
});

现在就可以在页面中看到中国地图了:

地图

为了突出散点效果,先为地图改个颜色

var option = {
	geo: {
        map: 'china',

        itemStyle: {					// 定义样式
            normal: {					// 普通状态下的样式
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {					// 高亮状态下的样式
                areaColor: '#2a333d'
            }
        }
    },
	backgroundColor: '#404a59',  		// 图表背景色
}

换装后的地图:

中国地图底图

三、绘制散点图


1.新建散点图series

在 option 中添加一个 series , series 的类型为散点图 scatter ,坐标系为地理坐标系 geo

var option = {
	geo: {
      	...
  	},
	backgroundColor: '#404a59',

	series: [
		{
			name: '销量', // series名称
			type: 'scatter', // series图表类型
			coordinateSystem: 'geo' // series坐标系类型
		}
	]
}

2.添加数据

ECharts 中 series.data 是定义图表数据内容的数组,其中每个项数据格式为:

{
	name: '北京',    // 数据项名称,在这里指地区名称

	value: [        // 数据项值
		116.46,     // 地理坐标,经度
		39.92,      // 地理坐标,纬度
		340         // 北京地区的数值
	]
}


首先我们将需要渲染的数据转换成上述数据格式,存在一个变量中:

var myData = [

	{name: '海门', value: [121.15, 31.89, 90]},
  	{name: '鄂尔多斯', value: [109.781327, 39.608266, 120]},
  	{name: '招远', value: [120.38, 37.35, 142]},
    {name: '舟山', value: [122.207216, 29.985295, 123]},
  	...
]


然后,将 myData 赋值给 series.data:

var option = {
	geo: {
      	...
  	},
  	backgroundColor: '#404a59',
	series: [
		{
			name: '销量',
			type: 'scatter',
			coordinateSystem: 'geo',

			data: myData // series数据内容
		}
	]
}

数据添加完成,就可以在图表中看到渲染出的散点了:

散点图1

3.添加视觉映射组件

视觉映射组件是标识某一数据范围内数据及颜色对应关系的控件,视觉映射组件分为连续型和分段型,这里我们选用连续型 type:continuous 。同时,通过视觉映射组件可以实现 ECharts 值域漫游功能,即通过拖拽控件手柄选择不同数值范围,达到对图表数据的筛选显示。 在 visualMap 属性中设置值域控件的相关配置:

var option = {
	...

	visualMap: {
		type: 'continuous', // 连续型
		min: 0,       		// 值域最小值,必须参数
		max: 200,			// 值域最大值,必须参数
		calculable: true,	// 是否启用值域漫游
		inRange: {
             	color: ['#50a3ba','#eac736','#d94e5d']
                             // 指定数值从低到高时的颜色变化
          },
		textStyle: {
			color: '#fff'	// 值域控件的文本颜色
		}
     	}
}

添加了值域控件的图表效果:

散点图2

这样一个基于中国地图的散点图就基本实现了,如果想要继续完善图表,可以为它添加标题,图例,高亮提示等控件,配置方式在这里查看(ECharts 配置项手册),在此不再详细说明。

更多相关信息

在 ECharts GL 中绘制三维地图

ECharts 前段时间发布了超亮眼的 GL,相对于之前已经圈粉无数的 ECharst-X 而言,ECharst GL 更是帅到爆,无论是性能、颜值、类型都有了巨大的飞跃。但是不是更易上手呢?答案是肯定的,用户除了能够根据数据画出诸如三维地图等三维的可视化图之外,只需要在项目中加入几个简单的配置项,就能配制出想要的风格的高质量画面效果。

地图 教程

ECharts v3.6 发布:自定义系列、极坐标柱状图

在 ECharts 新发布的 3.6 版本中,新增了自定义系列,能让用户定制渲染逻辑,从而在已有坐标系中创造新的图表。此外还有极坐标柱状图、自定义维度映射、dataZoom 等其他一些增强。

地图 教程

ECharts 统计扩展教程

你是否想了解一组样本数据的分布情况?你是否想根据用户的数值属性将用户分成不同的群体?你是否想预测两个变量的变化趋势?——什么?不需要?不要再违心了,小编已经听到来自你们内心深处的呐喊,今天就为大家推荐一款神器——ECharts 统计扩展,这是一个用来进行数据分析的扩展工具,包含的功能有直方图、聚类、回归、以及常用的汇总统计。通过统计扩展和 ECharts 的结合,可以使大家方便地实现可视分析,也就是将数据分析的结果,通过可视化直观地呈现出来。

地图 教程