旋转饼图

let data = [
{ value: Math.floor(Math.random() * 30), name: '0-100' },
{ value: Math.floor(Math.random() * 30), name: '100-500' },
{ value: Math.floor(Math.random() * 30), name: '500-1000' },
{ value: Math.floor(Math.random() * 30), name: '1000-2000' },
{ value: Math.floor(Math.random() * 30), name: '2000-5000' },
{ value: Math.floor(Math.random() * 30), name: '5000以上' }
]

    // 对数据进行从小到大的排序
    data.sort((a, b) => a.value - b.value)

    const colorList = ['#FF9800', '#FF5722', '#795548', '#673AB7', '#9C27B0', '#E91E63']

    myChart.setOption({
        backgroundColor: '#f0f2f5',
        title: {
            text: '2024年全国降雨量统计',
            left: 'center',
            textStyle: {
                color: '#333',
                fontSize: 20
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)'
        },
        series: [
            {
                name: '降雨量',
                type: 'pie',
                radius: ['0%', '70%'], // 从原点开始向外扩张
                center: ['50%', '50%'],
                roseType: 'area', // 使用 roseType: 'area' 来模拟高度效果
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    formatter: '{b}: {c} ({d}%)',
                    position: 'outside',
                    color: '#333',
                    fontSize: 14
                },
                labelLine: {
                    show: true,
                    length: 20,
                    length2: 30,
                    lineStyle: {
                        color: '#333'
                    }
                },
                data: data.map((item, index) => ({
                    ...item,
                    itemStyle: {
                        color: colorList[index]
                    }
                })),
                animationType: 'bounceIn', // 使用 bounceIn 动画
                animationEasing: 'elasticOut', // 使用 elasticOut 缓动效果
                animationDuration: 1000, // 增加动画持续时间
                animationDelay: function (idx) {
                    return idx * 200; // 增加动画延迟
                }
            }
        ]
    })