Add Distribution Panel
This commit is contained in:
parent
e0fdeba959
commit
b9fb55eb3a
196518
heatmapData.js
196518
heatmapData.js
File diff suppressed because it is too large
Load Diff
196
index.html
196
index.html
|
@ -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>
|
||||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue