Add Distribution Panel

This commit is contained in:
SkyWT 2023-12-14 21:01:36 +08:00
parent e0fdeba959
commit b9fb55eb3a
3 changed files with 192458 additions and 6233 deletions

File diff suppressed because it is too large Load Diff

View File

@ -27,14 +27,29 @@
<body> <body>
<div id="container"></div> <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 <div
class="fixed border rounded-lg shadow-xl bottom-4 left-4 right-4 bg-white" 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"> <div class="flex flex-row flex-nowrap items-center p-4">
<button <button
class="h-7 w-7 rounded-full transition-all hover:bg-slate-200 mb-6 mx-1" class="h-7 w-7 rounded-full transition-all hover:bg-slate-200 mb-6 mx-1"
id="play-btn" id="toggle-play-btn"
onclick="startOrPause()" onclick="togglePlay()"
> >
<i class="ri-play-line"></i> <i class="ri-play-line"></i>
</button> </button>
@ -42,7 +57,7 @@
<input <input
type="range" type="range"
min="0" min="0"
max="11" max="23"
value="0" value="0"
id="control-bar" id="control-bar"
class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200" class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200"
@ -56,6 +71,9 @@
--> -->
<div <div
class="-bottom-6 flex w-full flex-nowrap justify-between px-2 text-sm text-gray-500" 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="relative">
<span class="absolute left-1/2 -translate-x-1/2">1</span></span <span class="absolute left-1/2 -translate-x-1/2">1</span></span
@ -93,6 +111,39 @@
<span class="relative"> <span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">12</span></span <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>
</div> </div>
@ -104,19 +155,108 @@
}; };
</script> </script>
<script src="https://webapi.amap.com/maps?v=2.0&key=13471667a960ce7a08b3dfdd9a4fb193"></script> <script src="https://webapi.amap.com/maps?v=2.0&key=13471667a960ce7a08b3dfdd9a4fb193"></script>
<script src="./heatmapData.js"></script> <script type="text/javascript" src="./static/echarts.min.js"></script>
<script type="text/javascript" src="./heatmapData.js"></script>
<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,
data: [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
],
},
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,
data: [
30000, 28000, 25000, 26000, 27000, 30000, 55000, 50000, 40000,
39000, 38000, 39000, 27000, 25000, 30000, 32000, 31000, 25000,
23000, 10000, 12000, 12300, 25000, 26000, 30000,
],
markArea: {
itemStyle: { color: "rgba(255, 173, 177, 0.4)" },
data: [[{ name: "Now", xAxis: "0" }, { xAxis: "1" }]],
},
},
],
grid: {
left: "15%",
right: 0,
bottom: "10%",
},
};
chart.setOption(option);
var map = new AMap.Map("container", { var map = new AMap.Map("container", {
resizeEnable: true, resizeEnable: true,
center: [116.418261, 39.921984], // 配置地图中心的经纬度 center: [116.418261, 39.921984], // 配置地图中心的经纬度
zoom: 11, zoom: 11,
}); });
if (!isSupportCanvas()) {
alert("您所使用的浏览器不能使用热力图功能,请换个浏览器试试~");
}
// heatmap.js document: // heatmap.js document:
// http://www.patrick-wied.at/static/heatmapjs/docs.html // http://www.patrick-wied.at/static/heatmapjs/docs.html
/* visible 热力图是否显示, 默认为 true /* visible 热力图是否显示, 默认为 true
@ -153,11 +293,6 @@
}); });
}); });
function isSupportCanvas() {
var elem = document.createElement("canvas");
return !!(elem.getContext && elem.getContext("2d"));
}
function showHeatmap() { function showHeatmap() {
heatmap.show(); heatmap.show();
} }
@ -167,21 +302,31 @@
} }
function updateData(value) { function updateData(value) {
option.series[0].markArea.data = [
[
{
name: "Now",
xAxis: value.toString(),
},
{ xAxis: (parseInt(value) + 1).toString() },
],
];
chart.setOption(option);
heatmap.setDataSet({ heatmap.setDataSet({
data: heatmapData[value], data: heatmapData[value],
max: 100, max: 100,
}); });
} }
function startOrPause() { function togglePlay() {
let btn = document.getElementById("toggle-play-btn");
if (playing) { if (playing) {
playing = false; playing = false;
let btn = document.getElementById("play-btn");
btn.innerHTML = '<i class="ri-play-line"></i>'; btn.innerHTML = '<i class="ri-play-line"></i>';
stopPlay(); stopPlay();
} else { } else {
playing = true; playing = true;
let btn = document.getElementById("play-btn");
btn.innerHTML = '<i class="ri-pause-line"></i>'; btn.innerHTML = '<i class="ri-pause-line"></i>';
startPlay(); startPlay();
} }
@ -190,18 +335,29 @@
function startPlay() { function startPlay() {
let slider = document.getElementById("control-bar"); let slider = document.getElementById("control-bar");
intervalID = setInterval(function () { intervalID = setInterval(function () {
if (slider.value < 11) { if (slider.value < 23) {
slider.value++; slider.value++;
updateData(slider.value);
} else { } else {
startOrPause(); slider.value = 0;
} }
updateData(slider.value);
}, 100); // Do every 100ms }, 100); // Do every 100ms
} }
function stopPlay() { function stopPlay() {
clearInterval(intervalID); 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> </script>
</body> </body>
</html> </html>

45
static/echarts.min.js vendored Normal file

File diff suppressed because one or more lines are too long