50 lines
1.1 KiB
Plaintext
50 lines
1.1 KiB
Plaintext
<template>
|
|
<div ref="chartRef" :style="{ height, width }"></div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { onMounted, PropType, ref, Ref } from 'vue';
|
|
import { useECharts } from '@/hooks/web/useECharts';
|
|
|
|
const props = defineProps({
|
|
width: {
|
|
type: String as PropType<string>,
|
|
default: '100%',
|
|
},
|
|
height: {
|
|
type: String as PropType<string>,
|
|
default: '300px',
|
|
},
|
|
data: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
});
|
|
const chartRef = ref<HTMLDivElement | null>(null);
|
|
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
|
|
|
const option = {
|
|
tooltip: {
|
|
formatter: '{a} <br/>{b} : {c}%',
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Pressure',
|
|
type: 'gauge',
|
|
radius: '100%',
|
|
detail: {
|
|
formatter: '{value}'+'M',
|
|
},
|
|
data: [
|
|
{
|
|
value: props.data,
|
|
name: '内存消耗',
|
|
},
|
|
],
|
|
}
|
|
]
|
|
};
|
|
|
|
onMounted(() => {
|
|
setOptions(option as any);
|
|
});
|
|
</script> |