echart 多柱图只显示部分数据标签_使用echart展现排序算法过程（一）

以前看过一个排序的动图，各种排序的算法都有，为了加深算法的理解

想通过echart这种图表来达到展现排序的过程的效果，目前只写了，冒泡，选择，快速三种排序方法，有空会把其他的算法补齐。

文件结构

sort.html可以直接用浏览器打开，lib里放的是echarts.min.js组件

echartOption.js 放的是echart的option配置项，柱状图初始化的一些参数。每种排序算法单独放到一个文件里，以算法名字命名，一目了然。

echart的配置文件中有注释，也可以去官网上在线运行，或者直接在官网查找api文档。

冒泡排序(Bubble Sort)

 async function bubbleSort() { for (let i=0;iarray[j+1]){ renderChartBubble(j,j+1,start,end,array,'blue','orange',"array[j] 比array[j+1]大进行交换"); await sleep(delyTime);//延迟时间 swap(j,j+1,array);//俩数交换 renderChartBubble(j,j+1,start,end,array,'blue','orange',"交换完成"); await sleep(delyTime); } } } }

相邻的两个数字比较，array[j]和array[j+1]比较 ，大的上浮小的下沉，

renderChartBubble 函数是渲染echart绘制柱状图，了解到冒泡排序，在比较大小的时候，我们渲染一次，当数值变化时重新绘制。

平均时间复杂度：O(n^2)

最好情况：O(n)

最坏情况：O(n^2)

空间复杂度：O(1)

排序方式：In-place( 占用常数内存，不占用额外内存)

稳定性：稳定

下图是冒泡排序的动图：

冒泡排序，粉色是边界

选择排序(Selection sort)

async function selectSort() { for (let i = 0;i

选择排序和冒泡排序，难度相当，都是最简单的排序算法。选择排序就是i 这个位置，要放i——array.length-1这个范围里最小的数。

平均时间复杂度：O(n^2)

最好情况：O(n)

最坏情况：O(n^2)

空间复杂度：O(1)

排序方式：In-place( 占用常数内存，不占用额外内存)

稳定性：不稳定

下图是选择排序的动图：

gif导出的时候，部分帧丢失了，柱子颜色没有显示出来

快速排序(Quick sort)

async function quickSort(arr, start, end) { // 找寻基准数据的正确索引 let low = start; let hight = end; let tmp = arr[low]; let base = low;//基数 renderChartQuick(base,low,hight,start,end,array,'red','orange','orange',"开始比较"); await sleep(delyTime); while (lowtmp) { hight--; renderChartQuick(base,low,hight,start,end,array,'red','orange','orange',"hight--"); await sleep(delyTime); } // 如果队尾元素小于tmp了,需要将其赋值给low renderChartQuick(base,low,hight,start,end,array,'red','orange','orange',"tmp:"+tmp+"如果队尾元素小于tmp了,需要将其赋值给low位"); await sleep(delyTime); arr[low] = arr[hight]; // 当队首元素小于等于tmp时,向前挪动low指针 while (low < hight && arr[low] <=tmp) { low++; renderChartQuick(base,low,hight,start,end,array,'red','orange','orange',"low++"); await sleep(delyTime); } // 当队首元素大于tmp时,需要将其赋值给high arr[hight] = arr[low]; renderChartQuick(base,low,hight,start,end,array,'red','orange','orange',"tmp:"+tmp+"当队首元素大于tmp时,需要将其赋值给hight"); await sleep(delyTime); } // 跳出循环时low和high相等,此时的low或high就是tmp的正确索引位置 // 由原理部分可以很清楚的知道low位置的值并不是tmp,所以需要将tmp赋值给arr[low] arr[low] = tmp; renderChartQuick(base,low,hight,start,end,array,'red','orange','orange',"low和hight相等 把基数放到low(hight)索引位置"); await sleep(delyTime); // 进行迭代对index之前和之后的数组进行相同的操作使整个数组变成有序 if(low-1>start){ await quickSort(arr, start, low - 1); } if(low+1<=end){ await quickSort(arr, low + 1, end); } }

快速排序，分而治之的思想，找到一个基数tmp = array[low] 这个基数将start 和end这个范围的数组分成两部分一部分是小于tmp的，一部分是大于tmp的，那么这两部分可以看成两个数组再使用上述方式继续分，直到不能再分为止。

平均时间复杂度：O(nlogn)

最好情况：O(nlogn)

最坏情况：O(n^2)

空间复杂度：O(logn)

排序方式：In-place( 占用常数内存，不占用额外内存)

稳定性：不稳定

下图是快速排序的动图：

遇到的问题

在渲染柱状图的时候，想sleep一会儿，发现js是没有sleep函数的，百度发现通过setTimeout 精确时间 await同步函数。但是这种方式兼容就不好了。毕竟是es7的东西。

尽管这些算法都是很简单的，我都没有彻底搞懂。

啊，好难啊好难。

echart-sort项目地址：

https://github.com/ZhangWeiHelloWorld/echart-sort.git