在 apexchart 中更改图表的字体大小

Question

如何增加使用 apexchart 创建的圆环图的字体大小。

这是图片

chart

<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% 或图例，表示右上角显示的图表部分的名称你的形象像 "Pending Requests" 等等）

顺便说一句，如果你想改变数据标签的字体大小，你可以这样做：

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

如果您想更改 Legends 的字体大小：

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

希望对您有所帮助 ;)

在 apexchart 中更改图表的字体大小

Change font size of chart in apexchart

javascript

vue.js

vuejs2

apexcharts