You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
2.3 KiB
HTML
84 lines
2.3 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" http-equiv="refresh" content="60; url=http://127.0.0.1:8086/{{.index}}">
|
|
<script src="https://go-echarts.github.io/go-echarts-assets/assets/echarts.min.js"></script>
|
|
<script src="https://go-echarts.github.io/go-echarts-assets/assets/echarts-gl.min.js"></script>
|
|
<title>当日地震</title>
|
|
</head>
|
|
<body>
|
|
|
|
<style>
|
|
.area
|
|
{
|
|
width: 100%;
|
|
height: height: 100vh;
|
|
display: flex;
|
|
}
|
|
.left
|
|
{
|
|
width: 50%;
|
|
height: 100%;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
.right
|
|
{
|
|
width: 50%;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
</style>
|
|
<div class="area">
|
|
<div class="left">
|
|
<div class="item" id="3dcharts" style="width:1000px;height:800px;"></div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
"use strict";
|
|
let eq3dcharts = echarts.init(document.getElementById('3dcharts'), "white");
|
|
let option = {
|
|
"color":["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc"],
|
|
"grid3D":{},
|
|
"legend":{"show":false},
|
|
"series":[
|
|
{"name":"scatter3d",
|
|
"type":"scatter3D",
|
|
"waveAnimation":false,
|
|
"coordinateSystem":"cartesian3D",
|
|
"renderLabelForZeroData":false,
|
|
"selectedMode":false,
|
|
"animation":false,
|
|
"data":[
|
|
{{.eq3d}}
|
|
]
|
|
},
|
|
{"name":"sta3d",
|
|
"type":"scatter3D",
|
|
"waveAnimation":false,
|
|
"coordinateSystem":"cartesian3D",
|
|
"renderLabelForZeroData":false,
|
|
"selectedMode":false,
|
|
"animation":false,
|
|
"data":[
|
|
{{.sta3d}}
|
|
]
|
|
}
|
|
],
|
|
"title":{"text":"地震三维分布"},
|
|
"tooltip":{"show":false},
|
|
"visualMap":[{"calculable":true,"min":-1,"max":0,"symbol":"triangle","inRange":{"color":["#313695","#4575b4","#74add1","#abd9e9","#e0f3f8","#fee090","#fdae61","#f46d43","#d73027","#a50026"]}}],"xAxis3D":{},"yAxis3D":{},"zAxis3D":{}
|
|
};
|
|
eq3dcharts.setOption(option);
|
|
</script>
|
|
<div class="right" style="word-spacing:30px">
|
|
<center>
|
|
{{.eqtable}}
|
|
</center>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html> |