新手,新手。
1 这里是我伪造的数据。(因为自己得到的这些数据比较繁琐,所以就伪造了这些数据 )
@RestController
public class HelloController{
@RequestMapping("/go")
public Map<String,Object> list(){
Map<String,Object>map = new HashMap<>();
map.put("192.168.52.71",73482);
map.put("192.168.52.123",73329);
map.put("192.168.152.160",22989);
map.put("192.168.152.86",593);
map.put("192.168.152.161",23075);
map.put("192.168.152.203",1);
map.put("192.168.152.84",634);
map.put("192.168.152.87",365);
map.put("192.168.51.59",44);
return map;
}
}
2 现在后端数据有了,就需要前端拿到这个数据,并且展示到echarts模板中。我这里使用的是ajax。
<!DOCTYPE html>
<html lang="en" xmlns:th=www.thymeleaf.org>
<head>
<meta charset="UTF-8">
<title>ECharts</title>
<script src="../static/js/jquery-3.4.1.js"></script>
<script src="../static/js/echarts.min.js"></script>
<!--引入jQuery和echarts -->
</head>
<body>
<!-- 为 ECharts 准备一个页面大小 -->
<div id="main" style="width: 4500px;height:900px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
//这里我用的是一个折线图。就需要两个数组存储横坐标和纵坐标。
const ip = [];
const nums = [];
$.ajax({
type:"get",
data:{},
url:"http://localhost:8080/go",
dataType:"json",
//这里就得到了result。就是后端map存储的数据,返回为json。
success:function (result) {
if (result) {
//下面就是对result进行循环遍历。
for (const p in result) {
console.info(p + ":" + result[p]);
ip.push(p)
nums.push(result[p])
}
myChart.setOption({
xAxis: {
type: 'category',
data: ip,
// axisLabel: { //坐标轴刻度标签的相关设置
// interval: 0,
// rotate:'70',//旋转度数
// },
},
yAxis: {
},
series: [
{
data: nums,
type: 'line'
}
]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
</script>
</body>
</html>
3 实现跳转。
@Controller
public class EchartsController {
@RequestMapping("/test")
public String test(){
return "test";
}