【echarts】echarts实现疫情地图（一看就会篇）

echarts实现疫情地图（一看就会篇）

echarts相比于highcharts更加简单上手，所以现在我个人觉得echarts的使用者是比highcharts多的，前面我介绍过highcharts实现疫情地图的方式，所以今天来补充一下echarts的使用方法

一.echarts介绍

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

二.echarts使用

1.首先你需要在官网下载它的源码。官网下载地址：https://echarts.apache.org/zh/download.html
2.引入，只需要引入你需要的就可以，如下面所示：

<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/china.js" type="text/javascript" charset="utf-8"></script>

只用引用上面两个就可以，如果你还要实现世界地图，再引入world.js就好。
补充：echarts的地图数据在incubator-echarts-4.6.0\incubator-echarts-4.6.0\map这个文件夹里，不过只用中国.世界和中国各个省市的数据，想要其他地区的数据需要自己找了。

3.创建一个具有实际宽高的dom元素

	<div id="map" style="width: 200px; height: 300px;"></div>

4.然后初始化echarts，写入数据，并且配置它，就直接上成品代码，大家往里套就好

var map = echarts.init(document.getElementById('map'));//初始化
			
var COLORS = ["#ffffff", "#faebd2", "#e9a188", "#d56355", "#bb3937", "#772526", "#480f10"];//图例里的颜色
var dataList=[//数据
			    {name:"南海诸岛",value:0},
			    {name: '北京', value: 97},
			    {name: '天津', value: 5},
			    {name: '上海', value: 30},
			    {name: '重庆', value: 2},
			    {name: '河北', value: 2},
			    {name: '河南', value: 1},
			    {name: '云南', value: 2},
			    {name: '辽宁', value: 4},
			    {name: '黑龙江', value: 13},
			    {name: '湖南', value: 0},
			    {name: '安徽', value: 0},
			    {name: '山东', value: 9},
			    {name: '新疆', value: 0},
			    {name: '江苏', value: 5},
			    {name: '浙江', value: 15},
			    {name: '江西', value: 1},
			    {name: '湖北', value: 8685},
			    {name: '广西', value: 3},
			    {name: '甘肃', value: 40},
			    {name: '山西', value: 1},
			    {name: '内蒙古', value: 1},
			    {name: '陕西', value: 7},
			    {name: '吉林', value: 0},
			    {name: '福建', value: 0},
			    {name: '贵州', value: 0},
			    {name: '广东', value: 49},
			    {name: '青海', value: 0},
			    {name: '西藏', value: 0},
			    {name: '四川', value: 17},
			    {name: '宁夏', value: 0},
			    {name: '海南', value: 1},
			    {name: '台湾', value: 54},
			    {name: '香港', value: 70},
			    {name: '澳门', value: 2}
			]
			
	var option={//配置项（名称）
		
				tooltip: {//提示框组件
						formatter:function(params,ticket, callback){//提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
							return params.seriesName+'<br />'+params.name+'：'+params.value
						}//数据格式化
					},
				backgroundColor:'#eeeeee',//背景色
				visualMap: {//visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
					type: 'piecewise',//分段型视觉映射组件
					orient: 'horizontal',//方向

					left: 'left',//位置
					top: 'bottom',//位置
	
					pieces: [{//自定义『分段式视觉映射组件』的每一段的范围，以及每一段的文字，以及每一段的特别的样式。
						value: 0, color: COLORS[0]
					}, {
						min: 1, max: 9, color: COLORS[1]
					}, {
						min: 10, max: 99, color: COLORS[2]
					}, {
						min: 100, max: 499, color: COLORS[3]
					}, {
						min: 500, max: 999, color: COLORS[4]
					}, {
						min: 1000, max: 10000, color: COLORS[5]
					}, {
						min: 10000, color: COLORS[6]
					}],
					inRange: {
						color:COLORS //取值范围的颜色
					},
					
					show:true//图注
				},
				geo: {//地理坐标系组件用于地图的绘制
					map: 'china',
					roam: false,//不开启缩放和平移
					zoom:1.23,//视角缩放比例
					label: {
						normal: {
							show: true,
							fontSize:'10',
							color: 'rgba(0,0,0,0.7)'
						}
					},
					itemStyle: {
						normal:{
							borderColor: 'rgba(0, 0, 0, 0.2)'
						},
						emphasis:{
							areaColor: '#F3B329',//鼠标选择区域颜色
							shadowOffsetX: 0,
							shadowOffsetY: 0,
							shadowBlur: 20,
							borderWidth: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				},
				series : [//系列列表。（图表）
					{
						name: '信息量',
						type: 'map',//图表类型
						geoIndex: 0,
						data:dataList//图表的数据
					}
				]
			}
			
			map.setOption(option);//用配置项配置（动词）echarts

---

整个做下来，最后效果和丁香园那个很像，有兴趣的同学可以尝试一下！
上一篇：【highcharts】highcharts(highmaps)实现疫情地图
感谢大家的阅读，希望对大家有帮助！