在 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"] 
}

希望它對你有幫助；）