中心饼图

Question

我正在使用 Apex 的饼图来可视化数据。现在我想将这个饼图放在 vuetify 卡片元素的中心，但不幸的是我无法让它工作。目前，它看起来像这样：

<v-card elevation="2" class="ma-3 mx-auto">
    <v-card-title>
        Odds
    </v-card-title>
    <v-divider></v-divider>
    <v-card-text>
        <div id="chart3">
          <apexchart type="pie" width="550" :options="chartOptions3" :series="series3"></apexchart>
        </div>
    </v-card-text>
</v-card>

视觉上看起来像这样：

如何使饼图居中？

Answer 1

应用 d-flex 和 justify-center 实用程序 CSS 类，分别在 [=15= 上设置 display:flex 和 justify-contents:center ]:

<v-card-text class="d-flex justify-center">

demo

中心饼图

Center pie chart

vue.js

vuetify.js

apexcharts