echarts绘制各省、市、区的热力图
网站首页 文章专栏 echarts绘制各省、市、区的热力图
echarts绘制各省、市、区的热力图
编辑时间:2019-05-06 18:11 作者:毛毛小妖 浏览量:268 评论数:1

1、下载全国地图数据

我的github地址:全国地图数据包

2、引入echarts和jquery

echarts下载地址:https://echarts.baidu.com/download.html

jquery下载地址:http://jquery.com/download/

3、html代码

<div id="demo"></div>

4、js代码

var myChart = echarts.init(document.getElementById('demo'),'vintage');
myChart.showLoading();
var caseArr;
$.ajax({
	url : Global.rootPath + '/tlTrialStatistics/caseDistribute',
	type : 'post',
	dataType : 'json',
	success : function(result){
		if(result == null || result == "" || $.isEmptyObject(result)){
			return false;
		}else{
			caseArr = result.list;
			var totalCase = 0; 
			for(var i=0;i{c}'
				},
				visualMap: {
					type:'piecewise',
					itemWidth:20,
					itemHeight:20,
					itemGap:0,
					inverse:false,
					color: ['orangered','yellow','#f5f5f5'],
					pieces: [
						 {min: 700},
						 {min: 600, max: 700},
						 {min: 500, max: 600},
						 {min: 400, max: 500},
						 {min: 300, max: 400},
						 {min: 200, max: 300},
						 {min: 100, max: 200},
						 {min: 50, max: 100},
						 {min: 0, max: 50},
					     ]
				},
				series: [
					{
						name: '海南省案件分布',
						type: 'map',
						mapType: 'HZ', // 自定义扩展图表类型
						coordinateSystem: 'geo',
						itemStyle:{
							normal:{label:{show:true}},
							emphasis:{label:{show:true}}
						},
						data:caseArr,
					}
				]
			});
		});
	}
});

5、最终效果图

推荐文章
来说两句吧
最新评论