123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 |
- <template>
- <div ref="echartsLineRef" style="height: 400px"></div>
- </template>
- <script lang="ts" setup>
- import { Ref, ref, watchEffect } from 'vue';
- import { useECharts } from '@/hooks/web/useECharts';
- const echartsLineRef = ref<HTMLDivElement | null>(null);
- const { setOptions } = useECharts(echartsLineRef as Ref<HTMLDivElement>);
- const { title, data } = defineProps<{
- title: string;
- data: {
- value: number;
- name: string;
- }[];
- }>();
- watchEffect(() => {
- setOptions({
- title: {
- text: title,
- },
- tooltip: {
- trigger: 'item',
- formatter: '{b} <br/>{c} ({d}%)',
- },
- legend: {
- type: 'scroll',
- // orient: 'vertical',
- bottom: 'bottom',
- },
- series: [
- {
- name: title,
- type: 'pie',
- radius: ['45%', '60%'],
- // avoidLabelOverlap: false,
- padAngle: 5,
- label: {
- formatter: '{b} {d}%',
- color: 'inherit',
- },
- data,
- },
- ],
- });
- });
- </script>
|