如何为AnyChart雷达图实现逐点伸缩循环动画

下面是适配你需求的完整HTML代码，直接嵌入Wix的HTML代码块即可使用：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>技能雷达图动画</title>
    <!-- 引入AnyChart核心库及雷达图模块 -->
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-radar.min.js"></script>
    <style>
        html, body, #container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script>
        anychart.onDocumentReady(function() {
            // 替换成你朋友的实际技能数据
            const originalSkills = [
                {x: "前端开发", value: 85},
                {x: "后端开发", value: 70},
                {x: "UI设计", value: 60},
                {x: "产品思维", value: 75},
                {x: "项目管理", value: 65}
            ];

            // 初始化雷达图
            const chart = anychart.radar();
            chart.container("container");

            // 用全0数据初始化图表，作为动画起始状态
            const animatedDataset = originalSkills.map(item => ({x: item.x, value: 0}));
            const skillSeries = chart.line(animatedDataset);

            // 基础图表样式配置（可按需调整）
            chart.title("技能展示雷达图");
            chart.yScale().minimum(0);
            chart.yScale().maximum(100);
            chart.yAxis().labels().format("{%Value}");
            chart.tooltip().format("{%x}: {%value}");
            chart.draw();

            // 核心动画逻辑函数
            function loopAnimation() {
                // 第一步：逐个展开数据点到目标值
                const expandTasks = [];
                animatedDataset.forEach((item, idx) => {
                    const task = new Promise(resolve => {
                        setTimeout(() => {
                            // 更新当前点的数值
                            skillSeries.data().set(idx, {x: item.x, value: originalSkills[idx].value});
                            // 触发单个点的平滑动画
                            skillSeries.animate({duration: 500, easing: "easeOutQuad"});
                            resolve();
                        }, idx * 500); // 点之间间隔500ms触发
                    });
                    expandTasks.push(task);
                });

                // 展开完成后，执行收缩动画
                Promise.all(expandTasks).then(() => {
                    setTimeout(() => {
                        const shrinkTasks = [];
                        animatedDataset.forEach((item, idx) => {
                            const task = new Promise(resolve => {
                                setTimeout(() => {
                                    skillSeries.data().set(idx, {x: item.x, value: 0});
                                    skillSeries.animate({duration: 500, easing: "easeInQuad"});
                                    resolve();
                                }, idx * 500);
                            });
                            shrinkTasks.push(task);
                        });

                        // 收缩完成后，循环整个动画流程
                        Promise.all(shrinkTasks).then(() => {
                            setTimeout(loopAnimation, 1000); // 循环前停留1秒
                        });
                    }, 1000); // 展开后停留1秒
                });
            }

            // 启动第一次动画
            setTimeout(loopAnimation, 500);
        });
    </script>
</body>
</html>

关键调整说明 #

• 数据替换：直接修改originalSkills数组里的技能名称和分值即可适配需求
• 动画节奏控制：
  • 单个点的展开/收缩时长：修改animate里的duration参数（单位ms）
  • 点与点的触发间隔：修改setTimeout中的idx * 500数值
  • 停留时长：调整展开/收缩完成后的setTimeout延迟值
• Wix嵌入方式：将代码复制到Wix的「嵌入HTML」组件中，调整组件尺寸即可正常显示

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