月眸


echarts绘制各省、市、区的热力图

毛毛小妖 2019-01-16 375浏览 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、最终效果图

最后修改:2019-01-16 14:16:02 © 著作权归作者所有
如果觉得我的文章对你有用,请随意赞赏
扫一扫支付

上一篇

发表评论

说点什么吧~

评论列表

小丸子 2019-01-30 16:59:38
[赞]
回复