【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)實現疫情地圖
感謝大家的閱讀，希望對大家有幫助！