LoongPanel-Asp/web/components/Charts/PieChart.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 {
    backgroundColor:'',
    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"/>
</template>