echarts做一个动态冒泡排序的柱状图
时间: 2023-11-10 19:02:51 浏览: 107
以下是使用Echarts实现动态冒泡排序柱状图的示例代码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态冒泡排序柱状图</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px; height: 600px;"></div>
<button onclick="startSort()">开始排序</button>
</body>
</html>
```
JavaScript代码:
```javascript
// 初始化数据
var data = [18, 22, 7, 24, 17, 15, 10, 12, 5];
// 初始化echarts实例
var chart = echarts.init(document.getElementById('chart'));
// 配置项
var option = {
title: {
text: '动态冒泡排序柱状图'
},
tooltip: {},
xAxis: {
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
},
yAxis: {},
series: [{
name: '数值',
type: 'bar',
data: data
}]
};
// 绑定数据到echarts实例
chart.setOption(option);
// 冒泡排序函数
function bubbleSort(arr) {
var len = arr.length;
for (var i = 0; i < len - 1; i++) {
for (var j = 0; j < len - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
}
// 开始排序函数
function startSort() {
var i = 0, j = 0;
var timer = setInterval(function() {
// 内层循环完成后,将最大值移到最后
if (j == data.length - i - 1) {
chart.setOption({
series: [{
data: data
}]
});
i++;
j = 0;
}
// 比较相邻的两个数,如果前面的数大于后面的数,则交换位置
if (data[j] > data[j + 1]) {
var temp = data[j];
data[j] = data[j + 1];
data[j + 1] = temp;
chart.setOption({
series: [{
data: data
}]
});
}
// 内层循环控制j的增加
j++;
// 外层循环结束
if (i == data.length - 1) {
clearInterval(timer);
}
}, 1000);
}
```
运行以上代码,点击“开始排序”按钮可以看到动态冒泡排序柱状图的效果。在每一次比较和交换后,图表会自动更新,直到排序完成为止。
阅读全文