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。

相关文章

MyBatis分页查询实战案例完整流程

MyBatis分页查询实战案例完整流程

《MyBatis分页查询实战案例完整流程》MyBatis是一个强大的Java持久层框架,支持自定义SQL和高级映射,本案例以员工工资信息管理为例,详细讲解如何在IDEA中使用MyBatis结合Page... 目录1. MyBATis框架简介2. 分页查询原理与应用场景2.1 分页查询的基本原理2.1.1 分
阅读更多...
Java使用Javassist动态生成HelloWorld类

Java使用Javassist动态生成HelloWorld类

《Java使用Javassist动态生成HelloWorld类》Javassist是一个非常强大的字节码操作和定义库,它允许开发者在运行时创建新的类或者修改现有的类,本文将简单介绍如何使用Javass... 目录1. Javassist简介2. 环境准备3. 动态生成HelloWorld类3.1 创建CtC
阅读更多...
深度解析Java @Serial 注解及常见错误案例

深度解析Java @Serial 注解及常见错误案例

《深度解析Java@Serial注解及常见错误案例》Java14引入@Serial注解,用于编译时校验序列化成员,替代传统方式解决运行时错误,适用于Serializable类的方法/字段,需注意签... 目录Java @Serial 注解深度解析1. 注解本质2. 核心作用(1) 主要用途(2) 适用位置3
阅读更多...
Java 正则表达式的使用实战案例

Java 正则表达式的使用实战案例

《Java正则表达式的使用实战案例》本文详细介绍了Java正则表达式的使用方法,涵盖语法细节、核心类方法、高级特性及实战案例,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录一、正则表达式语法详解1. 基础字符匹配2. 字符类（[]定义）3. 量词（控制匹配次数）4. 边
阅读更多...
Python Counter 函数使用案例

Python Counter 函数使用案例

《PythonCounter函数使用案例》Counter是collections模块中的一个类,专门用于对可迭代对象中的元素进行计数,接下来通过本文给大家介绍PythonCounter函数使用案例... 目录一、Counter函数概述二、基本使用案例（一）列表元素计数（二）字符串字符计数（三）元组计数三、C
阅读更多...
Spring Boot 整合 SSE(Server-Sent Events)实战案例(全网最全)

Spring Boot 整合 SSE(Server-Sent Events)实战案例(全网最全)

《SpringBoot整合SSE(Server-SentEvents)实战案例(全网最全)》本文通过实战案例讲解SpringBoot整合SSE技术,涵盖实现原理、代码配置、异常处理及前端交互,... 目录Spring Boot 整合 SSE（Server-Sent Events）1、简述SSE与其他技术的对
阅读更多...
MySQL 临时表与复制表操作全流程案例

MySQL 临时表与复制表操作全流程案例

《MySQL临时表与复制表操作全流程案例》本文介绍MySQL临时表与复制表的区别与使用,涵盖生命周期、存储机制、操作限制、创建方法及常见问题,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小... 目录一、mysql 临时表（一）核心特性拓展（二）操作全流程案例1. 复杂查询中的临时表应用2. 临时
阅读更多...
MySQL 数据库表与查询操作实战案例

MySQL 数据库表与查询操作实战案例

《MySQL数据库表与查询操作实战案例》本文将通过实际案例,详细介绍MySQL中数据库表的设计、数据插入以及常用的查询操作,帮助初学者快速上手,感兴趣的朋友跟随小编一起看看吧... 目录mysql 数据库表操作与查询实战案例项目一：产品相关数据库设计与创建一、数据库及表结构设计二、数据库与表的创建项目二：员
阅读更多...
Python实现数据可视化图表生成(适合新手入门)

Python实现数据可视化图表生成(适合新手入门)

《Python实现数据可视化图表生成(适合新手入门)》在数据科学和数据分析的新时代,高效、直观的数据可视化工具显得尤为重要,下面：本文主要介绍Python实现数据可视化图表生成的相关资料,文中通过... 目录前言为什么需要数据可视化准备工作基本图表绘制折线图柱状图散点图使用Seaborn创建高级图表箱线图热
阅读更多...
C#中的Drawing 类案例详解

C#中的Drawing 类案例详解

《C#中的Drawing类案例详解》文章解析WPF与WinForms的Drawing类差异,涵盖命名空间、继承链、常用类及应用场景,通过案例展示如何创建带阴影圆角矩形按钮,强调WPF的轻量、可动画特... 目录一、Drawing 是什么？二、典型用法三、案例：画一个“带阴影的圆角矩形按钮”四、WinForm
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2