完成Echarts数据展示
This commit is contained in:
parent
901e8c01e9
commit
6952d2e8a3
28
itbaima-monitor-web/package-lock.json
generated
28
itbaima-monitor-web/package-lock.json
generated
@ -11,6 +11,7 @@
|
||||
"@element-plus/icons-vue": "^2.1.0",
|
||||
"@vueuse/core": "^10.3.0",
|
||||
"axios": "^1.4.0",
|
||||
"echarts": "^5.4.3",
|
||||
"element-plus": "^2.3.9",
|
||||
"flag-icon-css": "^4.1.7",
|
||||
"vue": "^3.3.4",
|
||||
@ -868,6 +869,20 @@
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts": {
|
||||
"version": "5.4.3",
|
||||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz",
|
||||
"integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0",
|
||||
"zrender": "5.4.4"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts/node_modules/tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
|
||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
|
||||
},
|
||||
"node_modules/element-plus": {
|
||||
"version": "2.3.9",
|
||||
"resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.3.9.tgz",
|
||||
@ -1889,6 +1904,19 @@
|
||||
"resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz",
|
||||
"integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/zrender": {
|
||||
"version": "5.4.4",
|
||||
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz",
|
||||
"integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/zrender/node_modules/tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
|
||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
"@element-plus/icons-vue": "^2.1.0",
|
||||
"@vueuse/core": "^10.3.0",
|
||||
"axios": "^1.4.0",
|
||||
"echarts": "^5.4.3",
|
||||
"element-plus": "^2.3.9",
|
||||
"flag-icon-css": "^4.1.7",
|
||||
"vue": "^3.3.4",
|
||||
|
||||
@ -3,6 +3,7 @@ import {computed, reactive, watch} from "vue";
|
||||
import {get, post} from "@/net";
|
||||
import {copyIp, cpuNameToImage, fitByUnit, osNameToIcon, percentageToStatus, rename} from "@/tools";
|
||||
import {ElMessage} from "element-plus";
|
||||
import RuntimeHistory from "@/component/RuntimeHistory.vue";
|
||||
|
||||
const locations = [
|
||||
{name: 'cn', desc: '中国大陆'},
|
||||
@ -75,6 +76,7 @@ watch(() => props.id, init, { immediate: true })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-scrollbar>
|
||||
<div class="client-details" v-loading="Object.keys(details.base).length === 0">
|
||||
<div v-if="Object.keys(details.base).length">
|
||||
<div class="title">
|
||||
@ -199,10 +201,12 @@ watch(() => props.id, init, { immediate: true })
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<runtime-history style="margin-top: 20px" :data="details.runtime.list"/>
|
||||
</div>
|
||||
<el-empty description="服务器处于离线状态，请检查服务器是否正常运行" v-else/>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
97
itbaima-monitor-web/src/component/RuntimeHistory.vue
Normal file
97
itbaima-monitor-web/src/component/RuntimeHistory.vue
Normal file
@ -0,0 +1,97 @@
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import {onMounted, watch} from "vue";
|
||||
import {defaultOption, doubleSeries, singleSeries} from "@/echarts";
|
||||
|
||||
const charts = []
|
||||
|
||||
const props = defineProps({
|
||||
data: Object
|
||||
})
|
||||
|
||||
const localTimeLine = list => list.map(item => new Date(item.timestamp).toLocaleString())
|
||||
|
||||
function updateCpuUsage(list) {
|
||||
const chart = charts[0]
|
||||
let data = list.map(item => (item.cpuUsage * 100).toFixed(1))
|
||||
const option = defaultOption('CPU(%)', localTimeLine(list))
|
||||
singleSeries(option, 'CPU使用率(%)', data, ['#72c4fe', '#72d5fe', '#2b6fd733'])
|
||||
chart.setOption(option)
|
||||
}
|
||||
|
||||
function updateMemoryUsage(list) {
|
||||
const chart = charts[1]
|
||||
let data = list.map(item => (item.memoryUsage * 1024).toFixed(1));
|
||||
const option = defaultOption('内存(MB)', localTimeLine(list))
|
||||
singleSeries(option, '内存使用(MB)', data, ['#6be3a3', '#bbfad4', '#A5FFD033'])
|
||||
chart.setOption(option);
|
||||
}
|
||||
|
||||
function updateNetworkUsage(list) {
|
||||
const chart = charts[2]
|
||||
let data = [
|
||||
list.map(item => item.networkUpload),
|
||||
list.map(item => item.networkDownload)
|
||||
]
|
||||
const option = defaultOption('网络(KB/s)', localTimeLine(list))
|
||||
doubleSeries(option, ['上传(KB/s)', '下载(KB/s)'], data, [
|
||||
['#f6b66e', '#ffd29c', '#fddfc033'],
|
||||
['#79c7ff', '#3cabf3', 'rgba(192,242,253,0.2)']
|
||||
])
|
||||
chart.setOption(option);
|
||||
}
|
||||
|
||||
function updateDiskUsage(list) {
|
||||
const chart = charts[3]
|
||||
let data = [
|
||||
list.map(item => item.diskRead.toFixed(1)),
|
||||
list.map(item => item.diskWrite.toFixed(1))
|
||||
]
|
||||
const option = defaultOption('磁盘(MB/s)', localTimeLine(list))
|
||||
doubleSeries(option, ['读取(MB/s)', '写入(MB/s)'], data, [
|
||||
['#d2d2d2', '#d5d5d5', 'rgba(199,199,199,0.2)'],
|
||||
['#757575', '#7c7c7c', 'rgba(94,94,94,0.2)']
|
||||
])
|
||||
chart.setOption(option);
|
||||
}
|
||||
|
||||
function initCharts() {
|
||||
const chartList = [
|
||||
document.getElementById('cpuUsage'),
|
||||
document.getElementById('memoryUsage'),
|
||||
document.getElementById('networkUsage'),
|
||||
document.getElementById('diskUsage')
|
||||
]
|
||||
for (let i = 0; i < chartList.length; i++) {
|
||||
const chart = chartList[i]
|
||||
charts[i] = echarts.init(chart)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initCharts()
|
||||
watch(() => props.data, list => {
|
||||
updateCpuUsage(list)
|
||||
updateMemoryUsage(list)
|
||||
updateNetworkUsage(list)
|
||||
updateDiskUsage(list)
|
||||
}, { immediate: true, deep: true })
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="charts">
|
||||
<div id="cpuUsage" style="width: 100%;height:170px"></div>
|
||||
<div id="memoryUsage" style="width: 100%;height:170px"></div>
|
||||
<div id="networkUsage" style="width: 100%;height:170px"></div>
|
||||
<div id="diskUsage" style="width: 100%;height:170px"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.charts {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 20px;
|
||||
}
|
||||
</style>
|
||||
123
itbaima-monitor-web/src/echarts/index.js
Normal file
123
itbaima-monitor-web/src/echarts/index.js
Normal file
@ -0,0 +1,123 @@
|
||||
import * as echarts from "echarts";
|
||||
|
||||
function defaultOption(name, dataX) {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
position: function (pt) {
|
||||
return [pt[0], pt[1]];
|
||||
},
|
||||
confine: true,
|
||||
padding: 3,
|
||||
backgroundColor: '#FFFFFFE0',
|
||||
textStyle: {
|
||||
fontSize: 13
|
||||
}
|
||||
}, grid:{
|
||||
left: '10',
|
||||
right: '15',
|
||||
bottom: '0',
|
||||
top: '30',
|
||||
containLabel: true
|
||||
}, xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: dataX,
|
||||
animation: false,
|
||||
axisLabel: {
|
||||
formatter: function (value) {
|
||||
value = new Date(value)
|
||||
let time = value.toLocaleTimeString();
|
||||
time = time.substring(0, time.length - 3)
|
||||
const date = [value.getDate() + 1, value.getMonth() + 1].join('/')
|
||||
return `${time}\n${date}`;
|
||||
}
|
||||
}
|
||||
}, yAxis: {
|
||||
type: 'value',
|
||||
name: name,
|
||||
boundaryGap: [0, '10%']
|
||||
}, dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
start: 95,
|
||||
end: 100,
|
||||
minValueSpan: 12
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
function singleSeries(option, name, dataY, colors) {
|
||||
option.series = [
|
||||
{
|
||||
name: name,
|
||||
type: 'line',
|
||||
sampling: 'lttb',
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
color: colors[0]
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: colors[1]
|
||||
}, {
|
||||
offset: 1,
|
||||
color: colors[2]
|
||||
}
|
||||
])
|
||||
},
|
||||
data: dataY
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function doubleSeries(option, name, dataY, colors) {
|
||||
option.series = [
|
||||
{
|
||||
name: name[0],
|
||||
type: 'line',
|
||||
sampling: 'lttb',
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
color: colors[0][0]
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: colors[0][1]
|
||||
}, {
|
||||
offset: 1,
|
||||
color: colors[0][2]
|
||||
}
|
||||
])
|
||||
},
|
||||
data: dataY[0]
|
||||
}, {
|
||||
name: name[1],
|
||||
type: 'line',
|
||||
sampling: 'lttb',
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
color: colors[1][0]
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: colors[1][1]
|
||||
}, {
|
||||
offset: 1,
|
||||
color: colors[1][2]
|
||||
}
|
||||
])
|
||||
},
|
||||
data: dataY[1]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export { defaultOption, singleSeries, doubleSeries }
|
||||
Loading…
x
Reference in New Issue
Block a user