ApexCharts柱状图添加border-radius后动画异常的排查与修复

问题现象 #

为ApexCharts柱状图配置border-radius后，图表加载或更新时出现动画异常，柱子会向左拉伸变形，无法正常展示高度过渡动画。

配置代码（Vue环境） #

脚本部分 #

const series: ApexAxisChartSeries = [
    {
        name: 'series-1',
        data: [70,10, 5,5, 10]
    }
]

const options: ApexOptions = {
    chart: {
        type: 'bar',
        animations: {
            enabled: true
        },
        toolbar: {
            show: false
        },
        zoom: {
            enabled: false
        },
        sparkline: {
            enabled: true
        },

    },
    states: {
        hover: {
            filter: {
                type: 'none'
            }
        },
        active: {
            filter: {
                type: 'none'
            }
        }
    },
    plotOptions: {
        bar: {
            borderRadius: 4,
            columnWidth: 41,
            distributed: true,
            rangeBarOverlap: true,
            colors: {
                backgroundBarOpacity: 0.3,
                backgroundBarColors: arrayOfColors,
                backgroundBarRadius: 4
            },
            borderRadiusApplication: 'around'
        }
    },
    dataLabels: {
        enabled: false
    },
    colors: arrayOfColors,
    tooltip: {
        enabled: false
    },

    legend: {
        show: false,
    },
    grid: {
        show: false,
    },

    xaxis: {
        axisTicks: { show: false },
        labels: {
            show: false
        },

        axisBorder: { show: false },
        categories: [`a`, 'b', 'c', 'd', 'e']
    },
    yaxis: {
        show: false,
        min: 0,
        max: 100
    }
}

模板部分 #

<apexchart width="252" height="120"  :options="options" :series="series"> </apexchart>

可能的原因及解决办法 #

1. 调整borderRadiusApplication配置 #

当前设置的'around'值，结合distributed: true和固定columnWidth时，可能引发动画计算逻辑异常。可以尝试移除该属性（使用默认值）或修改为'end'：

plotOptions: {
    bar: {
        borderRadius: 4,
        columnWidth: 41,
        distributed: true,
        rangeBarOverlap: true,
        colors: {
            backgroundBarOpacity: 0.3,
            backgroundBarColors: arrayOfColors,
            backgroundBarRadius: 4
        },
        // 移除或修改配置项
        // borderRadiusApplication: 'around'
    }
},

2. 排查distributed与columnWidth的冲突 #

开启distributed: true时，ApexCharts会自动分配柱子宽度，手动设置columnWidth可能导致布局计算冲突，进而影响动画表现。可以尝试移除columnWidth配置，让图表自动计算：

plotOptions: {
    bar: {
        borderRadius: 4,
        // columnWidth: 41, // 移除该配置
        distributed: true,
        // ...其他配置
    }
},

3. 修改动画参数 #

尝试更换动画缓动函数或禁用动态动画，让过渡效果更稳定：

chart: {
    type: 'bar',
    animations: {
        enabled: true,
        easing: 'easeOutQuad', // 更换缓动函数
        dynamicAnimation: {
            enabled: false // 禁用动态动画
        }
    },
    // ...其他配置
}

4. 版本兼容性检查 #

如果以上方法无效，可能是当前ApexCharts版本存在border-radius动画相关bug。可以尝试升级到最新稳定版本，或回退到已知无此问题的版本。

内容的提问来源于stack exchange，提问作者Juan Pablo Spiatta