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。

相关文章

Spring Gateway动态路由实现方案

Spring Gateway动态路由实现方案

《SpringGateway动态路由实现方案》本文主要介绍了SpringGateway动态路由实现方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随... 目录前沿何为路由RouteDefinitionRouteLocator工作流程动态路由实现尾巴前沿S
阅读更多...
Java中的分布式系统开发基于 Zookeeper 与 Dubbo 的应用案例解析

Java中的分布式系统开发基于 Zookeeper 与 Dubbo 的应用案例解析

《Java中的分布式系统开发基于Zookeeper与Dubbo的应用案例解析》本文将通过实际案例,带你走进基于Zookeeper与Dubbo的分布式系统开发,本文通过实例代码给大家介绍的非常详... 目录Java 中的分布式系统开发基于 Zookeeper 与 Dubbo 的应用案例一、分布式系统中的挑战二
阅读更多...
Java 中的 equals 和 hashCode 方法关系与正确重写实践案例

Java 中的 equals 和 hashCode 方法关系与正确重写实践案例

《Java中的equals和hashCode方法关系与正确重写实践案例》在Java中,equals和hashCode方法是Object类的核心方法,广泛用于对象比较和哈希集合（如HashMa... 目录一、背景与需求分析1.1 equals 和 hashCode 的背景1.2 需求分析1.3 技术挑战1.4
阅读更多...
Python动态处理文件编码的完整指南

Python动态处理文件编码的完整指南

《Python动态处理文件编码的完整指南》在Python文件处理的高级应用中,我们经常会遇到需要动态处理文件编码的场景,本文将深入探讨Python中动态处理文件编码的技术,有需要的小伙伴可以了解下... 目录引言一、理解python的文件编码体系1.1 Python的IO层次结构1.2 编码问题的常见场景二
阅读更多...
Java中实现对象的拷贝案例讲解

Java中实现对象的拷贝案例讲解

《Java中实现对象的拷贝案例讲解》Java对象拷贝分为浅拷贝（复制值及引用地址）和深拷贝（递归复制所有引用对象）,常用方法包括Object.clone()、序列化及JSON转换,需处理循环引用问题,... 目录对象的拷贝简介浅拷贝和深拷贝浅拷贝深拷贝深拷贝和循环引用总结对象的拷贝简介对象的拷贝，把一个
阅读更多...
Java中最全最基础的IO流概述和简介案例分析

Java中最全最基础的IO流概述和简介案例分析

《Java中最全最基础的IO流概述和简介案例分析》JavaIO流用于程序与外部设备的数据交互,分为字节流（InputStream/OutputStream）和字符流（Reader/Writer）,处理... 目录IO流简介IO是什么应用场景IO流的分类流的超类类型字节文件流应用简介核心API文件输出流应用文
阅读更多...
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. 边
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2