帮我用echarts写一个基于冒泡排序,数据为[3,38,44,5,47,15,36,26,27,2,46,4,19,50,48],柱状图表示,排序间隔1秒,从第一个到最后一个数据开始依次排序,排序过程动态显示并有两种颜色变化的程序
时间: 2023-05-27 11:03:01 浏览: 162
基于C语言10个数据结构课程设计实例二叉树建立遍历冒泡排序快速排序等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>冒泡排序动态展示</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="myChart" style="width: 800px;height:600px;"></div>
<script>
// 数据
var data = [3, 38, 44, 5, 47, 15, 36, 26, 27, 2, 46, 4, 19, 50, 48];
// 等待排序的下标数组
var iList = [];
// 已排序的下标数组
var sortedList = [];
// echarts实例
var myChart = echarts.init(document.getElementById('myChart'));
// 配置项
var option = {
title: {
text: '冒泡排序动态展示'
},
tooltip: {},
grid: {
left: '3%',
right: '7%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: []
};
// 添加柱状图
option.series.push({
name: '冒泡排序',
type: 'bar',
data: [],
itemStyle: {
normal: {
// 柱体颜色
color: '#22c3aa'
}
}
});
// 添加已排序的颜色
option.series.push({
name: '已排序',
type: 'bar',
data: [],
itemStyle: {
normal: {
// 柱体颜色
color: '#c23531'
}
}
});
// 设置x轴数据
option.xAxis.data = new Array(data.length);
for (var i = 0; i < data.length; i++) {
option.xAxis.data[i] = i + 1;
}
// 初始数据
option.series[0].data = data.slice();
myChart.setOption(option);
// 冒泡排序方法
function bubbleSort() {
var len = data.length;
// 两两比较,上浮较大的数
for (var i = 0; i < len; i++) {
for (var j = 0; j < len - i - 1; j++) {
// 向iList数组中添加等待排序的下标值
iList.push(j);
// 判断当前位置的数是否比下一个数大
if (data[j] > data[j + 1]) {
// 交换两个数
[data[j], data[j + 1]] = [data[j + 1], data[j]];
// 清空数组并将当前位置和下一个位置添加到sortedList数组中
sortedList.push(j, j + 1);
}
}
// 将最大值添加到sortedList数组中
sortedList.push(len - i - 1);
}
// 添加最后一个值
sortedList.push(0);
// 调用show方法
show();
}
// 展示排序过程
function show() {
// 循环遍历iList数组
var timer = setInterval(function () {
// 清空已排序的数据,添加当前已排序的数据
option.series[1].data = new Array(sortedList.length);
for (var i = 0; i < sortedList.length; i++) {
option.series[1].data[i] = data[sortedList[i]];
}
// 添加等待排序的数据
option.series[0].data = new Array(iList.length);
for (var j = 0; j < iList.length; j++) {
option.series[0].data[j] = data[iList[j]];
}
// 将已排序的数据添加到等待排序的数据中
for (var k = 0; k < sortedList.length; k++) {
option.series[0].data.push(data[sortedList[k]]);
}
// 更新数据
myChart.setOption(option);
// 当所有的数据都已排序时,清除定时器
if (iList.length === 0) {
clearInterval(timer);
}
// 取出iList数组中的第一个下标值
var i = iList[0];
// 高亮当前正在比较的柱子,和下一个排序柱子
option.series[0].itemStyle.normal.color = function (params) {
if (params.dataIndex === i || params.dataIndex === i + 1) {
return '#60acfc';
} else if (sortedList.includes(params.dataIndex)) {
return '#c23531';
} else {
return '#22c3aa';
}
};
// 更新数据
myChart.setOption(option);
// 将已排序的下标值从iList数组中删除
iList.shift();
// 判断是否需要交换位置
if (data[i] > data[i + 1]) {
// 交换两个数
[data[i], data[i + 1]] = [data[i + 1], data[i]];
// 清空数组并将当前位置和下一个位置添加到sortedList数组中
sortedList.push(i, i + 1);
}
}, 1000);
}
// 调用冒泡排序方法
bubbleSort();
</script>
</body>
</html>
阅读全文