ApexCharts饼图点击时放大动画效果实现求助

方法一：调整内置激活状态的缩放参数 #

ApexCharts默认的点击放大效果由states.active.scale控制，默认值通常为1.05左右。你只需调大这个数值，就能实现更明显的放大，还可配合动画参数优化效果：

var options = {
  series: [44, 55, 13, 43, 22],
  chart: {
    type: 'pie',
  },
  states: {
    active: {
      scale: 1.2, // 数值越大，放大幅度越高，可按需设置（比如1.3、1.4）
      animation: {
        duration: 300, // 动画持续时长，单位毫秒
        easing: 'easeOutElastic' // 动画缓动效果，让放大过渡更自然
      }
    }
  },
  labels: ['Apple', 'Mango', 'Orange', 'Banana', 'Grapes']
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

方法二：自定义点击事件实现夸张放大效果 #

如果内置配置的效果仍达不到预期，可通过监听饼图的click事件，手动为选中扇区添加CSS变换样式：

var options = {
  series: [44, 55, 13, 43, 22],
  chart: {
    type: 'pie',
    events: {
      click: function(event, chartContext, config) {
        // 重置所有扇区的样式
        document.querySelectorAll('.apexcharts-pie-slice').forEach(slice => {
          slice.style.transform = '';
          slice.style.transition = '';
        });
        // 为点击的扇区添加放大样式
        if (config.dataPointIndex !== undefined) {
          const targetSlice = document.querySelectorAll('.apexcharts-pie-slice')[config.dataPointIndex];
          targetSlice.style.transform = 'scale(1.3)'; // 自定义放大比例
          targetSlice.style.transition = 'transform 0.3s ease-out'; // 过渡动画
        }
      }
    }
  },
  // 建议关闭内置缩放，避免冲突
  states: {
    active: {
      scale: 1
    }
  },
  labels: ['Apple', 'Mango', 'Orange', 'Banana', 'Grapes']
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

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