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。

相关文章

Golang操作DuckDB实战案例分享

Golang操作DuckDB实战案例分享

《Golang操作DuckDB实战案例分享》DuckDB是一个嵌入式SQL数据库引擎,它与众所周知的SQLite非常相似,但它是为olap风格的工作负载设计的,DuckDB支持各种数据类型和SQL特性... 目录DuckDB的主要优点环境准备初始化表和数据查询单行或多行错误处理和事务完整代码最后总结Duck
阅读更多...
Python中的可视化设计与UI界面实现

Python中的可视化设计与UI界面实现

《Python中的可视化设计与UI界面实现》本文介绍了如何使用Python创建用户界面（UI）,包括使用Tkinter、PyQt、Kivy等库进行基本窗口、动态图表和动画效果的实现,通过示例代码,展示... 目录从像素到界面：python带你玩转UI设计示例：使用Tkinter创建一个简单的窗口绘图魔法：用
阅读更多...
VUE动态绑定class类的三种常用方式及适用场景详解

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式（对象添加：情景一）2.动态添加一个class样式（字符串添加：情
阅读更多...
基于Qt Qml实现时间轴组件

基于Qt Qml实现时间轴组件

《基于QtQml实现时间轴组件》时间轴组件是现代用户界面中常见的元素,用于按时间顺序展示事件,本文主要为大家详细介绍了如何使用Qml实现一个简单的时间轴组件,需要的可以参考下... 目录写在前面效果图组件概述实现细节1. 组件结构2. 属性定义3. 数据模型4. 事件项的添加和排序5. 事件项的渲染如何使用
阅读更多...
MySQL不使用子查询的原因及优化案例

MySQL不使用子查询的原因及优化案例

《MySQL不使用子查询的原因及优化案例》对于mysql,不推荐使用子查询,效率太差,执行子查询时,MYSQL需要创建临时表,查询完毕后再删除这些临时表,所以,子查询的速度会受到一定的影响,本文给大家... 目录不推荐使用子查询和JOIN的原因解决方案优化案例案例1：查询所有有库存的商品信息案例2：使用EX
阅读更多...
SpringCloud配置动态更新原理解析

SpringCloud配置动态更新原理解析

《SpringCloud配置动态更新原理解析》在微服务架构的浩瀚星海中,服务配置的动态更新如同魔法一般,能够让应用在不重启的情况下,实时响应配置的变更,SpringCloud作为微服务架构中的佼佼者,... 目录一、SpringBoot、Cloud配置的读取二、SpringCloud配置动态刷新三、更新@R
阅读更多...
如何用Python绘制简易动态圣诞树

如何用Python绘制简易动态圣诞树

《如何用Python绘制简易动态圣诞树》这篇文章主要给大家介绍了关于如何用Python绘制简易动态圣诞树,文中讲解了如何通过编写代码来实现特定的效果,包括代码的编写技巧和效果的展示,需要的朋友可以参考... 目录代码：效果：总结 代码：import randomimport timefrom math
阅读更多...
Java中JSON字符串反序列化(动态泛型)

Java中JSON字符串反序列化(动态泛型)

《Java中JSON字符串反序列化(动态泛型)》文章讨论了在定时任务中使用反射调用目标对象时处理动态参数的问题,通过将方法参数存储为JSON字符串并进行反序列化,可以实现动态调用,然而,这种方式容易导... 需求：定时任务扫描，反射调用目标对象，但是，方法的传参不是固定的。方案一：将方法参数存成jsON字
阅读更多...
.NET利用C#字节流动态操作Excel文件

.NET利用C#字节流动态操作Excel文件

《.NET利用C#字节流动态操作Excel文件》在.NET开发中,通过字节流动态操作Excel文件提供了一种高效且灵活的方式处理数据,本文将演示如何在.NET平台使用C#通过字节流创建,读取,编辑及保... 目录用C#创建并保存Excel工作簿为字节流用C#通过字节流直接读取Excel文件数据用C#通过字节
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2