chartCard.vue 545 B

123456789101112131415161718192021222324
  1. <script lang="ts" setup>
  2. import { chart } from '@vben/chart-ui';
  3. defineOptions({ name: 'ChartCard' });
  4. import type { ChartItem } from './typings';
  5. import { onMounted, ref } from 'vue';
  6. interface Props {
  7. item: ChartItem;
  8. }
  9. const chartRef = ref();
  10. onMounted(() => {
  11. chartRef.value.setChart(props.item.option);
  12. });
  13. const props = withDefaults(defineProps<Props>(), {});
  14. </script>
  15. <template>
  16. <div class="rounded-lg border-2 border-solid">
  17. <div class="">
  18. {{ item.title }}
  19. </div>
  20. <chart ref="chartRef" />
  21. </div>
  22. </template>