echarts做一个动态冒泡排序的柱状图

以下是使用ECharts制作动态冒泡排序柱状图的代码示例：

HTML代码：

<div id="bubble-sort-chart" style="width: 800px; height: 600px;"></div>

JavaScript代码：

// 初始化ECharts实例
var myChart = echarts.init(document.getElementById('bubble-sort-chart'));

// 定义初始数据
var data = [55, 20, 36, 70, 30, 50];

// 定义颜色
var color = ['#c23531','#2f4554','#61a0a8','#d48265','#749f83','#ca8622'];

// 定义option
var option = {
    title: {
        text: '冒泡排序动态演示',
        left: 'center',
        top: 20
    },
    tooltip: {},
    xAxis: {
        data: ['A', 'B', 'C', 'D', 'E', 'F']
    },
    yAxis: {},
    series: [{
        name: '数据',
        type: 'bar',
        data: data,
        itemStyle: {
            color: function(params) {
                return color[params.dataIndex];
            }
        }
    }]
};

// 将option设置给ECharts实例
myChart.setOption(option);

// 定义冒泡排序函数
function bubbleSort(data) {
    var len = data.length;
    for (var i = 0; i < len - 1; i++) {
        for (var j = 0; j < len - i - 1; j++) {
            if (data[j] > data[j + 1]) {
                var temp = data[j];
                data[j] = data[j + 1];
                data[j + 1] = temp;
                // 更新ECharts实例的数据
                myChart.setOption({
                    series: [{
                        data: data
                    }]
                });
                // 设置延迟时间
                await new Promise(resolve => setTimeout(resolve, 1000));
            }
        }
    }
}

// 调用冒泡排序函数
bubbleSort(data);

在以上代码中，我们首先使用ECharts初始化了一个柱状图实例，并定义了初始数据、颜色和option。然后，我们定义了一个冒泡排序函数，并在函数中更新了ECharts实例的数据，并设置了延迟时间，以实现动态效果。最后，我们调用了冒泡排序函数，将初始数据作为参数传入即可。