Echarts实现热力图热点图聚合图

一、热力图

function initHeatChartMap(){
		var option = {
		    bmap: {roam: true},
		    title: {
		        text: '热点热力图',
		        left: 'center',
		        textStyle: {
		            color: '#787464'
		        }
		    },
		    geo: {
		        map: 'bmap',
		        polyline: true,
		        progressiveThreshold: 500,
		        progressive: 200,
		        label: {
		            emphasis: {
		                show: false
		            }
		        },
		        roam: true,
		        itemStyle: {
		            normal: {
		                areaColor: '#323c48',
		                borderColor: '#404a59'
		            },
		            emphasis: {
		                areaColor: '#2a333d'
		            }
		        }
		    },
		    visualMap: {
		        min: 0,
		        max: 100,
		        splitNumber: 5,
		        inRange: {
		            //color: ['#FF3300','#FF9900','#009900'].reverse()
		            /*color: ['#00B2EE','#87CEEB','#50a3ba'].reverse()*/
		            color: ['blue','blue','green','yellow','red']
		        },
		        textStyle: {
		            color: '#000'
		        }
		    },	
		    series: [{
			    type: 'heatmap',
			    coordinateSystem: 'bmap',
			    zlevel: 5,
			    rippleEffect: {
			        brushType: 'stroke'
			    },
			    showEffectOn: 'render',
			    data: hotAddressArray.map(function(dataItem) {
			        return {
			            name: dataItem.UNAME,
			            value: [dataItem.LNG, dataItem.LAT].concat([dataItem.COU])
			        };
			    })
			}]
		};
		mapChart = echarts.init(document.getElementById('chart_hotMap'));
		mapChart.setOption(option);
		var ecModel = mapChart._model;
		ecModel.eachComponent('bmap', function (bmapModel) {			
			map = bmapModel.__bmap;
		});
		getBoundary();
		initDrawingManager();
	}

function getBoundary(){
	var boundaries  = [ "114.256424,28.32422;114.262319, 28.331333;114.254291, 28.347466;114.260171, 28.356045;114.267743, 28.358408;114.25629, 28.372311;114.265733, 28.381433;114.261432, 28.400178;114.239738, 28.405129;114.234555, 28.401727;114.228941, 28.407853;114.221068, 28.409161;114.211025, 28.427695;114.202066, 28.435172;114.17839, 28.440321;114.194105, 28.444653;114.208851, 28.465152;114.223385, 28.472554;114.224667, 28.490737;114.200466, 28.504882;114.18662, 28.502583;114.17546, 28.505081;114.161149, 28.513487;114.149109, 28.526377;114.14334, 28.541597;114.131807, 28.540755;114.124889, 28.545354;114.107096, 28.546521;114.093264, 28.561847;114.080446, 28.56097;114.072522, 28.553408;114.05985, 28.549867;114.046585, 28.556879;114.031893, 28.548903;114.026021, 28.549089;114.021475, 28.551946;114.019976, 28.560874;114.008435, 28.568531;114.002183, 28.571241;113.982476, 28.570847;113.967693, 28.548632;113.94782, 28.532029;113.941996, 28.537066;113.924365, 28.531311;113.908914, 28.534711;113.892051, 28.521498;113.86224, 28.537947;113.850924, 28.529805;113.83902, 28.504607;113.839566, 28.494791;113.830619, 28.488079;113.823539, 28.472745;113.814794, 28.464225;113.794643, 28.463905;113.780514, 28.456399;113.76022, 28.456025;113.741871, 28.450646;113.732296, 28.443172;113.724755, 28.429444;113.718216, 28.427582;113.708353, 28.429882;113.679656, 28.44993;113.663792, 28.453933;113.667985, 28.46224;113.655193, 28.477444;113.64254, 28.488834;113.636092, 28.489074;113.631296, 28.496923;113.613771, 28.509045;113.583505, 28.541937;113.563331, 28.538624;113.554966, 28.530993;113.534609, 28.534597;113.524151, 28.54267;113.513776, 28.543226;113.503697, 28.571976;113.481681, 28.584307;113.478973, 28.592968;113.467922, 28.603062;113.459514, 28.596333;113.452402, 28.599771;113.448568, 28.596185;113.436926, 28.596302;113.430811, 28.584837;113.426333, 28.594805;113.422137, 28.593904;113.421038, 28.597165;113.423384, 28.610894;113.42719, 28.614838;113.424473, 28.625114;113.430227, 28.627152;113.431781, 28.64205;113.417075, 28.638641;113.394644, 28.65082;113.38631, 28.650847;113.371945, 28.643154;113.36044, 28.623918;113.336833, 28.624618;113.326868, 28.62162;113.320082, 28.63613;113.29354, 28.644498;113.285771, 28.644263;113.281167, 28.638323;113.271075, 28.637581;113.266402, 28.633985;113.260046, 28.635219;113.252461, 28.646541;113.254685, 28.650843;113.250097, 28.662075;113.240157, 28.667365;113.241246, 28.652207;113.220213, 28.641644;113.219552, 28.624595;113.201575, 28.609604;113.189918, 28.605235;113.196213, 28.588171;113.191224, 28.57579;113.201195, 28.572399;113.207301, 28.56142;113.200436, 28.556023;113.201264, 28.547459;113.192387, 28.53531;113.18952, 28.516291;113.191916, 28.509464;113.177824, 28.498707;113.17633, 28.48678;113.160727, 28.47722;113.135518, 28.47859;113.136943, 28.504533;113.118478, 28.505043;113.103137, 28.514372;113.095193, 28.51503;113.081279, 28.529964;113.074402, 28.52532;113.068776, 28.509547;113.051088, 28.493443;113.038486, 28.491794;113.014907, 28.473358;112.993905, 28.466185;112.98917, 28.470444;112.977137, 28.47269;112.967341, 28.482897;112.984127, 28.502832;112.981377, 28.510481;112.985197, 28.529112;112.958947, 28.521588;112.927647, 28.526664;112.908477, 28.522922;112.897783, 28.530811;112.891613, 28.526573;112.878014, 28.524881;112.876856, 28.516457;112.880496, 28.50975;112.876652, 28.506795;112.861024, 28.518007;112.84207, 28.517268;112.829726, 28.520929;112.828862, 28.534512;112.822016, 28.534039;112.814913, 28.524955;112.79942, 28.528408;112.796493, 28.543541;112.815191, 28.565377;112.809424, 28.565803;112.776435, 28.54714;112.757651, 28.523423;112.752371, 28.521963;112.751526, 28.515345;112.737655, 28.513842;112.720622, 28.517601;112.705112, 28.527818;112.69109, 28.532624;112.686515, 28.531009;112.650471, 28.478802;112.642201, 28.471907;112.63282, 28.469951;112.621607, 28.433591;112.603202, 28.423444;112.602466, 28.411196;112.590824, 28.406388;112.58606, 28.390604;112.5868, 28.379085;112.581884, 28.375313;112.581093, 28.359392;112.568804, 28.350471;112.570849, 28.33948;112.578775, 28.331614;112.569301, 28.333197;112.559067, 28.325262;112.542466, 28.330504;112.546434, 28.335583;112.543461, 28.338664;112.514636, 28.326734;112.507363, 28.333091;112.509675, 28.319172;112.493478, 28.314994;112.478601, 28.326049;112.472494, 28.31896;112.454811, 28.323464;112.450848, 28.31756;112.445352, 28.316904;112.441785, 28.318306;112.440111, 28.325055;112.433529, 28.316126;112.426794, 28.319374;112.427929, 28.312569;112.416264, 28.300542;112.411313, 28.304603;112.406544, 28.29787;112.39422, 28.29507;112.386514, 28.301055;112.383464, 28.294208;112.376887, 28.290116;112.353548, 28.297352;112.353527, 28.287317;112.365832, 28.288545;112.357861, 28.279431;112.33935, 28.290659;112.324321, 28.291209;112.328164, 28.268834;112.309976, 28.26676;112.29991, 28.255211;112.294809, 28.260055;112.288473, 28.260349;112.287313, 28.253539;112.271654, 28.240459;112.259642, 28.23744;112.258296, 28.2301;112.244497, 28.216336;112.238044, 28.224188;112.239576, 28.232259;112.219158, 28.246066;112.201952, 28.23958;112.18718, 28.24093;112.176033, 28.251608;112.152788, 28.260232;112.145651, 28.27162;112.129706, 28.271952;112.121175, 28.277853;112.105519, 28.27625;112.098311, 28.27105;112.088657, 28.274218;112.087076, 28.267152;112.077428, 28.262076;112.063143, 28.26092;112.058213, 28.257334;112.035111, 28.256879;112.016238, 28.249765;112.010554, 28.241666;112.013635, 28.231698;111.993111, 28.230251;111.982473, 28.225915;111.980974, 28.221269;111.96935, 28.21524;111.96755, 28.204493;111.962629, 28.198918;111.945117, 28.192263;111.951663, 28.186763;111.948224, 28.178474;111.93969, 28.174217;111.93899, 28.140373;111.918003, 28.122436;111.911919, 28.101842;111.926773, 28.075746;111.9334, 28.072206;111.917611, 28.058034;111.914088, 28.047531;111.919844, 28.03475;111.906299, 28.025694;111.903209, 28.017009;111.913723, 28.002188;111.906287, 27.988589;111.911492, 27.982099;111.919219, 27.979551;111.933384, 27.986835;111.942817, 27.997338;111.957677, 27.993425;111.969649, 27.972484;111.992496, 27.956107;112.006243, 27.913689;112.021632, 27.911942;112.036688, 27.919055;112.053259, 27.919036;112.057534, 27.926406;112.068119, 27.926233;112.090795, 27.91535;112.099542, 27.901026;112.109845, 27.899844;112.124828, 27.903503;112.137753, 27.920103;112.155057, 27.915481;112.165315, 27.921688;112.164037, 27.933494;112.178963, 27.940393;112.181586, 27.945335;112.187657, 27.945546;112.199508, 27.971485;112.205385, 27.976765;112.206219, 27.967318;112.217519, 27.961142;112.223637, 27.965026;112.229606, 27.97759;112.236873, 27.967842;112.251864, 27.969474;112.264261, 27.964827;112.30122, 27.976297;112.314507, 27.974392;112.321333, 27.96581;112.334422, 27.970102;112.34911, 27.963918;112.359048, 27.96802;112.359757, 27.971882;112.368794, 27.973999;112.38788, 27.972424;112.397065, 27.967775;112.408726, 27.971458;112.419196, 27.977175;112.419964, 27.994553;112.414691, 28.002371;112.406232, 28.000554;112.404508, 28.006644;112.415057, 28.007705;112.421352, 28.020297;112.414357, 28.045293;112.416064, 28.049013;112.425894, 28.052041;112.428357, 28.050146;112.430097, 28.056603;112.4504, 28.06366;112.463773, 28.057938;112.481956, 28.066092;112.48678, 28.06208;112.492825, 28.045974;112.522952, 28.02463;112.517807, 28.022711;112.514882, 28.016652;112.518393, 28.000433;112.539894, 27.999203;112.546461, 27.98143;112.560326, 27.978977;112.569748, 27.987309;112.573178, 27.977934;112.581521, 27.973337;112.583132, 27.965557;112.603466, 27.959379;112.605721, 27.953913;112.60065, 27.941017;112.605509, 27.927038;112.608604, 27.923842;112.613104, 27.924615;112.614287, 27.916781;112.618893, 27.91402;112.616147, 27.907549;112.632346, 27.90217;112.640433, 27.885886;112.650347, 27.885578;112.65843, 27.889463;112.663502, 27.90547;112.658711, 27.924355;112.651141, 27.925063;112.649822, 27.928962;112.661058, 27.947594;112.667092, 27.947889;112.67323, 27.941846;112.693529, 27.933386;112.689823, 27.926659;112.70952, 27.928365;112.723763, 27.922169;112.738853, 27.924058;112.736484, 27.935993;112.742925, 27.933608;112.749632, 27.937645;112.750656, 27.95212;112.764968, 27.971244;112.77241, 27.997652;112.770215, 28.008254;112.77521, 28.012409;112.779423, 28.032226;112.778252, 28.041388;112.785511, 28.042953;112.801868, 28.036884;112.810585, 28.046792;112.78898, 28.059013;112.783583, 28.067276;112.785004, 28.077982;112.78916, 28.079787;112.816873, 28.075599;112.822062, 28.077968;112.825034, 28.075417;112.823083, 28.06532;112.832012, 28.050093;112.84003, 28.043659;112.83909, 28.031138;112.845281, 28.027319;112.85603, 28.028304;112.866324, 28.009854;112.865238, 27.993017;112.878372, 27.994788;112.881951, 28.009047;112.888969, 28.005873;112.887372, 27.99874;112.899279, 28.001423;112.898296, 27.994559;112.890302, 27.985069;112.89309, 27.97975;112.904933, 27.984924;112.912995, 27.977348;112.920974, 27.984061;112.934011, 27.982558;112.938738, 27.984869;112.939372, 27.990573;112.947252, 27.989555;112.944095, 27.998625;112.934493, 27.99944;112.942295, 28.010209;112.938526, 28.023758;112.94506, 28.025436;112.983701, 27.987628;113.008084, 27.972991;113.027829, 27.982342;113.030898, 27.989953;113.037248, 27.984255;113.042311, 27.985649;113.037308, 28.00485;113.04385, 28.008199;113.045917, 28.014597;113.081048, 28.017875;113.090003, 28.003369;113.098519, 27.997908;113.080157, 27.981156;113.080813, 27.977108;113.0896, 27.970712;113.096162, 27.971854;113.094134, 27.959003;113.091029, 27.95729;113.107651, 27.939528;113.114883, 27.94037;113.123468, 27.925009;113.135547, 27.919213;113.141909, 27.923018;113.14431, 27.934104;113.138871, 27.937353;113.136394, 27.946897;113.136514, 27.950524;113.143979, 27.952658;113.14059, 27.961086;113.154822, 27.964792;113.165849, 27.97588;113.158252, 27.98288;113.154198, 28.002029;113.166366, 28.01014;113.168833, 28.004663;113.172511, 28.00519;113.174506, 28.009853;113.168799, 28.016323;113.172501, 28.022762;113.182049, 28.025548;113.18423, 28.021898;113.192747, 28.022869;113.195106, 28.019665;113.211284, 28.020332;113.218027, 28.034717;113.222629, 28.027863;113.231449, 28.031017;113.231977, 28.024282;113.243536, 28.022951;113.245585, 28.019064;113.248803, 28.019418;113.253899, 28.029154;113.258187, 28.029726;113.261207, 28.02193;113.271862, 28.017892;113.27304, 28.002266;113.27824, 27.995183;113.275454, 27.984774;113.284437, 27.976021;113.278253, 27.968097;113.277596, 27.954078;113.269627, 27.955718;113.26554, 27.94797;113.274894, 27.937982;113.278772, 27.926066;113.292816, 27.92395;113.296983, 27.917221;113.27808, 27.914199;113.284215, 27.910049;113.28805, 27.900808;113.287823, 27.888393;113.279942, 27.870583;113.296283, 27.871234;113.294372, 27.88295;113.303776, 27.884767;113.308089, 27.874509;113.32229, 27.871021;113.335932, 27.863012;113.34967, 27.864232;113.36538, 27.853941;113.378034, 27.858668;113.414843, 27.861767;113.421133, 27.865751;113.421462, 27.893397;113.426832, 27.901526;113.432571, 27.904281;113.452757, 27.901424;113.46457, 27.904323;113.468757, 27.922655;113.48716, 27.931927;113.490437, 27.941838;113.494988, 27.944908;113.510659, 27.943889;113.527958, 27.948668;113.531703, 27.965965;113.574298, 27.970523;113.581167, 27.966722;113.583883, 27.960485;113.58479, 27.945431;113.578989, 27.943061;113.575995, 27.933513;113.580419, 27.9244;113.578017, 27.917504;113.583988, 27.904749;113.598785, 27.897119;113.606649, 27.915721;113.612102, 27.918657;113.640374, 27.90211;113.654325, 27.884376;113.661411, 27.884079;113.66196, 27.888478;113.667149, 27.891081;113.678743, 27.882827;113.706043, 27.875901;113.727597, 27.89125;113.736912, 27.890733;113.741776, 27.908958;113.756624, 27.936047;113.77746, 27.958984;113.801485, 27.961945;113.799607, 27.968162;113.803817, 27.975813;113.826766, 27.987645;113.831732, 27.986469;113.835424, 27.977339;113.854934, 27.978504;113.858542, 27.98216;113.859207, 27.995832;113.870426, 28.011059;113.877705, 28.009219;113.885129, 27.998328;113.900902, 27.994069;113.930227, 27.997282;113.931056, 28.002758;113.925702, 28.006662;113.926213, 28.011362;113.940908, 28.024053;113.957736, 28.019497;113.972084, 28.022798;113.962775, 28.036396;113.96986, 28.045526;114.006967, 28.046784;114.033296, 28.037881;114.035895, 28.047876;114.051518, 28.06579;114.043794, 28.082697;114.035955, 28.086513;114.030473, 28.104979;114.024799, 28.106717;114.022044, 28.129549;114.016618, 28.132641;114.013534, 28.144757;114.001076, 28.161207;114.001799, 28.168318;114.01064, 28.173395;114.01239, 28.183537;114.033756, 28.178161;114.054562, 28.18243;114.062296, 28.176163;114.084146, 28.179971;114.090281, 28.185111;114.111739, 28.187781;114.113691, 28.209634;114.127644, 28.219505;114.136076, 28.234476;114.150262, 28.244294;114.15151, 28.253899;114.17449, 28.259303;114.188734, 28.255728;114.191229, 28.27332;114.204911, 28.275608;114.204669, 28.296557;114.214419, 28.303235;114.225445, 28.302032;114.241524, 28.31727;114.256424, 28.32422" ];
	var count = boundaries.length;
	for(var i = 0; i < count; i++){
		var ply = new BMap.Polygon(boundaries[i], {strokeWeight: 1, strokeColor: "gray",strokeOpacity:0,strokeStyle:'dashed',fillColor:'#696969',fillOpacity:0}); //建立多边形覆盖物
		map.addOverlay(ply);  //添加覆盖物
		//map.setViewport(ply.getPath());    //调整视野
	}
	map.centerAndZoom(new BMap.Point(113.196, 28.241), 11);
}

/**
 * 初始化画覆盖物工具
 */
function initDrawingManager() {
	var overlaycomplete = function(e){
		clearAll();
		overlays.push(e.overlay);
//		console.log(e.overlay.getPath()[0].lng+','+e.overlay.getPath()[0].lat);//左上角
//		console.log(e.overlay.getPath()[1].lng+','+e.overlay.getPath()[1].lat);//右上角
//		console.log(e.overlay.getPath()[2].lng+','+e.overlay.getPath()[2].lat);//右下角
//		console.log(e.overlay.getPath()[3].lng+','+e.overlay.getPath()[3].lat);//左下角
		var innerHotAddressArray = toFilterHotAddress(e.overlay.getPath()[3].lat,e.overlay.getPath()[3].lng,e.overlay.getPath()[1].lat,e.overlay.getPath()[1].lng);
		$('#hotAddressListDgd').datagrid({loadFilter:pagerFilter}).datagrid('loadData', innerHotAddressArray);
		drawingManager.close();//完成后关闭画矩形工具
		map.setViewport(e.overlay.getPath());//调整地图可视范围
		$('#hotAddressListDlg').dialog('open');
    };  
  
    var styleOptions = {  
        strokeColor:"#c6e579",    //边线颜色。  
        fillColor:"#c6e579",      //填充颜色。当参数为空时，圆形将没有填充效果。  
        strokeWeight: 3,       //边线的宽度，以像素为单位。  
        strokeOpacity: 0.5,    //边线透明度，取值范围0 - 1。  
        fillOpacity: 0.3,      //填充的透明度，取值范围0 - 1。  
        strokeStyle: 'solid' //边线的样式，solid或dashed。  
    }  
    //实例化鼠标绘制工具  
    var drawingManager = new BMapLib.DrawingManager(map, {  
        isOpen: false, //是否开启绘制模式  
        enableDrawingTool: true, //是否显示工具栏  
        drawingToolOptions: {  
            anchor: BMAP_ANCHOR_TOP_LEFT, //位置  
            offset: new BMap.Size(35, 8), //偏离值  
            scale: 0.8, //工具栏缩放比例
            drawingModes : [
                BMAP_DRAWING_RECTANGLE 
             ]
        },  
        rectangleOptions: styleOptions //矩形的样式  
    });  
  
    //添加鼠标绘制工具监听事件，用于获取绘制结果  
    drawingManager.addEventListener('overlaycomplete', overlaycomplete);
}

二、散点图

	//初始化echarts的百度地图【散点图】
	function initPointChartMap(){
		var option = {
		    bmap: {roam: true},
		    title: {
		        text: '热点分布图',
		        left: 'center',
		        textStyle: {
		            color: '#787464'
		        }
		    },
		    tooltip: {
		        trigger: 'item',
		        formatter:function(item) {
					return item.name+'
'+'提示：'+item.value[2];
		        }
		    },
		    geo: {
		        map: 'bmap',
		        polyline: true,
		        progressiveThreshold: 500,
		        progressive: 200,
		        label: {
		            emphasis: {
		                show: false
		            }
		        },
		        roam: true,
		        itemStyle: {
		            normal: {
		                areaColor: '#323c48',
		                borderColor: '#404a59'
		            },
		            emphasis: {
		                areaColor: '#2a333d'
		            }
		        }
		    },
		    series: [{
			    type: 'scatter',
			    coordinateSystem: 'bmap',
			    zlevel: 5,
			    rippleEffect: {
			        brushType: 'stroke'
			    },
			    showEffectOn: 'render',
			    symbolSize: function (data) {
			    	var size = data[2]-minValue+5;
			    	size = size > 20 ? 20 : size;
		            return size;
		        },
		        itemStyle: {
		            normal: {
		                shadowBlur: 10,
		                shadowColor: 'rgba(120, 36, 50, 0.5)',
		                shadowOffsetY: 5,
		                color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
		                    offset: 0,
		                    color: 'rgb(251, 118, 123)'
		                }, {
		                    offset: 1,
		                    color: 'rgb(204, 46, 72)'
		                }])
		            }
		        },
			    data: hotAddressArray.map(function(dataItem) {
			        return {
			            name: dataItem.UNAME,
			            value: [dataItem.LNG, dataItem.LAT].concat([dataItem.COU])
			        };
			    })
			}]
		};
		
		mapChart = echarts.init(document.getElementById('chart_hotMap'));
		mapChart.setOption(option);
		var ecModel = mapChart._model;
		ecModel.eachComponent('bmap', function (bmapModel) {			
			map = bmapModel.__bmap;
		});
		getBoundary();
		initDrawingManager();
	}

三、点聚合图

function initMarkerClustererChartMap() {
		map = new BMap.Map("chart_hotMap");//重画地图
		getBoundary();
		map.enableScrollWheelZoom();
		var markers = [];
		var pt = null;
		hotAddressArray.forEach(function(val,index) {
			pt = new BMap.Point(val.LNG, val.LAT);
			var marker = new BMap.Marker(pt);
			var label = new BMap.Label(val.ID);
			label.setStyle({
				display:"none"
			});
			marker.setLabel(label);
			marker.addEventListener("click", function(e){
			    if(!e.overlay){
			    	showInfoWindow(this);
			    }
			});
			markers.push(marker);
		});
		var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
		initDrawingManager();
	}
	
	return {
		initHeatChartMap: initHeatChartMap,
		initPointChartMap: initPointChartMap,
		initMarkerClustererChartMap: initMarkerClustererChartMap
    };