算法--希尔排序可视化

一直都想做各种数据可视化

现用工具 echarts 做排序过程可视化

希尔排序

算法性能取决于 h

function shellSort(array) {
    const N = array.length;
    let h = 1;
    while (h < N / 3) h = 3 * h + 1;
    while (h >= 1) {
        for (let i = h; i < N; i++) {
            for (let j = i; j >= h && array[j] < array[j - h]; j -= h) {
                let tem = array[j];
                array[j] = array[j - h];
                array[j - h] = tem;
                process.push(arr.slice(0));
            }
        }
        h = Math.floor(h / 3);
    }
}
shellSort(arr);

其中 process 是用来存储过程的数组，每次变化的数组结果都存在该数组中，每次存入结果如下

希尔排序，将固定间隔的数形成多个数组，每个数组进行排序，间隔量从指定值缩小到 1 ，最后将多个数组合并成一个

Echarts

三部曲，设置 DOM 元素---初始化 Echarts---设置 Option

通过不断改变 option 中的数据来不断更新图表，最终形成动画

animationDuration: 0,

animationDurationUpdate: 1000,

animationEasing: "linear",

animationEasingUpdate: "linear",
    
// 在 option 中设置转换动画

播放动画

这里使用了 setInterval 函数来播放动画，将过程数组的长度作为标识符，如果长度大于零，那么取出来设置到 option 中，最终形成动画

完整代码如下