mirror of
https://gitee.com/AiShiYuShiJiePingXing/bigscreen.git
synced 2026-01-21 05:40:35 +08:00
252 lines
6.8 KiB
JavaScript
252 lines
6.8 KiB
JavaScript
<!DOCTYPE html>
|
|
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
|
|
<title>热力图展示</title>
|
|
<link rel="stylesheet" href="css/bootstrap.min.css" />
|
|
<link rel="stylesheet" href="css/app.css" />
|
|
</head>
|
|
|
|
<body class="bg02">
|
|
<header class="header">
|
|
<h3>热力图展示</h3>
|
|
</header>
|
|
|
|
<div class="wrapper">
|
|
<div class="container-fluid">
|
|
<div class="row fill-h">
|
|
<div class="col-lg-7 fill-h">
|
|
<div class="xpanel-wrapper xpanel-wrapper-1">
|
|
<div class="xpanel">
|
|
<div class="fill-h" id="bmapChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-5 fill-h">
|
|
<div class="xpanel-wrapper xpanel-wrapper-2">
|
|
<div class="xpanel">
|
|
<div class="fill-h" id="heatmapChart"></div>
|
|
</div>
|
|
</div>
|
|
<div class="xpanel-wrapper xpanel-wrapper-2">
|
|
<div class="xpanel">
|
|
<div class="fill-h" id="coordChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
|
|
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
|
|
<script type="text/javascript" src="js/echarts-3.8.5.min.js"></script>
|
|
<script type="text/javascript" src="js/echarts-bmap.js"></script>
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
/*************** 基于百度地图的热力图 **************/
|
|
//初始化echarts实例
|
|
const bmapChart= echarts.init(document.getElementById("bmapChart"));
|
|
//配置
|
|
const bmapOpt = {
|
|
animation: false,
|
|
bmap: {
|
|
center: [120.13066322374, 30.240018034923],
|
|
zoom: 14,
|
|
roam: true
|
|
},
|
|
visualMap: {
|
|
show: false,
|
|
bottom: 45,
|
|
calculable: true,
|
|
seriesIndex: 0,
|
|
min: 0,
|
|
max: 5,
|
|
inRange: {
|
|
color: ['green', 'yellow', 'red']
|
|
}
|
|
},
|
|
series: [{
|
|
type: 'heatmap',
|
|
coordinateSystem: 'bmap', //基于百度地图
|
|
pointSize: 5,
|
|
blurSize: 6
|
|
}]
|
|
};
|
|
bmapChart.setOption(bmapOpt);
|
|
$.getJSON('data/bmap.json').done(function(data) {
|
|
bmapChart.setOption({
|
|
series: [{
|
|
data: data
|
|
}]
|
|
});
|
|
//添加百度地图插件
|
|
let bmap = bmapChart.getModel().getComponent('bmap').getBMap();
|
|
bmap.addControl(new BMap.MapTypeControl());
|
|
});
|
|
|
|
/*************** 笛卡尔坐标系上的热力图 **************/
|
|
//初始化echarts实例
|
|
const coordChart= echarts.init(document.getElementById("coordChart"));
|
|
//数据
|
|
const hours = ['12a', '0a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a', '10a', '11a', '12p',
|
|
'1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p'];
|
|
const days = ['Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon'];
|
|
//配置
|
|
const coordOpt = {
|
|
tooltip: {
|
|
position: 'top'
|
|
},
|
|
grid: {
|
|
top: 0,
|
|
bottom: 25,
|
|
left: 100,
|
|
right: 10,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: hours,
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: days,
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#fff'
|
|
},
|
|
visualMap: {
|
|
min: 0,
|
|
max: 10,
|
|
calculable: true,
|
|
left: 'left',
|
|
bottom: 20,
|
|
itemWidth: 10,
|
|
itemHeight: 80,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
series: [{
|
|
name: 'Coord Heatmap',
|
|
type: 'heatmap',
|
|
label: {
|
|
normal: {
|
|
show: true
|
|
}
|
|
},
|
|
itemStyle: {
|
|
emphasis: {
|
|
shadowBlur: 10,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
//渲染图表
|
|
coordChart.setOption(coordOpt)
|
|
$.getJSON('data/coord.json').done(function(data) {
|
|
let coordData = data.map(function(item) {
|
|
return [item[1], item[0], item[2] || '-'];
|
|
});
|
|
coordChart.setOption({
|
|
series: [{
|
|
name: 'Coord Heatmap',
|
|
data: coordData
|
|
}]
|
|
});
|
|
});
|
|
|
|
/******************* 热力图 **********************/
|
|
//初始化echarts实例
|
|
const heatmapChart = echarts.init(document.getElementById("heatmapChart"));
|
|
//heatmapChart.showLoading();
|
|
//数据
|
|
const heatmapXData = [];
|
|
const heatmapYData = [];
|
|
for(let i=0;i<=200;i++) {
|
|
heatmapXData.push(i);
|
|
if(i<100) {
|
|
heatmapYData.push(i);
|
|
}
|
|
}
|
|
//配置
|
|
const heatmapOpt = {
|
|
tooltip: {},
|
|
grid: {
|
|
top: 10,
|
|
bottom: 25,
|
|
left: 150,
|
|
right: 10,
|
|
backgroundColor: '#f00'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: heatmapXData
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: heatmapYData
|
|
},
|
|
axisLabel: {
|
|
color: '#fff'
|
|
},
|
|
visualMap: {
|
|
type: 'piecewise', //分段型
|
|
top: 0,
|
|
left: 0,
|
|
calculable: true,
|
|
realtime: false, //拖拽时，是否实时更新
|
|
min: 0,
|
|
max: 1,
|
|
splitNumber: 8,
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
inRange: {
|
|
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
|
|
}
|
|
},
|
|
series: [{
|
|
name: 'Heatmap',
|
|
type: 'heatmap',
|
|
progressive: 1000,
|
|
animation: false,
|
|
itemStyle: {
|
|
emphasis: {
|
|
borderColor: '#333',
|
|
borderWidth: 1
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
//渲染图表
|
|
heatmapChart.setOption(heatmapOpt);
|
|
$.getJSON('data/heatmap.json').done(function(data) {
|
|
//heatmapChart.hideLoading();
|
|
heatmapChart.setOption({
|
|
series: [{
|
|
name: 'Heatmap',
|
|
data: data
|
|
}]
|
|
});
|
|
});
|
|
|
|
/********** 窗口大小改变时，重置报表大小 ********************/
|
|
window.onresize = function() {
|
|
bmapChart.resize();
|
|
heatmapChart.resize();
|
|
coordChart.resize();
|
|
};
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |