一、前言
1、实现功能：
Echarts是一款功能强大的开源可视化图表库，能够通过简单的配置，实现各种各样的图表展示。其中，动态排序柱状图是一种常见的数据可视化形式，可以用来展示数据的变化和排序情况。在这篇文章中，我们将分享一篇使用Echarts来实现动态排序柱状图的效果，注意这里的数据皆为模拟数据。
2、实现思路：
实现动态排序柱状图的关键在于数据的更新和排序。我们需要通过定时器来模拟数据的实时更新，并根据更新后的数据进行排序。具体的实现思路如下：
- 定义一个数组用来保存柱状图的数据，每个元素包含一个值和一个名称。
- 使用Echarts的Bar图表实现柱状图的展示，将数据传入图表配置项中。
- 使用定时器定时更新数据，并且根据更新后的数据进行排序。
- 更新排序后的数据到图表配置项中，通过调用Echarts的setOption方法更新图表。
- 重复步骤3和步骤4，实现动态排序的效果。
二、运行效果
这里由于上传图片的大小的限制所以帧数不是很高，看上去会有一点卡顿，实际是很流畅的。
三、全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态排行图</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
</head>
<body>
<div class="row2">
<div id="yield" style="width: 70vw; height: 80vh; margin: 10vh auto;"></div>
</div>
<script>
const Colors = {
'JavaScript': '#749f83',
'Dart': '#f00',
'Java': '#3bb2d0',
'Python': '#5793f3',
'PHP': '#003580',
'C++': '#ed2939',
'TypeScript': '#000',
'Swift': '#bda29a',
'Ruby': '#d48265',
'Objective-C': '#bc002d',
'SQL': '#61a0a8',
'R': '#00247d',
'Go': '#ef2b2d',
'Kotlin': '#dc143c',
'Rust': '#d52b1e',
'C#': '#ffaebd',
'Scala': '#00247d',
};
const Data = {
'JavaScript': [],
'Python': [],
'Java': [],
'PHP': [],
'C++': [],
'TypeScript': [],
'Swift': [],
'Ruby': [],
'Objective-C': [],
'SQL': [],
'R': [],
'Go': [],
'Kotlin': [],
'Rust': [],
'C#': [],
'Scala': [],
'Dart': []
};
function getRandomValue(min, max) {
return (Math.random() * (max - min) + min).toFixed(2);
}
function replaceDataWithRandomValues(data) {
for (let key in data) {
if (data.hasOwnProperty(key)) {
data[key] = Array.from({ length: 21 }, () => parseFloat(getRandomValue(2900, 30000))); // 2900到 30000 之间的随机数
}
}
}
replaceDataWithRandomValues(Data);
const years = ['2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023'];
const updateFrequency = 10000; // 动画时间2s
let startIndex = 0;
let startYear = years[startIndex];
let option = {
title: {
text: '2003年~2023年计算机编程语言使用人数',
left: 'center',
marginBottom: '10px',
textStyle: {
fontSize: 14,
fontWeight: 'bold'
}
},
grid: {
top: 10,
bottom: 30,
left: 150,
right: 80
},
xAxis: {
max: 'dataMax',
axisLabel: {
formatter: function (n) {
return Math.round(n) + '';
}
}
},
dataset: {
source: Object.keys(Data).map(key => [key].concat(Data[key][startIndex]))
},
yAxis: {
type: 'category',
inverse: true,
max: 6, // 只显示前几名
data: ['JavaScript', 'Dart', 'Java', 'Python', 'PHP', 'C++', 'TypeScript', 'Swift', 'Ruby', 'Objective-C', 'SQL', 'R', 'Go', 'Kotlin', 'Rust', 'C#', 'Scala',],
axisLabel: {
show: true,
fontSize: 14,
formatter: function (value) {
return value;
},
rich: {
flag: {
fontSize: 25,
padding: 5
}
}
}
},
series: [
{
realtimeSort: true,
seriesLayoutBy: 'column',
type: 'bar',
itemStyle: {
color: function (param) {
return Colors[param.value[0]] || '#5470c6';
}
},
encode: {
x: 1,
y: 0
},
label: {
show: true,
precision: 1,
position: 'right',
valueAnimation: true,
fontFamily: 'monospace'
}
}
],
animationDuration: 0,
animationDurationUpdate: updateFrequency,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
graphic: {
elements: [
{
type: 'text',
right: 160,
bottom: 60,
style: {
text: startYear,
font: 'bolder 80px monospace',
fill: 'rgba(100, 100, 100, 0.25)'
},
z: 100
}
]
}
};
let myChart = echarts.init(document.getElementById('yield'));
// 初始设置选项
myChart.setOption(option);
// 更新年份的函数
function updateYear(yearIndex) {
let source = Object.keys(Data).map(key => [key].concat(Data[key][yearIndex]));
option.dataset.source = source;
option.graphic.elements[0].style.text = years[yearIndex];
myChart.setOption(option);
}
// 年份更新的循环逻辑
for (let i = startIndex; i < years.length - 1; ++i) {
(function (i) {
setTimeout(function () {
updateYear(i + 1);
}, (i - startIndex) * updateFrequency);
})(i);
}
</script>
</body>
</html>四、答疑解惑
这是一个非常适合前端Echarts练习的小案例，各位小伙伴可以自行更改样式颜色和内容，如果大家运行时出现问题或代码有什么不懂的地方都可以随时评论留言或联系博主。
还多请各位小伙伴多多点赞支持，你们的支持是我最大的动力。
博主VX：18884281851
谢谢各位的支持~~