python前端框架实例_Python数据可视化:PyQt5 + ECharts框架实例
引言
对于Python下桌面软件的开发已经有了很多数据可视化的库,如Matplotlib、Seaborn、Pyqtgraph、Plotly等等,但这些库更适合于后端程序员的软件开发。
实际上在前端网页开发方面,也有很多很多漂亮的界面设计方案,也包括很多很多数据可视化方面的强大控件。基于此,我们是否可以考虑这样一种桌面软件的开发架构方案,即将前端技术融入到Python开发中,结合PyQt界面库,将前端网页界面无缝集成到PyQt的窗口中,大部分的功能依托于前端技术来实现,而PyQt仅作少部分辅助的诸如窗口生成、事件处理等工作,基于这样的架构进行桌面软件的开发,既能充分利用Python的快速开发优点,又能使用成熟的前端技术,应该是一个比较好的软件开发方案。
下面通过一个简单的例子来介绍这种方案的可行性,该例使用Python3语言,利用PyQ5界面库搭建界面窗口框架,然后在窗口中嵌入ECharts库进行数据的可视化。
这儿稍微简单介绍下ECharts库,它是一个使用 JAVAScript 实现的开源可视化库,可流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。它具有丰富的可视化类型, 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭等等。总之,ECharts库是一具非常强大的数据可视化库。
实例运行界面
该例运行界面情况如下图所示:
使用PyQt5设计软件界面框架,主界面分为上下两部分,上面是一个Widget窗口控件,在里面嵌入网页通过一个柱状图显示某两个公司产品的全年季度销量趋势对比情况,下面加了两个按钮控件,分别控制启停数据的实时更新(使用仿真数据,仅为演示实时绘图刷新功能)及清除工作。
该例子的文件组成结构如下图所示:
整个工程放在webDemo文件夹中,其中,Main.py、Main.ico、Main.ui分别为主程序、应用程序图标及设计师设计的界面文件,Ui_Main.py为将Main.ui转换为Python后的文件,html文件夹存放了网页相关的文件。
大体设计思路如下:
前端文件准备:下载ECharts的库文件,这儿使用的是echarts.min.js,编写柱状图网页文件bar.html;
主界面设计:用设计师设计程序主界面文件Main.ui,并将其转换为对应的.py文件,即Ui_Main.py;
主程序功能实现:编写主Python程序Main.py,搭建界面,嵌入网页并实现槽函数功能。
前端文件准备
在官网下载库文件echarts.min.js后,剩下的工作是写bar.html文件,其主要内容包括:引入ECharts界面库、定义显示区域大小、定义柱状图样式等等,其代码内容如下,比较好理解,添加了注释:
#main {height:100%; width:100%; position:absolute;}
body {margin:0px; padding:0px; overflow:hidden;}
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
option = {
title: {
text: '全年季度销量趋势对比图',
left: 'center'
},
tooltip: {
show: true
},
legend: {
data: ['公司A', '公司B'],
top: '8%',
right: '10%'
},
xAxis: {
type: 'category',
data: ['第1季度', '第2季度', '第3季度', '第4季度'],
name: '季度 / x',
nameLocation: 'center',
nameGap: 30
},
yAxis: {
min: 0,
max: 100,
type: 'value',
name: '销量 / y',
nameLocation: 'center',
nameGap: 40
},
series: [
{
name: '公司A',
type: 'bar',
data: [0, 0, 0, 0]
},
{
name: '公司B',
type: 'bar',
data: [0, 0, 0, 0]
}
]
};
myChart.setOption(option);
function setValue(val1, val2){
option.series[0].data = val1
option.series[1].data = val2
myChart.setOption(option)
}
window.onresize = myChart.resize ;
注意,在上面代码中,定义了一个setValue函数,其目的是更新两条曲线的数据内容,其数据可由Python语言来调用时传入。
主界面设计
使用设计师设计的主界面Main.ui如下图所示,包含一个QWidget控件及两个按钮控件:
该界面中涉及到的所有界面对象元素如下图所示:
主界面设计完成后,即可用PyUIC工具将其转换为Py文件Ui_Main.py。
主程序功能实现
在主程序Main.py文件中,依托于设计师生成的界面文件,创建一个QWidget类用作主窗口的显示,其代码如下:
主要功能是定义主界面、加载网页文件及实现两个槽函数功能。通过“开始更新数据”按钮来启动或停止定时器函数,实现数据的实时刷新,通过“清空数据”按钮来清除柱状图数据。
主要代码解释如下:
第24-37行,使用QWebEngineView类定义一个webView视图,使用load函数加载网页文件bar.html,然后将其加入到上面的窗口布局中,注意,这儿仅程序初始化时加载了一次。
第39-42行,在定时器函数中刷新柱状图数据,主要是利用了webView页上的runJavaScript函数来运行html文件中的setValue函数,并将产生的两条随机数据传递到该函数中。
第44-52行,控制柱状图数据刷新的启动/停止动作。
第54-56行,通过传入全0数组,清空柱状图数据。
最终,整个主程序代码如下图所示:
总结
至此,整个工程文件就全部完成了,运行程序后,就会出现开始的界面。通过这个例子可以看出,在Python语言中,结合PyQt库完全可以通过前端技术实现数据的可视化甚至界面的搭建,这对前端程序员开发桌面软件来说,无疑是一种比较好的方案。
本文由编码那些事原创,请关注+转发+收藏+点赞,带你一起长知识!
python前端框架实例_Python数据可视化:PyQt5 + ECharts框架实例相关推荐
- python图形绘制星空图_Python数据可视化教程:基于Plotly的动态可视化绘图
1. plotly 介绍 Plotly是一个非常著名且强大的开源数据可视化框架,它通过构建基于浏览器显示的web形式的可交互图表来展示信息,可创建多达数十种精美的图表和地图, 下面我们以jupyter ...
- python画熊猫论文_Python数据可视化之美:专业图表绘制指南(全彩)
Python数据可视化之美:专业图表绘制指南(全彩)电子书 系统性地介绍Python 的绘图语法系统,包括matplotlib.Seaborn.plotnine 包,以及用于地理空间数据可视化的Bas ...
- python生成热度图_Python数据可视化 热力图
不要停止奔跑,不要回顾来路,来路无可眷恋,值得期待的只有前方.--<马男波杰克> 一.matplotlib绘制热力图 Matplotlib是Python著名的2D绘图库,该库仿造 ...
- python动态图表变化_Python数据可视化 pyecharts实现各种统计图表过程详解
Python数据可视化 pyecharts实现各种统计图表过程详解 发布时间:2020-09-10 04:53:26 来源:脚本之家 阅读:78 1.pyecharts介绍 Echarts是一款由百度 ...
- python pyecharts 折线图_Python数据可视化之pyecharts实现各种图表
之前的一篇文章介绍了使用Matplotlib实现各种统计图表,Python数据可视化之Matplotlib实现各种图表.这篇文章就介绍使用pyecharts实现各种统计图表. 1.pyecharts介 ...
- python画误差图_Python数据可视化:如何创建误差图
一图胜千言,使用Python的matplotlib库,可以快速创建高质量的图形. 这是Python数据可视化的系列短篇,针对初级和中级用户,将理论和示例代码相结合,使用matplotlib, seab ...
- python气泡图的地图_Python数据可视化:香港地图、房价可视化,绘制气泡图
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. 以下文章来源于DataCharm ,作者宁海涛 前言 今天的推文教程使用geopandas进行空间 ...
- python蜡烛图预测_Python数据可视化:如何用mplfinance创建蜡烛图
一图胜千言,使用Python的matplotlib库,可以快速创建高质量的图形. 我们团队推出一个新的系列教程:Python数据可视化,针对初级和中级用户,将理论和示例代码相结合,使用matplotl ...
- python画厢式图_Python数据可视化:箱线图多种库画法
概念 箱线图通过数据的四分位数来展示数据的分布情况.例如:数据的中心位置,数据间的离散程度,是否有异常值等. 把数据从小到大进行排列并等分成四份,第一分位数(Q1),第二分位数(Q2)和第三分位数(Q ...
最新文章
- 2015年12月流量入口占比动态:仅直接访问实现上涨
- C#中成员初始化顺序
- HDFS权限设置 \ HDFS涉及ACLs的命令
- 云计算论文集, Spark, 数据描述语言, 运维工具集
- 海外 谷歌 app api_Google App Engine Java功能和命名空间API
- Java 栈的存储过程
- vue keep-alive缓存页面切换后不触发created等用什么检测页面切换
- HDF及HDF-EOS数据格式简介
- 四旋翼双环PID控制
- matlab的图形绘制实验,(完整版)Matlab实验7图形绘制
- android 手机固定mac地址吗,Android手机获取Mac地址的几种方法
- wine linux 目录,wine的安装与microsoft office在linux上的运行
- golang 程序休眠_golang package time的用法具体详解
- 基于MATLAB的指纹识别算法仿真实现
- [Halcon测量] 测量助手详解
- C++用cmath求平方根和次方
- 计算机音乐苹果铃声,iPhone实用技巧:怎么将抖音上的背景音乐制作成手机铃声-苹果手机铃声设置...
- 多屏下dde-dock切换速度太慢
- 数学建模常用算法:人工鱼群算法(AFAS)求解二元函数最小值+限定x,y范围测试【java实现--详细注释+Matlab绘制小鱼游动过程】
- csv是什么意思中文_CSV文件是什么意思?
热门文章
- 渲染引擎入门到精通一_导入模型的实现和解决fbxsdk的使用坑
- FineReport帮助文档一眼尽收眼底
- mac安装mysql后找不到_Mac安装MySQL步骤及遇到的问题
- ST电机库v5.4.4源代码分析(2): 磁链圆限制之计算以及一个小bug
- mysql技术之innodb存储引擎
- Java获取世界各国各城市代码_qq QQ 全世界国家和地区代码获取 java
- linux编写域网扫描工具,shell脚本+详细解析
- 監獄脱出少女 Lie
- 2023财年Q4业绩继续下滑,ChatGPT能驱动英伟达重回巅峰吗?
- SpringBoot 实现 QQ 邮箱注册和登录