Swiper.js循环滑动首尾切换时Apex RadialBar无法渲染求助

我之前碰到过一模一样的问题，这事儿的根源在于Swiper的loop机制：当你开启loop: true时，Swiper会自动克隆首尾的幻灯片（比如把第1张克隆一份放在最后，第3张克隆一份放在最前面），用来实现无缝循环滑动。但你最初的代码只初始化了原始的3个图表容器，这些克隆出来的容器完全没被处理，所以当你从第3张切到第1张（或者反向）时，实际显示的是克隆的幻灯片，自然看不到图表。

下面是修正后的完整代码，我会一步步解释改动点：

第一步：给图表容器加通用类 #

先给所有图表容器加一个统一的类名，方便后续批量处理（包括克隆出来的元素）：

<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<link href="https://unpkg.com/swiper/css/swiper.min.css" rel="stylesheet"/>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- Slide 1-->
        <div class="swiper-slide">
            <section class="india">
                <p class="gas-header">INDIA</p>
                <div id="demo-chart-1" class="radial-chart-container"></div>
            </section>
        </div>
        <!-- Slide 2-->
        <div class="swiper-slide">
            <section class="canada">
                <p class="gas-header">CANADA</p>
                <div id="demo-chart-2" class="radial-chart-container"></div>
            </section>
        </div>
        <!-- Slide 3-->
        <div class="swiper-slide">
            <section class="japan">
                <p class="gas-header">JAPAN</p>
                <div id="demo-chart-3" class="radial-chart-container"></div>
            </section>
        </div>
    </div>
    <div class="swiper-pagination"></div>
</div>

第二步：修改JS逻辑，在Swiper初始化后渲染所有图表 #

把图表初始化逻辑放到Swiper的init事件里，确保Swiper已经生成了克隆的幻灯片，再批量初始化所有图表容器（包括克隆的）：

$(document).ready(function () {
    var mySwiper = new Swiper ('.swiper-container', {
        direction: 'horizontal',
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
            clickable: true
        },
        effect: 'slide',
        // 监听Swiper初始化完成事件
        on: {
            init: function() {
                initRadialCharts();
            }
        }
    });

    // 封装图表初始化函数
    function initRadialCharts() {
        const baseOptions = {
            chart: {
                height: 200,
                type: 'radialBar',
            },
            plotOptions: {
                radialBar: {
                    hollow: {
                        size: '70%',
                    }
                },
            },
            stroke: {
                lineCap: 'round'
            },
            labels: ['Country'],
        };

        // 遍历所有图表容器（原始+克隆）
        document.querySelectorAll('.radial-chart-container').forEach(container => {
            // 避免重复初始化
            if (!container.chartInstance) {
                // 如果需要每个图表数据不同，可以通过data属性传递，这里默认用50
                const series = [container.dataset.series ? parseInt(container.dataset.series) : 50];
                const chart = new ApexCharts(container, {...baseOptions, series});
                chart.render();
                // 把图表实例存到容器元素上，方便后续检查
                container.chartInstance = chart;
            }
        });
    }
});

额外优化：支持不同图表数据 #

如果你的3个图表需要展示不同的数值，可以给容器加data-series属性：

<div id="demo-chart-1" class="radial-chart-container" data-series="50"></div>
<div id="demo-chart-2" class="radial-chart-container" data-series="75"></div>
<div id="demo-chart-3" class="radial-chart-container" data-series="90"></div>

上面的JS代码已经支持读取这个属性，自动适配不同的series值。

为什么之前的半滑动和相邻切换正常？ #

因为半滑动时你并没有切换到克隆的幻灯片，相邻切换（1→2、2→3）也是在原始幻灯片之间切换，这些幻灯片里的图表已经被你提前初始化了，所以显示正常。只有首尾循环切换时，才会触发克隆幻灯片的显示，而这些克隆元素里的图表从未被初始化，就出现了空白。

内容的提问来源于stack exchange，提问作者Bhabani Shankar Dash