Echarts扩展功能之热力图（离线版）

当开发的时候，不能联网是多么苦恼的一件事啊！
当开发的时候，只能离线开发是多么苦恼的一件事啊！

接下来我们看一看如何在离线环境下利用echarts的扩展功能开发热力图：

需要引入的文件：（其中bmap.js文件一定要是打包过的文件）

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己的apk"></script>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="bmap.js"></script>

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>echarts-heatmap</title>
</head>
<body>
	<div id="contain" style="width: 100%;height: 500px;"></div>
</body>
</html>

JS：

<script>
		var dom = document.getElementById("contain");
		var myChart = echarts.init(dom);
		var option = {
			animation: false,
			bmap: {
				center: [117.282699092,31.8669422607],
				zoom: 16,
				roam: true
			},
			visualMap: {
				show: true,
				top: 'top',
				min: 0,
				max: 50,
				seriesIndex: 0,
				calculable: true,
				inRange: {
					color: ['blue', 'blue', 'green', 'yellow', 'red']
				},
				textStyle: {
					color: '#ffffff'
				}
			},
			series: [{
				type: 'heatmap',
				coordinateSystem: 'bmap',
				data: [[117.282699092, 31.8679422607, 45],[117.282699092,31.8669522607,43],[117.284699092,31.8669922607,32]],
				pointSize: 20,
				blurSize: 10
			}]
		};
		myChart.setOption(option,true);
		
		var map = myChart.getModel().getComponent('bmap').getBMap();
		//map.addControl(new BMap.MapTypeControl());
		//map.centerAndZoom("合肥",12);
		map.enableScrollWheelZoom(true); 

	</script>

CSS：

<style type="text/css">
		
		#contain img{
			-webkit-filter: invert(100%) sepia(100%) grayscale(5%) saturate(3) hue-rotate(155deg) brightness(0.9);
		        filter: invert(100%) sepia(100%) grayscale(5%) saturate(3) hue-rotate(155deg) brightness(0.9);
		}
	</style>

另外，需要的echarts热力图文件路径：https://github.com/apache/incubator-echarts/tree/master/dist/extension

Echarts扩展功能之热力图（离线版）

相关推荐