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

以下是一个示例代码，实现了echarts动态冒泡排序柱状图，其中需要更换的两根柱子颜色不同，更换完毕后恢复默认颜色。

var option = {
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [10, 52, 200, 334, 390, 330, 220, 100, 90, 30],
    type: 'bar',
    itemStyle: {
      normal: {
        color: function(params) {
          if (params.dataIndex === 2 || params.dataIndex === 3) {
            return '#ff6600'; // 更换柱子颜色
          } else {
            return '#66ccff'; // 默认颜色
          }
        }
      }
    }
  }]
};

var myChart = echarts.init(document.getElementById('myChart'));

myChart.setOption(option);

var data = [10, 52, 200, 334, 390, 330, 220, 100, 90, 30];
var n = data.length;

function bubbleSort() {
  for (var i = 0; i < n - 1; i++) {
    for (var j = 0; j < n - i - 1; j++) {
      if (data[j] > data[j + 1]) {
        var temp = data[j];
        data[j] = data[j + 1];
        data[j + 1] = temp;
        swap(j, j + 1);
      }
    }
  }
}

function swap(i, j) {
  setTimeout(function() {
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: i
    });
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: j
    });
    setTimeout(function() {
      var temp = option.series[0].data[i];
      option.series[0].data[i] = option.series[0].data[j];
      option.series[0].data[j] = temp;
      myChart.setOption(option);
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: i
      });
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: j
      });
    }, 1000);
  }, 1000 * (i * n + j));
}

bubbleSort();

在上面的代码中，我们首先定义了一个带有不同颜色的柱子的echarts柱状图，并使用了itemStyle来设置柱子的颜色。接着，我们定义了一个冒泡排序的函数bubbleSort()，其中用swap()函数来交换需要更换的两根柱子的位置，并在交换前后使用highlight和downplay来设置柱子的高亮和恢复状态。最后，我们调用bubbleSort()函数来进行动态冒泡排序柱状图的展示。