|
|
@@ -0,0 +1,97 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <title>温度监控</title>
|
|
|
+ <script type="text/javascript" src="./static/echarts.min.js"></script>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="charts" class="chart-container" style="width:900px; height:500px;"></div>
|
|
|
+ <script>
|
|
|
+ // init echarts
|
|
|
+ const dom = document.getElementById('charts')
|
|
|
+ const chart = echarts.init(dom)
|
|
|
+ const Arr = []
|
|
|
+ const option = {
|
|
|
+ backgroundColor: 'white',
|
|
|
+ grid: {
|
|
|
+ top: '30%',
|
|
|
+ left: '20%',
|
|
|
+ right: '20%',
|
|
|
+ bottom: '30%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: [],
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#E5E6EB',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#86909C',
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: [{
|
|
|
+ type: 'value',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#000",
|
|
|
+ fontSize: 14,
|
|
|
+ padding: [0, 0, 0, 30]
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#4E5969',
|
|
|
+ fontSize: 12
|
|
|
+ },
|
|
|
+ splitLine: { //网格线
|
|
|
+ "show": false,
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: false,
|
|
|
+ barWidth: 20,
|
|
|
+ data: [],
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#4080FF",
|
|
|
+ width: 2
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ function getData() {
|
|
|
+ fetch('http://127.0.0.1:5673/data', { method: 'GET', Headers: { 'Content-Type': 'application/json' } }).then((res => res.json())).then(res => {
|
|
|
+ if (Arr.length > 300) Arr.shift()
|
|
|
+ Arr.push(res)
|
|
|
+ const series = Arr.map(el=>el.value)
|
|
|
+ const xAxis = Arr.map(el => el.time)
|
|
|
+ option.xAxis.data = xAxis
|
|
|
+ option.series[0].data = series
|
|
|
+ chart.setOption(option)
|
|
|
+ console.log('服务器回来的数据',res,Arr);
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ getData()
|
|
|
+ // 每3秒请求一次数据
|
|
|
+ setInterval(() => {
|
|
|
+ getData()
|
|
|
+ }, 3000);
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
