skywt
/
WaterHeatmap
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
WaterHeatmap/index.html

323 lines
9.8 KiB
HTML
Raw Normal View History

Add Distribution Panel
2023-12-14 21:01:36 +08:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<title>热力图</title>
<script src="./static/tailwind.min.js"></script>
<link href="./static/remixicon/remixicon.css" rel="stylesheet" />
<style>
html,
body,
#container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<button
id="toggle-chart-btn"
class="h-7 w-7 rounded-full border shadow-xl transition-all hover:bg-slate-200 mb-6 mx-1 fixed right-2 top-2 bg-white"
onclick="toggleChart()"
>
<i class="ri-bar-chart-line"></i>
</button>
<div
id="chart-box"
class="rounded-2xl shadow-2xl transition-all border fixed top-10 right-2 p-4 backdrop-blur-xl bg-white bg-opacity-70"
>
<div id="linegraph" class="w-96 h-64"></div>
</div>
<div
id="control-box"
class="fixed border rounded-2xl shadow-xl bottom-4 left-4 right-4 backdrop-blur-xl bg-white bg-opacity-70"
>
<div class="flex flex-row flex-nowrap items-center p-4">
<button
class="h-7 w-7 rounded-full transition-all hover:bg-slate-200 mb-6 mx-1"
id="toggle-play-btn"
onclick="togglePlay()"
>
<i class="ri-play-line"></i>
</button>
<div class="grow relative mb-6 mx-1">
<input
type="range"
min="0"
max="23"
value="0"
id="control-bar"
class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200"
oninput="updateData(this.value)"
/>
<div
class="-bottom-6 flex w-full flex-nowrap justify-between px-2 text-sm text-gray-500"
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">0</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">1</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">2</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">3</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">4</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">5</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">6</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">7</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">8</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">9</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">10</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">11</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">12</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">13</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">14</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">15</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">16</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">17</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">18</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">19</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">20</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">21</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">22</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">23</span></span
>
</div>
</div>
</div>
</div>
Generate dataset
2023-12-22 15:14:24 +08:00
<script type="text/javascript" src="./static/echarts.min.js"></script>
<script type="text/javascript" src="./heatmapData.js"></script>
<script type="text/javascript" src="./data.js"></script>
Add Distribution Panel
2023-12-14 21:01:36 +08:00
<script type="text/javascript">
window._AMapSecurityConfig = {
Generate dataset
2023-12-22 15:14:24 +08:00
securityJsCode: data.gaode.securityJsCode,
Add Distribution Panel
2023-12-14 21:01:36 +08:00
};
</script>
<script src="https://webapi.amap.com/maps?v=2.0&key=13471667a960ce7a08b3dfdd9a4fb193"></script>
<script>
var chartEle = document.getElementById("linegraph");
var chart = echarts.init(chartEle, null, {
renderer: "canvas",
useDirtyRect: false,
});
var app = {};
var option = {
title: {
text: "Distribution of Water",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
},
// toolbox: {
// show: true,
// feature: {
// saveAsImage: {},
// },
// },
xAxis: {
type: "category",
boundaryGap: false,
Generate dataset
2023-12-22 15:14:24 +08:00
data: data.chart.xAxis,
Add Distribution Panel
2023-12-14 21:01:36 +08:00
},
yAxis: {
type: "value",
axisLabel: {
formatter: "{value} T",
},
axisPointer: {
snap: true,
},
},
visualMap: {
show: false,
dimension: 0,
pieces: [{ gt: 0, lte: 24, color: "green" }],
padding: 0,
},
series: [
{
name: "Water",
type: "line",
smooth: true,
Generate dataset
2023-12-22 15:14:24 +08:00
data: data.chart.series,
Add Distribution Panel
2023-12-14 21:01:36 +08:00
markArea: {
itemStyle: { color: "rgba(255, 173, 177, 0.4)" },
data: [[{ name: "Now", xAxis: "0" }, { xAxis: "1" }]],
},
},
],
grid: {
left: "15%",
Fix chart bias
2023-12-14 22:50:41 +08:00
right: 10,
Add Distribution Panel
2023-12-14 21:01:36 +08:00
bottom: "10%",
},
};
chart.setOption(option);
var map = new AMap.Map("container", {
resizeEnable: true,
Generate dataset
2023-12-22 15:14:24 +08:00
center: data.center,
zoom: data.zoom,
Add Distribution Panel
2023-12-14 21:01:36 +08:00
});
// heatmap.js document:
// http://www.patrick-wied.at/static/heatmapjs/docs.html
var heatmap;
var playing = false;
map.plugin(["AMap.HeatMap"], function () {
heatmap = new AMap.HeatMap(map, {
Generate dataset
2023-12-22 15:14:24 +08:00
radius: 25, // 每个点的半径大小
Add Distribution Panel
2023-12-14 21:01:36 +08:00
opacity: [0, 0.8],
Generate dataset
2023-12-22 15:14:24 +08:00
gradient: {
0.1: "rgb(255, 255, 255)",
0.2: "rgb(225, 225, 255)",
0.3: "rgb(195, 195, 255)",
0.4: "rgb(175, 175, 255)",
0.5: "rgb(155, 155, 255)",
0.6: "rgb(135, 135, 255)",
0.7: "rgb(115, 115, 255)",
0.8: "rgb( 95, 95, 255)",
0.9: "rgb( 75, 75, 255)",
1.0: "rgb( 55, 55, 255)",
},
Add Distribution Panel
2023-12-14 21:01:36 +08:00
});
heatmap.setDataSet({
Generate dataset
2023-12-22 15:14:24 +08:00
max: 1000,
Add Distribution Panel
2023-12-14 21:01:36 +08:00
data: heatmapData[0],
});
});
function showHeatmap() {
heatmap.show();
}
function hideHeatmap() {
heatmap.hide();
}
function updateData(value) {
option.series[0].markArea.data = [
[
{
name: "Now",
xAxis: value.toString(),
},
Generate dataset
2023-12-22 15:14:24 +08:00
{
xAxis: (parseInt(value) + 1).toString(),
},
Add Distribution Panel
2023-12-14 21:01:36 +08:00
],
];
chart.setOption(option);
heatmap.setDataSet({
data: heatmapData[value],
Generate dataset
2023-12-22 15:14:24 +08:00
max: 1000,
Add Distribution Panel
2023-12-14 21:01:36 +08:00
});
}
function togglePlay() {
let btn = document.getElementById("toggle-play-btn");
if (playing) {
playing = false;
btn.innerHTML = '<i class="ri-play-line"></i>';
stopPlay();
} else {
playing = true;
btn.innerHTML = '<i class="ri-pause-line"></i>';
startPlay();
}
}
function startPlay() {
let slider = document.getElementById("control-bar");
intervalID = setInterval(function () {
if (slider.value < 23) {
slider.value++;
} else {
slider.value = 0;
}
updateData(slider.value);
}, 100); // Do every 100ms
}
function stopPlay() {
clearInterval(intervalID);
}
var temp;
function toggleChart() {
let chartBox = document.getElementById("chart-box");
if (chartBox.style.display !== "none") {
temp = chartBox.style.display;
chartBox.style.display = "none";
} else {
chartBox.style.display = temp;
}
}
</script>
</body>
</html>