【Echarts动态排序图，series使用背景色更新动画，背景底色不同步跟随柱子动画】

在ECharts中，要创建一个动态排序的图表，其中series的颜色可以随着数据变化而更新，并且背景色不完全同步于柱状图的动画效果，你可以按照以下步骤操作：

1. 首先，导入ECharts库并创建一个实例：

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

2. 设置数据源和初始排序规则：

var option = {
    xAxis: {
        data: ['A', 'B', 'C', 'D', 'E'] // 初始排序的数据
    },
    yAxis: {},
    series: [{
        name: '值',
        type: 'bar',
        data: [5, 20, 36, 10, 15], // 数据数组
        animation: { // 设置默认的动画效果
            duration: 1000,
            easing: 'easeInOutQuart'
        },
        itemStyle: { // 定义柱状图样式
            normal: {
                color: 'red' // 默认颜色
            }
        }
    }],
    backgroundColor: 'white' // 初始背景色
};

3. 创建一个函数，用于改变柱状图排序和系列颜色，并设置新的背景色动画：

function updateSeries(dataSort) {
    var newOption = deepClone(option); // 深拷贝原始option防止修改原生

    // 更新x轴数据和排序
    newOption.xAxis.data = dataSort;

    // 使用ECharts的animateData方法动态更新数据，同时改变颜色
    newOption.series[0].animateData({
        duration: 1000, // 动画持续时间
        steps: 100, // 分段数
        onChange: function (currentValue) { // 在每次动画进度改变时执行
            newOption.series[0].data[currentValue.index] = currentValue.value; // 更新数据
            if (currentValue.index === 0) { // 当前元素是第一个，更改背景色
                newOption.backgroundColor = 'lightblue'; // 新的背景色
            } else {
                newOption.backgroundColor = 'white'; // 其他元素保持白色背景
            }
        }
    });

    myChart.setOption(newOption);
}

4. 调用`updateSeries`函数，传入你想要的新排序数组，触发更新过程：

updateSeries(['E', 'D', 'C', 'B', 'A']); // 示例，根据需要调整排序