76 lines
1.2 KiB
Vue
76 lines
1.2 KiB
Vue
<template>
|
|
<div class="charts" style="background: #fff; padding: 15px">
|
|
<a-card title="cpu使用率" :bordered="false" style="width: 350px;height:350px" >
|
|
<echarts class="chart" :option="option" />
|
|
</a-card>
|
|
|
|
<a-card title="memory使用率" :bordered="false" style="width: 350px;height:350px" >
|
|
<echarts class="chart" :option="memory" />
|
|
</a-card>
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref} from "vue";
|
|
const option = ref( {
|
|
tooltip: {
|
|
formatter: '{a} <br/>{b} : {c}%'
|
|
},
|
|
series: [
|
|
{
|
|
name: 'cpu',
|
|
type: 'gauge',
|
|
detail: {
|
|
formatter: '{value}'
|
|
},
|
|
data: [
|
|
{
|
|
value: 60,
|
|
name: 'cpu'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
})
|
|
|
|
const memory = ref( {
|
|
tooltip: {
|
|
formatter: '{a} <br/>{b} : {c}%'
|
|
},
|
|
series: [
|
|
{
|
|
name: 'memory',
|
|
type: 'gauge',
|
|
progress: {
|
|
show: true
|
|
},
|
|
detail: {
|
|
valueAnimation: true,
|
|
formatter: '{value}'
|
|
},
|
|
data: [
|
|
{
|
|
value: 71.5,
|
|
name: 'memory'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
})
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
.chart{
|
|
|
|
height: 300px;
|
|
width: 300px;
|
|
}
|
|
.charts{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
</style> |