Estoy tratando desesperadamente de hacer que vue-echart funcione dentro de un componente v-card de vuetify.

De alguna manera, no puedo ajustar el tamaño del lienzo en el que se dibuja el gráfico para que quepa dentro de la tarjeta virtual. De alguna manera excede la tarjeta . He estado buscando durante días y no encontré una solución adecuada. ¿Hay alguna manera de hacer funcionar esto? Lo extraño es que tan pronto como coloco el elemento del gráfico en un div o contenedor, aparece un error quejándose de Can't get DOM width or height .

Aquí hay una versión simplificada de mi código:

 <template> <v-app> <v-main> <v-container> <v-row> <v-col class="col-3"> <v-card class="mx-auto" height="500" outlined elevation="2"> <v-card-title class="text-h5 font-weight-bold" >Registrations</v-card-title > <v-card-subtitle >Number of participants registered per profession</v-card-subtitle > <!-- <v-container> --> <chart :option="chartOptions" class="ma-10"></chart> <!-- </v-container> --> </v-card> </v-col> </v-row> </v-container> </v-main> </v-app> </template> <script> export default { name: "App", components: {}, data() { return { chartOptions: null, number_of_professors: 30, number_of_doctors: 50, number_of_other: 20, }; }, mounted() { this.chartOptions = { color: ["#EF5350", "#29B6F6", "#FFCA28"], width: "100%", height: "100%", legend: { orient: "vertical", y: "top", x: "left", data: ["professor", "doctor", "other"], }, series: [ { type: "pie", data: [ { name: "professor", value: this.number_of_professors }, { name: "doctor", value: this.number_of_doctors }, { name: "other", value: this.number_of_other }, ], radius: ["30%", "80%"], avoidLabelOverlap: false, label: { show: false, position: "center", }, labelLine: { show: false, }, }, ], }; }, }; </script>

Gracias por tu ayuda.