前言这篇文章给小伙伴们带来的是EChatrs的操作，是通过点击一个图表来控制另一个图表的数据的操作，看着还是蛮有用的，因为大家在做管理系统的项目的时候，应该都是可以用的上的，也非常的简单，就是有的小伙伴可能刚接触EChatrs的时候可能不太熟悉其中的属性，因为它的属性功能太多、太强大了。展示一、原理它的原理其实十分的简单，非常的简单，就是给一个图表绑定一个点击事件，当然这个操作在原生的js代码中还是很好实现的，就获取下DOM，然后操作操作就可以了。但是这篇文章来主要给大家说的是在Vue中应该怎样操作，其实就是通过点击事件来判断点击这个扇形图的那个区域，然后对柱状图进行一个赋值二、代码截图然后第二个图表就通过第一个图表的选择来控制图表的内容这就可以了已经，下面我把代码给小伙伴们提供出来，不用你们一个一个打了三、代码 结语这篇文章可能说比较简单，但是还是有点实用的，希望对你有所帮助}

以前看过一个排序的动图，各种排序的算法都有，为了加深算法的理解想通过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
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
成就一亿技术人!
hope_wisdom 发出的红包
实付元使用余额支付
点击重新获取
钱包余额
0
抵扣说明： 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。余额充值
}