50 lines
943 B
Vue
50 lines
943 B
Vue
|
<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 {
|
||
|
|
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"/>
|
||
|
|
</template>
|