@ -6,7 +6,7 @@
< style >
< style >
.echart{
.echart{
width: 100%;
width: 100%;
height: 98 %;
height: 43 %;
background-color: white;
background-color: white;
margin-top: 10px;
margin-top: 10px;
border-radius: 10px;
border-radius: 10px;
@ -24,10 +24,13 @@
< div class = "container-div" id = "app" >
< div class = "container-div" id = "app" >
< div class = "row" >
< div class = "row" >
< div class = "echart" >
< div class = "echart" >
< div class = "children_echarts left_echarts" style = "width: 30%;padding-top: 10px;" >
< div class = "children_echarts left_echarts" >
< div id = "leftMain" style = "width: 400px;height:500px" > < / div >
< div id = "leftMain" style = "width: 600px;height:330px" > < / div >
< / div >
< div class = "children_echarts right_echarts" >
< div id = "rightMain" style = "width: 600px;height:330px" > < / div >
< / div >
< / div >
< / div >
< div class = "children_echarts right_echarts" style = "width: 70%" >
< div class = "col-sm-12 search-collapse" >
< div class = "col-sm-12 search-collapse" >
< form id = "formId" >
< form id = "formId" >
< div class = "select-list" >
< div class = "select-list" >
@ -66,13 +69,10 @@
< / div >
< / div >
< / form >
< / form >
< / div >
< / div >
< div class = "col-sm-12 select-table table-striped" style = "min-height: 8 4%">
< div class = "col-sm-12 select-table table-striped" style = "min-height: 4 4%">
< table id = "bootstrap-table" > < / table >
< table id = "bootstrap-table" > < / table >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< th:block th:include = "include :: footer" / >
< th:block th:include = "include :: footer" / >
< th:block th:include = "include :: echarts-js" / >
< th:block th:include = "include :: echarts-js" / >
@ -208,12 +208,11 @@
if (response.data.code == web_status.SUCCESS){
if (response.data.code == web_status.SUCCESS){
myChart.setOption({
myChart.setOption({
title: {
title: {
text: '网络设备密级 统计'
text: '网络终端数 统计'
},
},
tooltip: {},
tooltip: {},
legend: {
legend: {
data:['设备密级'],
data:['终端数'],
bottom: 'bottom',
},
},
xAxis: {
xAxis: {
data: response.data.data.xAxisData
data: response.data.data.xAxisData
@ -223,7 +222,7 @@
},
},
series: [
series: [
{
{
name: '设备密级 ',
name: '终端数 ',
type: 'bar',
type: 'bar',
data: response.data.data.yAxisData,
data: response.data.data.yAxisData,
itemStyle: {
itemStyle: {
@ -232,7 +231,36 @@
}
}
]
]
});
});
console.log(response.data.data)
}
})
var rightMain = echarts.init(document.getElementById('rightMain'));
axios.post(prefix + '/countNetInfo').then(response => {
if (response.data.code == web_status.SUCCESS){
rightMain.setOption({
title: {
text: '网络设备种类统计'
},
tooltip: {},
legend: {
data:['设备种类'],
},
xAxis: {
data: response.data.data.xAxisData
},
yAxis: {
},
series: [
{
name: '设备种类',
type: 'bar',
data: response.data.data.yAxisData,
itemStyle: {
color: '#4e9bf1'
}
}
]
});
}
}
})
})
< / script >
< / script >