<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="echarts.min.js" ></script>
</head>
<body>
<div id="main" style="width:1200px;height:500px;background-color: aliceblue;">
<script type="text/javascript">
let myChart = echarts.init(document.getElementById('main'));
let data = [3, 38, 44, 5, 47, 15, 36, 26, 27, 2, 46, 4, 19, 50, 48];
let option = {
title: {
text: '冒泡排序',
},
xAxis: {
data: data
},
yAxis: {
},
series: [{
type: 'bar',
data: data,
itemStyle: {
color: '#5470c6'
},
label: {
show: true
}
}]
};
myChart.setOption(option);
async function bubbleSort(data) {
let len = data.length;
for (let i = 0; i < len - 1; i++) {
for (let j = 0; j < len - i - 1; j++) {
if (data[j] > data[j + 1]) {
let temp = data[j];
data[j] = data[j + 1];
data[j + 1] = temp;
myChart.setOption({
xAxis:{
data: data
},
series: [{
data: data,
itemStyle: {
color: function (params) {
if (params.dataIndex === j || params.dataIndex === j + 1) {
return '#ff0000';
} else {
return '#5470c6';
}
}
}
}]
});
await new Promise(r => setTimeout(r, 500));
}
}
myChart.setOption({
xAxis: {
data: data
},
series: [{
itemStyle: {
color: '#5470c6'
}
}]
});
}
}
bubbleSort(data);
</script>
</div>
</body>
</html>
Echarts はバブルソートを実装します
おすすめ
転載: blog.csdn.net/weixin_52188227/article/details/129941464
おすすめ
ランキング