Echarts如何实现饼图动画效果

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以轻松地为网页添加图表。要为 ECharts 饼图添加动画效果，你需要在初始化图表时设置 animation 和 animationDuration 选项。以下是一个简单的示例：

首先，确保你已经在 HTML 文件中引入了 ECharts 库：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>

然后，在 HTML 文件中创建一个用于显示饼图的容器：

<div id="pieChart" style="width: 600px; height: 400px;"></div>

接下来，使用 JavaScript 初始化饼图并设置动画效果：

// 基于准备好的容器（这里是 id 为 'pieChart' 的 div），初始化 echarts 实例
var myChart = echarts.init(document.getElementById('pieChart'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 饼图动画示例'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                { value: 235, name: '视频广告' },
                { value: 274, name: '联盟广告' },
                { value: 310, name: '邮件营销' },
                { value: 335, name: '直接访问' },
                { value: 400, name: '搜索引擎' }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            animation: true, // 开启动画效果
            animationDuration: 1000, // 动画持续时间，单位毫秒
            animationEasing: 'cubicInOut' // 动画缓动效果
        }
    ]
};

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

在这个示例中，我们设置了 animation 为 true 以开启动画效果，并通过 animationDuration 设置动画持续时间为 1000 毫秒。你可以根据需要调整这些参数以达到期望的动画效果。