Echarts5.3.2可视化案例-时间轴动态柱形图
参考：
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的基本框架
代码语言：javascript复制<!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轴的数量
代码语言：javascript复制 // 指定图表的配置项和数据
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中的数据
代码语言：javascript复制 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,}},
]
},
]
};完整代码如下:
代码语言：javascript复制<!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>
