Echarts5.3.2可视化案例-时间轴动态柱形图

2023-12-28 14:20
文章标签 动态 可视化 案例 柱形图 时间轴 echarts5.3

本文主要是介绍Echarts5.3.2可视化案例-时间轴动态柱形图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Echarts5.3.2可视化案例-时间轴动态柱形图

  • Echarts案例
    • 参考：
    • 数据介绍
    • 代码实现思路
      • 搭建echarts的基本框架
      • 填充数据，包括年份，x轴的学校，y轴的数量
      • 填充option中的数据
    • 完整代码如下:

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>

这篇关于Echarts5.3.2可视化案例-时间轴动态柱形图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/546240。

相关文章

springboot循环依赖问题案例代码及解决办法

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖（即BeanA依赖BeanB,而BeanB又依赖BeanA）,会导致Spring的... 目录1. 什么是循环依赖？2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1：使用 @La
阅读更多...
C#如何动态创建Label,及动态label事件

C#如何动态创建Label,及动态label事件

《C#如何动态创建Label,及动态label事件》：本文主要介绍C#如何动态创建Label,及动态label事件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C#如何动态创建Label,及动态label事件第一点：switch中的生成我们的label事件接着，
阅读更多...
SpringCloud动态配置注解@RefreshScope与@Component的深度解析

SpringCloud动态配置注解@RefreshScope与@Component的深度解析

《SpringCloud动态配置注解@RefreshScope与@Component的深度解析》在现代微服务架构中,动态配置管理是一个关键需求,本文将为大家介绍SpringCloud中相关的注解@Re... 目录引言1. @RefreshScope 的作用与原理1.1 什么是 @RefreshScope1.
阅读更多...
MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL？1.2 动态SQL的优点1.3 动态S
阅读更多...
Python Dash框架在数据可视化仪表板中的应用与实践记录

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash？1.1
阅读更多...
使用Folium在Python中进行地图可视化的操作指南

使用Folium在Python中进行地图可视化的操作指南

《使用Folium在Python中进行地图可视化的操作指南》在数据分析和可视化领域,地图可视化是一项非常重要的技能,它能够帮助我们更直观地理解和展示地理空间数据,Folium是一个基于Python的地... 目录引言一、Folium简介与安装1. Folium简介2. 安装Folium二、基础使用1. 创建
阅读更多...
mybatis-plus 实现查询表名动态修改的示例代码

mybatis-plus 实现查询表名动态修改的示例代码

《mybatis-plus实现查询表名动态修改的示例代码》通过MyBatis-Plus实现表名的动态替换,根据配置或入参选择不同的表,本文主要介绍了mybatis-plus实现查询表名动态修改的示... 目录实现数据库初始化依赖包配置读取类设置 myBATis-plus 插件测试通过 mybatis-plu
阅读更多...
MySQL中实现多表查询的操作方法(配sql+实操图+案例巩固 通俗易懂版)

MySQL中实现多表查询的操作方法(配sql+实操图+案例巩固 通俗易懂版)

《MySQL中实现多表查询的操作方法(配sql+实操图+案例巩固通俗易懂版)》本文主要讲解了MySQL中的多表查询,包括子查询、笛卡尔积、自连接、多表查询的实现方法以及多列子查询等,通过实际例子和操... 目录复合查询1. 回顾查询基本操作group by 分组having1. 显示部门号为10的部门名，员
阅读更多...
基于Python开发PDF转PNG的可视化工具

基于Python开发PDF转PNG的可视化工具

《基于Python开发PDF转PNG的可视化工具》在数字文档处理领域,PDF到图像格式的转换是常见需求,本文介绍如何利用Python的PyMuPDF库和Tkinter框架开发一个带图形界面的PDF转P... 目录一、引言二、功能特性三、技术架构1. 技术栈组成2. 系统架构javascript设计3.效果图
阅读更多...
基于Canvas的Html5多时区动态时钟实战代码

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》：本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示，通过Canvas的API，可以绘制出6个不同城市的时钟，并且这些时钟可以动态转动，每个时钟上都会标注出对应的24小时制时间，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2