Изменить размер шрифта диаграммы в apexchart

Question

как увеличить размер шрифта кольцевой диаграммы, созданной с помощью apexchart.

Вот изображение

диаграмма

<template>
  <section>
    <v-card raised>
      <v-card-title class="blue--text">Requests Overview</v-card-title>
      <apexchart width="530" type="donut" :options="options" :series="newSeries" />
    </v-card>
  </section>
</template>

<script>
import apexchart from "vue-apexcharts";

export default {
  components: {
    apexchart
  },
  data() {
    return {
      series: [],
      options: {
        height: 180,
        width: "100%",
        labels: [
          "Pending Requests",
          "Approved Requests",
          "Rescheduled Requests"
        ],
        //colors can be styled using hex code only
        colors: ["#54D52A", "#2A54D5", "#D52A54"],
      }
    };
  }
};
</script>

Кстати, я не поместил сюда весь код, это всего лишь фрагмент.

Answer 1

Я не уверен, что в какой части диаграммы вы хотите изменить размер шрифта (метки данных, которые означают числа в диаграмме, например, 35,5%, или легенды, которые означают названия частей диаграммы, которые отображаются в правом верхнем углу вашего изображения, например «Ожидает рассмотрения») Запросы »и так далее)

Кстати, если вы хотите изменить размер шрифта меток данных, вы можете сделать это следующим образом:

options: {
         height: 180,
         width: "100%",
         dataLabels: {
              enabled: true,
              style: {
                fontSize: "140px",
                fontFamily: "Helvetica, Arial, sans-serif",
                fontWeight: "bold"
              }
            },
         labels: [
              "Pending Requests",
              "Approved Requests",
              "Rescheduled Requests"
            ],
            //colors can be styled using hex code only
         colors: ["#54D52A", "#2A54D5", "#D52A54"],
}

и если вы хотите изменить размер шрифта легенд:

options: {
        height: 180,
        width: "100%",

        legend: {
          fontSize: "32px"
        },
        labels: [
          "Pending Requests",
          "Approved Requests",
          "Rescheduled Requests"
        ],
        //colors can be styled using hex code only
        colors: ["#54D52A", "#2A54D5", "#D52A54"] 
}

надеюсь вам поможет;)