Echarts实现冒泡排序

最新推荐文章于 2024-05-27 17:03:27 发布

@Benron

最新推荐文章于 2024-05-27 17:03:27 发布

阅读量417

点赞数 1

文章标签： echarts javascript

本文链接：https://blog.csdn.net/weixin_52188227/article/details/129941464

版权

<!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>