<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>