LoongPanel-Asp/web/components/Charts/PieChart.vue

51 lines
993 B
Vue
Raw Normal View History

2024-06-22 10:54:02 +08:00
<script lang="ts" setup>
import {useDataStore} from "~/strores/DataStore";
import type {PropType} from "vue";
import VChart, {THEME_KEY} from 'vue-echarts';
const dataStore = useDataStore()
const props = defineProps({
valueIds: {
type: Array as PropType<string[]>,
required: true,
},
valueNames: {
type: Array as PropType<string[]>,
required: true,
},
})
const option = computed(() => {
return {
backgroundColor:'',
2024-06-22 10:54:02 +08:00
tooltip: {
trigger: 'item'
},
grid: {
left: '3%',
right: '4%',
bottom: '0%',
containLabel: true
},
legend: {
data: props.valueNames
},
series: [{
name: '数值',
type: 'pie',
data: props.valueIds?.map((id, index) => {
return {
value: dataStore.data[id],
name: props.valueNames[index]
}
}),
}]
}
});
</script>
<template>
<v-chart :option="option" autoresize class="chart" :theme="$colorMode.value"/>
2024-06-22 10:54:02 +08:00
</template>