echarts 动态冒泡排序柱状图 ，正在更换的两根柱子有不同的颜色，更换完以后变回默认颜色

以下是一个简单的实现，可以根据需要调整颜色和动画效果：

// 初始化图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
    // 设置柱状图样式
    series: [{
        type: 'bar',
        data: [5, 3, 1, 4, 2],
        // 柱子颜色
        itemStyle: {
            color: '#428bca'
        },
        // 标签样式
        label: {
            show: true,
            position: 'top'
        }
    }],
    // 设置排序按钮
    toolbox: {
        show: true,
        feature: {
            magicType: {
                type: ['bar', 'line']
            },
            restore: {},
            saveAsImage: {}
        }
    }
};
myChart.setOption(option);

// 定义冒泡排序函数
function bubbleSort(arr) {
    var len = arr.length;
    for (var i = 0; i < len - 1; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
            // 如果前一个数比后一个数大，则交换位置
            if (arr[j] > arr[j+1]) {
                // 设置正在更换的两根柱子的颜色
                myChart.setOption({
                    series: [{
                        itemStyle: {
                            color: j == 0 ? 'red' : 'green'
                        }
                    }, {
                        itemStyle: {
                            color: j == len-2-i ? 'red' : 'green'
                        }
                    }]
                });
                // 交换位置
                var temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;
                // 更新图表数据
                myChart.setOption({
                    series: [{
                        data: arr
                    }]
                });
                // 等待一段时间，以便观察动画效果
                setTimeout(function(){}, 1000);
            }
        }
        // 更换完后，重新设置柱子颜色
        myChart.setOption({
            series: [{
                itemStyle: {
                    color: '#428bca'
                }
            }]
        });
    }
}
// 测试函数
bubbleSort([5, 3, 1, 4, 2]);