echarts 动态排序

ECharts动态排序可以通过以下步骤实现：

1. 使用ECharts的dataZoom组件，设置为slider模式，允许用户通过拖动滑块选择需要显示的数据范围。

2. 在数据更新时，使用ECharts的setOption方法动态更新图表数据。

3. 在更新数据前，根据用户选择的数据范围对数据进行排序，然后再更新图表数据。

例如，以下代码可以在ECharts中实现动态排序：

// 初始化ECharts图表
var myChart = echarts.init(document.getElementById('myChart'));

// 定义数据
var data = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

// 使用dataZoom组件，允许用户选择数据范围
myChart.setOption({
    xAxis: {
        data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
    },
    yAxis: {},
    series: [{
        type: 'bar',
        data: data
    }],
    dataZoom: [{
        type: 'slider',
        start: 0,
        end: 100
    }]
});

// 监听dataZoom组件的数据范围变化事件
myChart.on('dataZoom', function(params) {
    // 获取数据范围
    var start = params.batch[0].start;
    var end = params.batch[0].end;

    // 根据数据范围对数据进行排序
    var sortedData = data.slice(start, end).sort(function(a, b) {
        return b - a;
    });

    // 更新图表数据
    myChart.setOption({
        series: [{
            data: sortedData
        }]
    });
});

在上面的代码中，我们使用dataZoom组件