使用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>