Make Vue-ECharts chart fit in vuetify v-card

Question

I am desperately trying to make vue-echart work within a v-card component of vuetify.

Somehow, I am not able to adjust the size of the canvas the chart is drawn on to fit within the v-card. It somehow exceeds the card. I have been searching for days now and did not come up with a proper solution. Is there any way to make this work? The weird thing is that as soon as I put the chart element into a div or container, I get an error complaining about Can't get DOM width or height.

Here is a simplified version of my code:

<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>

Thanks for your help.

Answer 1

      var myChartCompleted = this.$echarts.init(this.$refs.Finish);
      myChartCompleted.setOption(this.optionCompleted)
      myChartCompleted._dom.childNodes[0].childNodes[0].style.height="290px"
      myChartCompleted._dom.childNodes[0].childNodes[0].style.width="180px"
  

You can use this method to get the DOM node of the canvas used by echarts and assign values to its properties. If you want to manipulate other properties of it, you can print this node and see :) (Google Translate)