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。

相关文章

PostgreSQL的扩展dict_int应用案例解析

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法
阅读更多...
Python中re模块结合正则表达式的实际应用案例

Python中re模块结合正则表达式的实际应用案例

《Python中re模块结合正则表达式的实际应用案例》Python中的re模块是用于处理正则表达式的强大工具,正则表达式是一种用来匹配字符串的模式,它可以在文本中搜索和匹配特定的字符串模式,这篇文章主... 目录前言re模块常用函数一、查看文本中是否包含 A 或 B 字符串二、替换多个关键词为统一格式三、提
阅读更多...
springboot如何通过http动态操作xxl-job任务

springboot如何通过http动态操作xxl-job任务

《springboot如何通过http动态操作xxl-job任务》：本文主要介绍springboot如何通过http动态操作xxl-job任务的问题,具有很好的参考价值,希望对大家有所帮助,如有错... 目录springboot通过http动态操作xxl-job任务一、maven依赖二、配置文件三、xxl-
阅读更多...
Python get()函数用法案例详解

Python get()函数用法案例详解

《Pythonget()函数用法案例详解》在Python中,get()是字典（dict）类型的内置方法,用于安全地获取字典中指定键对应的值,它的核心作用是避免因访问不存在的键而引发KeyError错... 目录简介基本语法一、用法二、案例：安全访问未知键三、案例：配置参数默认值简介python是一种高级编
阅读更多...
MySQL中的索引结构和分类实战案例详解

MySQL中的索引结构和分类实战案例详解

《MySQL中的索引结构和分类实战案例详解》本文详解MySQL索引结构与分类,涵盖B树、B+树、哈希及全文索引,分析其原理与优劣势,并结合实战案例探讨创建、管理及优化技巧,助力提升查询性能,感兴趣的朋... 目录一、索引概述1.1 索引的定义与作用1.2 索引的基本原理二、索引结构详解2.1 B树索引2.2
阅读更多...
从入门到精通MySQL 数据库索引(实战案例)

从入门到精通MySQL 数据库索引(实战案例)

《从入门到精通MySQL数据库索引(实战案例)》索引是数据库的目录,提升查询速度,主要类型包括BTree、Hash、全文、空间索引,需根据场景选择,建议用于高频查询、关联字段、排序等,避免重复率高或... 目录一、索引是什么？能干嘛？核心作用：二、索引的 4 种主要类型（附通俗例子）1. BTree 索引（
阅读更多...
HTML中meta标签的常见使用案例(示例详解)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化（seo）三、社交媒体集成四、移动
阅读更多...
六个案例搞懂mysql间隙锁

六个案例搞懂mysql间隙锁

《六个案例搞懂mysql间隙锁》MySQL中的间隙是指索引中两个索引键之间的空间,间隙锁用于防止范围查询期间的幻读,本文主要介绍了六个案例搞懂mysql间隙锁,具有一定的参考价值,感兴趣的可以了解一下... 目录概念解释间隙锁详解间隙锁触发条件间隙锁加锁规则案例演示案例一：唯一索引等值锁定存在的数据案例二：
阅读更多...
Java调用C#动态库的三种方法详解

Java调用C#动态库的三种方法详解

《Java调用C#动态库的三种方法详解》在这个多语言编程的时代,Java和C#就像两位才华横溢的舞者,各自在不同的舞台上展现着独特的魅力,然而,当它们携手合作时,又会碰撞出怎样绚丽的火花呢？今天,我们... 目录方法1：C++/CLI搭建桥梁——Java ↔ C# 的“翻译官”步骤1：创建C#类库（.NET
阅读更多...
Python数据分析与可视化的全面指南(从数据清洗到图表呈现)

Python数据分析与可视化的全面指南(从数据清洗到图表呈现)

《Python数据分析与可视化的全面指南(从数据清洗到图表呈现)》Python是数据分析与可视化领域中最受欢迎的编程语言之一,凭借其丰富的库和工具,Python能够帮助我们快速处理、分析数据并生成高质... 目录一、数据采集与初步探索二、数据清洗的七种武器1. 缺失值处理策略2. 异常值检测与修正3. 数据
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2