完成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",
|
"@element-plus/icons-vue": "^2.1.0",
|
||||||
"@vueuse/core": "^10.3.0",
|
"@vueuse/core": "^10.3.0",
|
||||||
"axios": "^1.4.0",
|
"axios": "^1.4.0",
|
||||||
|
"echarts": "^5.4.3",
|
||||||
"element-plus": "^2.3.9",
|
"element-plus": "^2.3.9",
|
||||||
"flag-icon-css": "^4.1.7",
|
"flag-icon-css": "^4.1.7",
|
||||||
"vue": "^3.3.4",
|
"vue": "^3.3.4",
|
||||||
@ -868,6 +869,20 @@
|
|||||||
"node": ">=0.4.0"
|
"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": {
|
"node_modules/element-plus": {
|
||||||
"version": "2.3.9",
|
"version": "2.3.9",
|
||||||
"resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.3.9.tgz",
|
"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",
|
"resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz",
|
||||||
"integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==",
|
"integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==",
|
||||||
"dev": true
|
"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",
|
"@element-plus/icons-vue": "^2.1.0",
|
||||||
"@vueuse/core": "^10.3.0",
|
"@vueuse/core": "^10.3.0",
|
||||||
"axios": "^1.4.0",
|
"axios": "^1.4.0",
|
||||||
|
"echarts": "^5.4.3",
|
||||||
"element-plus": "^2.3.9",
|
"element-plus": "^2.3.9",
|
||||||
"flag-icon-css": "^4.1.7",
|
"flag-icon-css": "^4.1.7",
|
||||||
"vue": "^3.3.4",
|
"vue": "^3.3.4",
|
||||||
|
|||||||
@ -3,6 +3,7 @@ import {computed, reactive, watch} from "vue";
|
|||||||
import {get, post} from "@/net";
|
import {get, post} from "@/net";
|
||||||
import {copyIp, cpuNameToImage, fitByUnit, osNameToIcon, percentageToStatus, rename} from "@/tools";
|
import {copyIp, cpuNameToImage, fitByUnit, osNameToIcon, percentageToStatus, rename} from "@/tools";
|
||||||
import {ElMessage} from "element-plus";
|
import {ElMessage} from "element-plus";
|
||||||
|
import RuntimeHistory from "@/component/RuntimeHistory.vue";
|
||||||
|
|
||||||
const locations = [
|
const locations = [
|
||||||
{name: 'cn', desc: '中国大陆'},
|
{name: 'cn', desc: '中国大陆'},
|
||||||
@ -75,6 +76,7 @@ watch(() => props.id, init, { immediate: true })
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<el-scrollbar>
|
||||||
<div class="client-details" v-loading="Object.keys(details.base).length === 0">
|
<div class="client-details" v-loading="Object.keys(details.base).length === 0">
|
||||||
<div v-if="Object.keys(details.base).length">
|
<div v-if="Object.keys(details.base).length">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
@ -199,10 +201,12 @@ watch(() => props.id, init, { immediate: true })
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<runtime-history style="margin-top: 20px" :data="details.runtime.list"/>
|
||||||
</div>
|
</div>
|
||||||
<el-empty description="服务器处于离线状态，请检查服务器是否正常运行" v-else/>
|
<el-empty description="服务器处于离线状态，请检查服务器是否正常运行" v-else/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</el-scrollbar>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<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