本系列文章配套代码获取有以下两种途径：
-
通过百度网盘获取：
链接：https://pan.baidu.com/s/1W26KrZK7RjwgxvulccTA9w?pwd=mnsj提取码：mnsj
-
前往GitHub获取：
https://github.com/returu/Data_Visualization动态排序柱状图是一种展示随时间变化的数据排名变化的图表，从 ECharts 5 开始内置支持。
需要注意的是，动态排序柱状图通常是横向的柱条，如果想要采用纵向的柱条，只要把下面代码中的 X 轴和 Y 轴相反设置即可。
首先实现简单的柱状图，但是数值是按从大到小排序的。
配置项中与之前介绍的基础柱状图不同的主要是以下两点：
-
柱状图系列的 realtimeSort设为true，表示开启该系列的动态排序效果； -
yAxis.inverse设为true，表示Y轴从下往上是从小到大的排列。
代码如下所示：
1 // 设置图表的参数
2 var option = {
3 title: {
4 text: "各品类销量"
5 },
6
7 tooltip: {},
8
9 // 图例
10 legend: {
11 data: ["销量"]
12 },
13
14
15 // x轴
16 xAxis: {
17 type: "value",
18
19 },
20
21 // y轴
22 yAxis: {
23 type: "category",
24 data: ['品类1', '品类2', '品类3', '品类4'],
25 inverse:true, //是否是反向坐标轴
26 },
27
28
29 // 数据系列
30 series: [{
31 name: "销量",
32 type: "bar",
33 label: {
34 show: true,
35 position: "right",
36 fontWeight: "bold",
37 valueAnimation: true // 是否开启动画，开启后数值标签会连续变化
38 },
39 data: [220, 300, 400, 120],
40 realtimeSort:true, // 是否开启实时排序，用来实现动态排序图效果
41 }],
42 };
可视化结果如下图所示：
现在在上一步的基础上实现动态排序柱状图。
首先定义year和data两个变量，year表示年份，data为各年份对应的数据。
1 var year = [2023, 2022, 2021, 2020, 2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004]
2 var data = [
3 [500, 390, 400, 600],
4 [450, 380, 500, 580],
5 [420, 360, 480, 550],
6 [430, 330, 370, 500],
7 [410, 350, 450, 440],
8 [400, 300, 360, 440],
9 [380, 310, 480, 350],
10 [350, 320, 360, 360],
11 [340, 310, 450, 300],
12 [320, 300, 430, 280],
13 [310, 320, 410, 240],
14 [300, 310, 430, 230],
15 [350, 300, 400, 220],
16 [310, 290, 380, 250],
17 [290, 280, 420, 220],
18 [260, 270, 400, 190],
19 [220, 250, 410, 180],
20 [200, 240, 400, 170],
21 [150, 220, 380, 180],
22 [220, 300, 400, 120]
23 ]
实现动态排序柱状图的关键是持续更新图表中的数据，即开始呈现的是最后2004年的数据，然后依次更新成2005年、2006年等等数据即可。
因此，可以在原有基础上在设置一个新的配置项option1，用于更新历年数据。
1 // 更新数据
2 for(let i = 0;i < data.length;i++){
3 // setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。
4 // setTimeout方法接收两个参数，第一个参数为回调函数函数或字符串，第二个参数为触发时间(单位：毫秒)
5 setTimeout(function(){
6 var option1 = {
7 title:{text:year[data.length-i-1].toString()+"年销量"}, //更新标题
8 series:[{
9 data:data[data.length-i-1] // 更新数据
10 }]
11 }
12 // console.log(option1)
13 myChart.setOption(option1) // 使用指定的配置项和数据显示图表
14 } , 2000*i)
15 }代码如下所示，其中：
-
animationDuration表示第一次柱条排序动画的时长； -
animationDurationUpdate表示表示每次更新动画时长，这一数值应与调用setOption改变数据的频率相同； -
如果想要实时改变标签，需要将 series.label.valueAnimation设为true； -
另外，如果想只显示前
n名，可以将yAxis.max设为n - 1，否则显示所有柱条。
1<!DOCTYPE html>
2<html>
3
4<head>
5 <meta charset="utf-8">
6 <!-- 引入下载的 echarts.js 文件 -->
7 <script type="text/javascript" src="js/echarts.js"></script>
8 <title>第一个ECharts图表</title>
9</head>
10
11<body>
12 <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
13 <div id="container" style="width:600px;height:400px;"></div>
14 <script type="text/javascript">
15 // 基于准备好的dom，初始化echarts实例
16 var myChart = echarts.init(document.getElementById('container'));
17
18 var year = [2023, 2022, 2021, 2020, 2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004]
19 var data = [
20 [500, 390, 400, 600],
21 [450, 380, 500, 580],
22 [420, 360, 480, 550],
23 [430, 330, 370, 500],
24 [410, 350, 450, 440],
25 [400, 300, 360, 440],
26 [380, 310, 480, 350],
27 [350, 320, 360, 360],
28 [340, 310, 450, 300],
29 [320, 300, 430, 280],
30 [310, 320, 410, 240],
31 [300, 310, 430, 230],
32 [350, 300, 400, 220],
33 [310, 290, 380, 250],
34 [290, 280, 420, 220],
35 [260, 270, 400, 190],
36 [220, 250, 410, 180],
37 [200, 240, 400, 170],
38 [150, 220, 380, 180],
39 [220, 300, 400, 120]
40 ]
41
42 // 设置图表的参数
43 var option = {
44 title: {
45 text: "各品类销量"
46 },
47
48 tooltip: {},
49
50 // 图例
51 legend: {
52 data: ["销量"]
53 },
54
55
56 // x轴
57 xAxis: {
58 type: "value",
59
60 },
61
62 // y轴
63 yAxis: {
64 type: "category",
65 data: ['品类1', '品类2', '品类3', '品类4'],
66 inverse:true, //是否是反向坐标轴
67 // max:2, // 如果想只显示前 n 名，将 yAxis.max 设为 n - 1，否则显示所有柱条
68 },
69
70
71 // 数据系列
72 series: [{
73 name: "销量",
74 type: "bar",
75 label: {
76 show: true,
77 position: "right",
78 fontWeight: "bold",
79 valueAnimation: true // 是否开启动画，开启后数值标签会连续变化
80 },
81 data: [220, 300, 400, 120],
82 realtimeSort:true, // 是否开启实时排序，用来实现动态排序图效果
83 }],
84 animationDuration: 100, // 初始动画的时长
85 animationDurationUpdate: 2000, // 数据更新动画的时长
86 animationEasing: 'linear', // 初始动画的缓动效果
87 animationEasingUpdate: 'linear', // 数据更新动画的缓动效果
88 };
89
90
91 // 使用指定的配置项和数据显示图表
92 myChart.setOption(option);
93
94 // 更新数据
95 for(let i = 0;i < data.length;i++){
96 // setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。
97 // setTimeout方法接收两个参数，第一个参数为回调函数函数或字符串，第二个参数为触发时间(单位：毫秒)
98 setTimeout(function(){
99 var option1 = {
100 title:{text:year[data.length-i-1].toString()+"年销量"}, //更新标题
101 series:[{
102 data:data[data.length-i-1] // 更新数据
103 }]
104 }
105 // console.log(option1)
106 myChart.setOption(option1) // 使用指定的配置项和数据显示图表
107 } , 2000*i)
108 }
109 </script>
110</body>
111
112</html>-
可视化结果如下图所示：
更多参数和配置可以查看官方文档：
1https://echarts.apache.org/zh/option.html
本篇文章来源于微信公众号: 码农设计师
