ChartsPie.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <template>
  2. <div ref="echartsLineRef" style="height: 400px"></div>
  3. </template>
  4. <script lang="ts" setup>
  5. import { Ref, ref, watchEffect } from 'vue';
  6. import { useECharts } from '@/hooks/web/useECharts';
  7. const echartsLineRef = ref<HTMLDivElement | null>(null);
  8. const { setOptions } = useECharts(echartsLineRef as Ref<HTMLDivElement>);
  9. const { title, data } = defineProps<{
  10. title: string;
  11. data: {
  12. value: number;
  13. name: string;
  14. }[];
  15. }>();
  16. watchEffect(() => {
  17. setOptions({
  18. title: {
  19. text: title,
  20. },
  21. tooltip: {
  22. trigger: 'item',
  23. formatter: '{b} <br/>{c} ({d}%)',
  24. },
  25. legend: {
  26. type: 'scroll',
  27. // orient: 'vertical',
  28. bottom: 'bottom',
  29. },
  30. series: [
  31. {
  32. name: title,
  33. type: 'pie',
  34. radius: ['45%', '60%'],
  35. // avoidLabelOverlap: false,
  36. padAngle: 5,
  37. label: {
  38. formatter: '{b} {d}%',
  39. color: 'inherit',
  40. },
  41. data,
  42. },
  43. ],
  44. });
  45. });
  46. </script>