西湖热力图

梦兮呀

于 2024-01-02 19:49:57 发布

阅读量360

点赞数 8

文章标签： echarts

本文链接：https://blog.csdn.net/isluya/article/details/135348471

版权

使用Echarts对数据进行可视化，在地图中显示西湖景区人流量密度情况。

<!DOCTYPE html>
<html>
	<head>
		
    <meta charset="UTF-8">
    <title>西湖热力图</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=kGB0S0DN534HMVtzT2GD56TtAaV1Ut8H"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/bmap.js"></script>
    <script src="js/jquery-1.11.2.min.js"></script>
		

	</head>
	<body>
		<div id="main" style="width: 800px; height:600px;"></div>
				
				<script>
				  var myChart = echarts.init(document.getElementById('main'));
				
				  // Step 4: Set option
				  var option = {
				    bmap: {
				      center: [120.12792,30.228932],
				      zoom: 14,
				      roam: true
				    },
				    series: [
				      {
				        type: 'heatmap',
				        coordinateSystem: 'bmap',
				        data: [],
				        pointSize: 5,
				        blurSize: 6
				      }
				    ],
				    visualMap: {
				      show: true,
				      left: 'right',
				      min: 0,
				      max: 5,
				      seriesIndex: 0,
				      calculable: true,
				      inRange: {
				        color: ['blue', 'blue', 'green', 'yellow', 'red']
				      }
				    }
				  };
				

				  myChart.setOption(option);
				
				
				  $.get('data/hangzhou-tracks.json', function (data) {
				    var points = [].concat.apply(
				      [],
				      data.map(function (track) {
				        return track.map(function (seg) {
				          return seg.coord.concat([1]);
				        })
				      })
				    );
				
				    option.series[0].data = points;
				    myChart.setOption(option);
				  });
				
				
				  var map = myChart.getModel().getComponent('bmap').getBMap();
				  map.addControl(new BMap.MapTypeControl()); 
				  map.addControl(new BMap.NavigationControl()); 
				</script>
				
	</body>
</html>