ApexCharts饼图标签的大小、字体及底部位置设置方法

要实现你需要的效果，主要通过配置legend选项来调整图例的位置、字体大小和字体，同时优化细节让效果更贴近参考图。以下是修改后的完整代码：

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<body>
  <div id="pieChart"></div>
  <script>
    var options = {
      series: [10, 20, 30, 50],
      chart: {
        height: 480,
        type: 'pie',
      },
      labels: ["series_1", "series_2", "series_3", "series_4"],
      colors: ["#ff0000", "#c758d0", "#d6d6d6", "#007ed6"],
      // 新增/修改图例核心配置
      legend: {
        position: 'bottom', // 将图例固定在底部
        horizontalAlign: 'center', // 图例水平居中对齐
        fontSize: '14px', // 设置图例字体大小
        fontFamily: 'Arial, sans-serif', // 设置图例字体（可替换为你需要的字体，如微软雅黑、Roboto等）
        itemMargin: {
          horizontal: 15, // 图例项之间的水平间距
          vertical: 5 // 图例项之间的垂直间距
        }
      },
      responsive: [{
        breakpoint: 480,
        options: {
          chart: {
            width: 200
          },
          // 小屏幕下同步适配图例样式
          legend: {
            position: 'bottom',
            fontSize: '12px', // 小屏幕适当缩小字体
            horizontalAlign: 'center'
          }
        }
      }]
    };
    var chart = new ApexCharts(document.querySelector("#pieChart"), options);
    chart.render();
  </script>
</body>

关键修改说明： #

• 固定图例位置：在根级legend配置中设置position: 'bottom'，替代仅在响应式断点中的设置，确保所有屏幕尺寸下图例都显示在底部。
• 自定义字体样式：通过fontSize调整字体大小，fontFamily指定字体类型，可根据需求替换成目标字体。
• 优化图例布局：添加horizontalAlign: 'center'让图例居中显示，itemMargin调整图例项间的间距，提升视觉舒适度。
• 响应式适配：小屏幕断点中同步调整字体大小，保证移动端显示效果协调。

如果参考图中还有其他细节（比如饼图圆角、数据标签样式等），可以补充对应配置，例如添加plotOptions.pie.radius调整饼图尺寸，或dataLabels配置数据标签样式。

内容的提问来源于stack exchange，提问作者JiboOne