Echarts5.3.2 Visualization Case-Timeline Dynamic Column Chart
Echarts case
reference:
https://echarts.apache.org/zh/index.html
https://echarts.apache.org/examples/zh/editor.html?c=mix-timeline-finance
Data introduction
We have compiled statistics on the Internet+ awards in Henan District in the past three years. I would like to analyze which colleges and universities have won more awards. The data is as follows:
Henan University of Science and Technology, 250,2023
Henan University of Science and Technology, 151,2023
Henan Normal University, 124,2023
Henan University of Technology, 97, 2023
Zhoukou Normal University, 92, 2023
North China University of Water Conservancy and Hydropower, 89, 2023
Luoyang Institute of Technology, 80, 2023
Zhengzhou Institute of Aviation Industry Management, 69, 2023
Henan University, 61, 2023
Zhengzhou University of Light Industry, 54, 2023
Zhengzhou Railway Vocational and Technical College, 49, 2023
Henan University of Traditional Chinese Medicine, 47, 2023
Henan Agricultural University, 45, 2023
Zhengzhou University, 36, 2023
Zhongyuan Institute of Technology, 32, 2023
Henan Industrial Vocational and Technical College, 25, 2023
Huanghuai College, 24, 2023
Zhengzhou University of Science and Technology, 21, 2023
Henan Vocational and Technical College, 20, 2023
Shangqiu Normal University, 20, 2023
Henan Normal University, 36, 2022
Henan Science and Technology University,25,2022
Henan Vocational and Technical College,21,2022
Henan University of Technology,15,2022
Henan University of Technology ,12,2022
Zhengzhou Railway Vocational and Technical College,12,2022
Henan University,8,2022
Henan Industrial Vocational Technology College, 8, 2022
Henan Agricultural University, 8, 2022
Henan Vocational College of Economics and Trade, 7, 2022
Zhengzhou Aviation Industry School of Management, 7, 2022
Henan Vocational College of Applied Technology, 6, 2022
Yellow River Water Conservancy Vocational and Technical College, 6, 2022
Zhengzhou University, 6, 2022
Zhengzhou Electric Power College, 6, 2022
Zhoukou Normal University, 5, 2022
Henan Agricultural Vocational College, 4, 2022
North China University of Water Conservancy and Hydropower, 4, 2022
Zhongyuan Institute of Technology, 4, 2022
Open University of China, Henan Branch, 3, 2022
Henan University of Science and Technology, 55, 2021
Henan Normal University, 44, 2021
Yellow River Water Conservancy Vocational and Technical College, 35, 2021
North China University of Water Conservancy and Hydropower, 33, 2021
Henan University of Science and Technology, 27, 2021
Henan Vocational and Technical College, 27, 2021
Zhengzhou Aviation Industry Management College, 20, 2021
Zhengzhou University of Light Industry, 19, 2021
Henan University of Technology,18,2021
Henan Industrial Vocational and Technical College,17,2021
Zhengzhou Railway Vocational and Technical College,17,2021
Henan University,16,2021
Luoyang Institute of Technology,16,2021
Zhongyuan Institute of Technology,14,2021
Zhengzhou Electric Power College, 13, 2021
Henan University of Traditional Chinese Medicine, 12, 2021
Pingdingshan University, 11, 2021
Henan Vocational College of Applied Technology, 10, 2021
Henan Vocational College of Economics and Trade, 9, 2021
Henan Urban Construction College, 8, 2021
Henan University of Science and Technology, 77, 2020
Henan University of Science and Technology, 58, 2020
North China University of Water Conservancy and Hydropower, 52, 2020
Luoyang Institute of Technology, 46, 2020
Zhengzhou Aviation Industry Management College, 46, 2020
Henan Normal University, 40, 2020
Yellow River Water Conservancy Vocational and Technical College, 34, 2020
Henan Economic and Trade Vocational College, 28, 2020
Henan Applied Technology Vocational College, 26, 2020
Henan Industrial Vocational and Technical College,25,2020
Henan Agricultural University,24,2020
Zhongyuan Institute of Technology,24,2020
Henan University of Traditional Chinese Medicine, 23, 2020
Xuchang Vocational and Technical College, 23, 2020
Zhengzhou Electric Power College, 22, 2020 Nanyang Normal University, 20, 2020 Zhengzhou Railway Vocational and Technical College, 15, 2020 Xinxiang Medical College, 16, 2020 Huanghuai College, 20, 2020
Sanmenxia Vocational and Technical College, 21, 2020
The first column is the name of the school, the second column is the number of awards, and the third column is the year of the award.
Code implementation ideas
Build the basic framework of 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>
Fill in the data, including year, school on the x-axis, and number on the y-axis
// 指定图表的配置项和数据
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]
]
Fill in the data in 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,}},
]
},
]
};
The complete code is as follows:
<!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>