Echarts5.3.2可视化案例-时间轴动态柱形图
Echarts案例
参考：
https://echarts.apache.org/zh/index.html
https://echarts.apache.org/examples/zh/editor.html?c=mix-timeline-finance
数据介绍
统计了互联网+最近3年的河南区的获奖情况，想分析下哪几个院校获奖较多，数据如下:
河南科技大学,250,2023
河南理工大学,151,2023
河南师范大学,124,2023
河南工业大学,97,2023
周口师范学院,92,2023
华北水利水电大学,89,2023
洛阳理工学院,80,2023
郑州航空工业管理学院,69,2023
河南大学,61,2023
郑州轻工业大学,54,2023
郑州铁路职业技术学院,49,2023
河南中医药大学,47,2023
河南农业大学,45,2023
郑州大学,36,2023
中原工学院,32,2023
河南工业职业技术学院,25,2023
黄淮学院,24,2023
郑州科技学院,21,2023
河南职业技术学院,20,2023
商丘师范学院,20,2023
河南师范大学,36,2022
河南科技大学,25,2022
河南职业技术学院,21,2022
河南理工大学,15,2022
河南工业大学,12,2022
郑州铁路职业技术学院,12,2022
河南大学,8,2022
河南工业职业技术学院,8,2022
河南农业大学,8,2022
河南经贸职业学院,7,2022
郑州航空工业管理学院,7,2022
河南应用技术职业学院,6,2022
黄河水利职业技术学院,6,2022
郑州大学,6,2022
郑州电力高等专科学校,6,2022
周口师范学院,5,2022
河南农业职业学院,4,2022
华北水利水电大学,4,2022
中原工学院,4,2022
国家开放大学河南分部,3,2022
河南科技大学,55,2021
河南师范大学,44,2021
黄河水利职业技术学院,35,2021
华北水利水电大学,33,2021
河南理工大学,27,2021
河南职业技术学院,27,2021
郑州航空工业管理学院,20,2021
郑州轻工业大学,19,2021
河南工业大学,18,2021
河南工业职业技术学院,17,2021
郑州铁路职业技术学院,17,2021
河南大学,16,2021
洛阳理工学院,16,2021
中原工学院,14,2021
郑州电力高等专科学校,13,2021
河南中医药大学,12,2021
平顶山学院,11,2021
河南应用技术职业学院,10,2021
河南经贸职业学院,9,2021
河南城建学院,8,2021
河南科技大学,77,2020
河南理工大学,58,2020
华北水利水电大学,52,2020
洛阳理工学院,46,2020
郑州航空工业管理学院,46,2020
河南师范大学,40,2020
黄河水利职业技术学院,34,2020
河南经贸职业学院,28,2020
河南应用技术职业学院,26,2020
河南工业职业技术学院,25,2020
河南农业大学,24,2020
中原工学院,24,2020
河南中医药大学,23,2020
许昌职业技术学院,23,2020
郑州电力高等专科学校,22,2020
三门峡职业技术学院,21,2020
黄淮学院,20,2020
南阳师范学院,20,2020
新乡医学院,16,2020
郑州铁路职业技术学院,15,2020
第1列为学校名称，第2列为获奖的数量，第3列为获奖的年份。
代码实现思路
搭建echarts的基本框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="echarts.js"></script>
</head>
<body>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1536px;height:864px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 1.指定图表的配置项和数据
// 1.设置四年的获奖省份
// 1.设置四年的获奖数量
var option = {
// 2.填充时间轴设置与对应的数据
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</body>
</html>
填充数据，包括年份，x轴的学校，y轴的数量
// 指定图表的配置项和数据
var yearlist = ['2020','2021','2022','2023'];
// 指定每个年份的大学排名 用来做x轴
var scohool_list=[
['河南科技大学','河南理工大学','华北水利水电大学','洛阳理工学院','郑州航空工业管理学院','河南师范大学','黄河水利职业技术学院','河南经贸职业学院','河南应用技术职业学院','河南工业职业技术学院','河南农业大学','中原工学院','河南中医药大学','许昌职业技术学院','郑州电力高等专科学校','三门峡职业技术学院','黄淮学院','南阳师范学院','新乡医学院','郑州铁路职业技术学院'],
['河南科技大学','河南师范大学','黄河水利职业技术学院','华北水利水电大学','河南理工大学','河南职业技术学院','郑州航空工业管理学院','郑州轻工业大学','河南工业大学','河南工业职业技术学院','郑州铁路职业技术学院','河南大学','洛阳理工学院','中原工学院','郑州电力高等专科学校','河南中医药大学','平顶山学院','河南应用技术职业学院','河南经贸职业学院','河南城建学院'],
['河南师范大学','河南科技大学','河南职业技术学院','河南理工大学','河南工业大学','郑州铁路职业技术学院','河南大学','河南工业职业技术学院','河南农业大学','河南经贸职业学院','郑州航空工业管理学院','河南应用技术职业学院','黄河水利职业技术学院','郑州大学','郑州电力高等专科学校','周口师范学院','河南农业职业学院','华北水利水电大学','中原工学院','国家开放大学河南分部'],
['河南科技大学','河南理工大学','河南师范大学','河南工业大学','周口师范学院','华北水利水电大学','洛阳理工学院','郑州航空工业管理学院','河南大学','郑州轻工业大学','郑州铁路职业技术学院','河南中医药大学','河南农业大学','郑州大学','中原工学院','河南工业职业技术学院','黄淮学院','郑州科技学院','河南职业技术学院','商丘师范学院']
]
// 2020-2023年的获奖排名， 用来做y轴数据
dataset=[
[77,58,52,46,46,40,34,28,26,25,24,24,23,23,22,21,20,20,16,15],
[55,44,35,33,27,27,20,19,18,17,17,16,16,14,13,12,11,10,9,8],
[36,25,21,15,12,12,8,8,8,7,7,6,6,6,6,5,4,4,4,3],
[250,151,124,97,92,89,80,69,61,54,49,47,45,36,32,25,24,21,20,20]
]
填充option中的数据
var option = {
timeline:{
axisType: 'category',
autoPlay: true, // 是否自定播放
playInterval: 3000, //播放速度 毫秒
data: yearlist,
label:{
fontSize: 18
}
},
baseOption:{
title: {
text: '2020年互联网+获奖信息',
left: 'center',
textStyle:{
fontSize:24
}
},
tooltip: {
trigger: 'axis'
},
toolbox: {
feature: {
saveAsImage: {
}
}
},
legend: {
},
grid: {
left: '10%',
bottom: '15%',
containLabel: true
},
xAxis: [
{
type:'category',
// data: countryList,
data:scohool_list[0],
axisPointer: {
type: 'shadow'
},
axisLabel: {
formatter: function (value) {
// return '{' + value + '| }\n{value|' + value + '}';
return value ;
},
margin: 20,
}
},
],
yAxis:[
{
name:'数量',
type:'value',
nameTextStyle:{
fontSize:18
},
axisLabel:{
fontSize:18
}
},
],
series: [
{
type: 'bar',
data: scohool_list[0],
label:true,
},
]
},
options:[
{
title:{
show:true,
text:2020+'年互联网+获奖信息',
left: 'center',
textStyle:{
fontSize:24
}
},
xAxis: [
{
type:'category',
// data: countryList,
data:scohool_list[0],
axisPointer: {
type: 'shadow'
},
axisLabel: {
formatter: function (value) {
// return '{' + value + '| }\n{value|' + value + '}';
return value ;
},
interval:0,
rotate:90,
// margin: 20,
}
},
],
series: [
{
data: dataset[0],
label:{
show:true,} },
]
},
{
title:{
show:true,
text:2021+'年互联网+获奖信息',
left: 'center',
textStyle:{
fontSize:24
}
},
xAxis: [
{
type:'category',
// data: countryList,
data:scohool_list[1],
axisPointer: {
type: 'shadow'
},
axisLabel: {
formatter: function (value) {
// return '{' + value + '| }\n{value|' + value + '}';
return value ;
},
interval:0,
rotate:90,
// margin: 20,
}
},
],
series: [
{
data: dataset[1],
label:{
show:true,} },
]
},
{
title:{
show:true,
text:2022+'年互联网+获奖信息',
left: 'center',
textStyle:{
fontSize:24
}
},
xAxis: [
{
type:'category',
// data: countryList,
data:scohool_list[2],
axisPointer: {
type: 'shadow'
},
axisLabel: {
formatter: function (value) {
// return '{' + value + '| }\n{value|' + value + '}';
return value ;
},
interval:0,
rotate:90,
// margin: 20,
}
},
],
series: [
{
data: dataset[2],
label:{
show:true,} },
]
},
{
title:{
show:true,
text:2023+'年互联网+获奖信息',
left: 'center',
textStyle:{
fontSize:24
}
},
xAxis: [
{
type:'category',
// data: countryList,
data:scohool_list[3],
axisPointer: {
type: 'shadow'
},
axisLabel: {
formatter: function (value) {
// return '{' + value + '| }\n{value|' + value + '}';
return value ;
},
interval:0,
rotate:90,
// margin: 20,
}
},
],
series: [
{
data: dataset[3],
label:{
show:true,}},
]
},
]
};
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="echarts.js"></script>
</head>
<body>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1536px;height:864px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option = {
}
// 指定图表的配置项和数据
var yearlist = ['2020','2021','2022','2023'];
// 指定每个年份的大学排名 用来做x轴
var scohool_list=[
['河南科技大学','河南理工大学','华北水利水电大学','洛阳理工学院','郑州航空工业管理学院','河南师范大学','黄河水利职业技术学院','河南经贸职业学院','河南应用技术职业学院','河南工业职业技术学院','河南农业大学','中原工学院','河南中医药大学','许昌职业技术学院','郑州电力高等专科学校','三门峡职业技术学院','黄淮学院','南阳师范学院','新乡医学院','郑州铁路职业技术学院'],
['河南科技大学','河南师范大学','黄河水利职业技术学院','华北水利水电大学','河南理工大学','河南职业技术学院','郑州航空工业管理学院','郑州轻工业大学','河南工业大学','河南工业职业技术学院','郑州铁路职业技术学院','河南大学','洛阳理工学院','中原工学院','郑州电力高等专科学校','河南中医药大学','平顶山学院','河南应用技术职业学院','河南经贸职业学院','河南城建学院'],
['河南师范大学','河南科技大学','河南职业技术学院','河南理工大学','河南工业大学','郑州铁路职业技术学院','河南大学','河南工业职业技术学院','河南农业大学','河南经贸职业学院','郑州航空工业管理学院','河南应用技术职业学院','黄河水利职业技术学院','郑州大学','郑州电力高等专科学校','周口师范学院','河南农业职业学院','华北水利水电大学','中原工学院','国家开放大学河南分部'],
['河南科技大学','河南理工大学','河南师范大学','河南工业大学','周口师范学院','华北水利水电大学','洛阳理工学院','郑州航空工业管理学院','河南大学','郑州轻工业大学','郑州铁路职业技术学院','河南中医药大学','河南农业大学','郑州大学','中原工学院','河南工业职业技术学院','黄淮学院','郑州科技学院','河南职业技术学院','商丘师范学院']
]
// 2020-2023年的获奖排名， 用来做y轴数据
dataset=[
[77,58,52,46,46,40,34,28,26,25,24,24,23,23,22,21,20,20,16,15],
[55,44,35,33,27,27,20,19,18,17,17,16,16,14,13,12,11,10,9,8],
[36,25,21,15,12,12,8,8,8,7,7,6,6,6,6,5,4,4,4,3],
[250,151,124,97,92,89,80,69,61,54,49,47,45,36,32,25,24,21,20,20]
]
var option = {
timeline:{
axisType: 'category',
autoPlay: true, // 是否自定播放
playInterval: 3000, //播放速度 毫秒
data: yearlist,
label:{
fontSize: 18
}
},
baseOption:{
title: {
text: '2020年互联网+获奖信息',
left: 'center',
textStyle:{
fontSize:24
}
},
tooltip: {
trigger: 'axis'
},
toolbox: {
feature: {
saveAsImage: {
}
}
},
legend: {
},
grid: {
left: '10%',
bottom: '15%',
containLabel: true
},
xAxis: [
{
type:'category',
// data: countryList,
data:scohool_list[0],
axisPointer: {
type: 'shadow'
},
axisLabel: {
formatter: function (value) {
// return '{' + value + '| }\n{value|' + value + '}';
return value ;
},
margin: 20,
}
},
],
yAxis:[
{
name:'数量',
type:'value',
nameTextStyle:{
fontSize:18
},
axisLabel:{
fontSize:18
}
},
],
series: [
{
type: 'bar',
data: scohool_list[0],
label:true,
},
]
},
options:[
{
title:{
show:true,
text:2020+'年互联网+获奖信息',
left: 'center',
textStyle:{
fontSize:24
}
},
xAxis: [
{
type:'category',
// data: countryList,
data:scohool_list[0],
axisPointer: {
type: 'shadow'
},
axisLabel: {
formatter: function (value) {
// return '{' + value + '| }\n{value|' + value + '}';
return value ;
},
interval:0,
rotate:90,
// margin: 20,
}
},
],
series: [
{
data: dataset[0],
label:{
show:true,} },
]
},
{
title:{
show:true,
text:2021+'年互联网+获奖信息',
left: 'center',
textStyle:{
fontSize:24
}
},
xAxis: [
{
type:'category',
// data: countryList,
data:scohool_list[1],
axisPointer: {
type: 'shadow'
},
axisLabel: {
formatter: function (value) {
// return '{' + value + '| }\n{value|' + value + '}';
return value ;
},
interval:0,
rotate:90,
// margin: 20,
}
},
],
series: [
{
data: dataset[1],
label:{
show:true,} },
]
},
{
title:{
show:true,
text:2022+'年互联网+获奖信息',
left: 'center',
textStyle:{
fontSize:24
}
},
xAxis: [
{
type:'category',
// data: countryList,
data:scohool_list[2],
axisPointer: {
type: 'shadow'
},
axisLabel: {
formatter: function (value) {
// return '{' + value + '| }\n{value|' + value + '}';
return value ;
},
interval:0,
rotate:90,
// margin: 20,
}
},
],
series: [
{
data: dataset[2],
label:{
show:true,} },
]
},
{
title:{
show:true,
text:2023+'年互联网+获奖信息',
left: 'center',
textStyle:{
fontSize:24
}
},
xAxis: [
{
type:'category',
// data: countryList,
data:scohool_list[3],
axisPointer: {
type: 'shadow'
},
axisLabel: {
formatter: function (value) {
// return '{' + value + '| }\n{value|' + value + '}';
return value ;
},
interval:0,
rotate:90,
// margin: 20,
}
},
],
series: [
{
data: dataset[3],
label:{
show:true,}},
]
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</body>
</html>