前言

作业要求：【都已经打包放网上了，有缘人需要就自取】

一份报告书（在全球变暖背景下碳中和对各国的二氧化碳排放量的影响项目报告书）

一份代码

作业包：python数据可视化小工具.zip - 蓝奏云

• 大一的时候，当时的python作业，交完作业后，忘记记录了（难受.jpg）
• 现在大三了，突然发现之前写的一个小功能
• 于是今天用pyqt5的设计界面+CSS知识，美化了一下界面，在此分享
• 差不多用了一个下午的时间，零基础小白摸索着完成了（折磨啊~）

一、效果展示

二、完整代码

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'DataPyQt5.ui'
#
# Created by: PyQt5 UI code generator 5.15.4
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.

import pyqtgraph as pg
import sys

from PyQt5.QtCore import Qt
from PyQt5.QtGui import QPainter, QBrush, QColor
from PyQt5.QtWidgets import QApplication, QWidget
from PyQt5.QtWidgets import QApplication, QMainWindow, QSizePolicy
from PyQt5 import QtCore,QtWidgets
import pandas as pd
from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("Tx-数据可视化工具")
        MainWindow.setMinimumSize(700, 500)  # 设置窗口最小尺寸限制
        MainWindow.resize(718, 733)
        MainWindow.setSizePolicy(QSizePolicy.Expanding, QSizePolicy.Expanding)  # 设置窗口大小策略

        # 设置 Qt Style Sheet，将窗口的边界设置成圆角
        MainWindow.setStyleSheet("QWidget {border-radius: 12px;}")
        # 将窗口标记成无边框窗口
        # MainWindow.setWindowFlag(Qt.FramelessWindowHint)
        # 将窗口设置为透明，否则圆角效果将无法显示
        # MainWindow.setAttribute(Qt.WA_TranslucentBackground)

        MainWindow.setStyleSheet("border-radius: 10px;\n"
                                 "background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(208, 253, 209, 255), stop:1 rgba(170, 255, 255));\n"
"")
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")

        #---
        self.layoutWidget = QtWidgets.QWidget(self.centralwidget)
        self.layoutWidget.setGeometry(QtCore.QRect(120, 40, 461, 251))
        self.layoutWidget.setStyleSheet("background-image: url(./img/3333.jpg);\n"
                                    "background-size: center;  /* 或者 background-size: cover; */\n"
                                    "border-radius: 5px;\n"
                                    "border: 2px solid #34baea;")
        self.layoutWidget.setObjectName("layoutWidget")

        self.verticalLayout_2 = QtWidgets.QVBoxLayout(self.layoutWidget)
        self.verticalLayout_2.setContentsMargins(0, 0, 0, 0)
        self.verticalLayout_2.setObjectName("verticalLayout_2")






        self.pushButton_3 = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_3.setGeometry(QtCore.QRect(240, 430, 91, 31))
        self.pushButton_3.setStyleSheet("QPushButton {\n"
"\n"
"    border: 2px solid #63cab6;\n"
"    color: #0000000;\n"
"    padding: 5px;\n"
"    border-radius: 8px;\n"
"}\n"
"\n"
"QPushButton:hover {\n"
"    background-color: #7ad9e3;\n"
"    color: #ffffff;\n"
"} ")
        self.pushButton_3.setObjectName("pushButton_3")
        self.pushButton_4 = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_4.setGeometry(QtCore.QRect(360, 430, 91, 31))
        self.pushButton_4.setStyleSheet("QPushButton {\n"
"\n"
"    border: 2px solid #63cab6;\n"
"    color: #0000000;\n"
"    padding: 5px;\n"
"    border-radius: 8px;\n"
"}\n"
"\n"
"QPushButton:hover {\n"
"    background-color: #7ad9e3;\n"
"    color: #ffffff;\n"
"} ")
        self.pushButton_4.setObjectName("pushButton_4")
        self.pushButton = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton.setGeometry(QtCore.QRect(130, 320, 71, 21))
        self.pushButton.setStyleSheet("border: none;\n"
"background-color: transparent;\n"
"font: 20px;\n"
"color: #000000;\n"
"text-decoration: underline;\n"
"text-decoration:none;\n"
"font-weight:bold;")
        self.pushButton.setAutoDefault(False)
        self.pushButton.setObjectName("pushButton")
        self.textEdit_2 = QtWidgets.QLineEdit(self.centralwidget)
        self.textEdit_2.setGeometry(QtCore.QRect(200, 370, 349, 39))
        self.textEdit_2.setStyleSheet("border-radius: 5px;\n"
"border: 2px solid #34baea;\n"
"background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(255, 255, 255, 255), stop:1 rgba(255, 255, 255, 255));\n"
"padding-top: 7px;  /* 清除输入框的上边距 */\n"
"padding-bottom: 0px;  /* 清除输入框的下边距 */\n"
"padding-left: 5px;  /* 添加输入框的左边距 */")
        self.textEdit_2.setObjectName("textEdit_2")
        self.pushButton_2 = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_2.setGeometry(QtCore.QRect(130, 380, 71, 21))
        self.pushButton_2.setStyleSheet("border: none;\n"
"background-color: transparent;\n"
"font: 20px;\n"
"color: #000000;\n"
"text-decoration: underline;\n"
"text-decoration:none;\n"
"font-weight:bold;")
        self.pushButton_2.setAutoDefault(False)
        self.pushButton_2.setObjectName("pushButton_2")
        self.textEdit_3 = QtWidgets.QLineEdit(self.centralwidget)
        self.textEdit_3.setGeometry(QtCore.QRect(200, 310, 349, 39))
        self.textEdit_3.setStyleSheet("border-radius: 5px;\n"
"border: 2px solid #34baea;\n"
"background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(255, 255, 255, 255), stop:1 rgba(255, 255, 255, 255));\n"
"padding-top: 7px;  /* 清除输入框的上边距 */\n"
"padding-bottom: 0px;  /* 清除输入框的下边距 */\n"
"padding-left: 5px;  /* 添加输入框的左边距 */")
        self.textEdit_3.setObjectName("textEdit_3")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 718, 26))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def paintEvent(self, event):
        painter = QPainter(self)
        painter.setRenderHint(QPainter.Antialiasing)

        # 绘制圆角边框
        brush = QBrush(QColor(255, 255, 255, 100))
        painter.setBrush(brush)
        painter.drawRoundedRect(0, 0, self.width(), self.height(), 12, 12)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "Tx-数据可视化工具"))
        self.pushButton_3.setText(_translate("MainWindow", "确定"))
        self.pushButton_4.setText(_translate("MainWindow", "清空"))
        self.pushButton.setText(_translate("MainWindow", "国家:"))
        self.textEdit_2.setPlaceholderText(_translate("MainWindow", "请输入数据类型（1:煤炭/2:石油/3:二氧化碳）"))
        self.pushButton_2.setText(_translate("MainWindow", "类型:"))
        self.textEdit_3.setPlaceholderText(_translate("MainWindow", "请输入国家名称（例：China）"))
if __name__ == '__main__':

    def get_data_chart():

        x = None
        y = None

        country = str(ui.textEdit_3.text())
        data_type = str(ui.textEdit_2.text())

        print("数据图正在生成中！请稍等...")
        # -----------------------------------------对数据类型 进行判断
        # -----------------------------------------
        if (data_type == "1"):

            File_co2_csv = pd.read_csv(r"csv/co2.csv")  # 读取 co2 数据表格
            df_country = File_co2_csv[File_co2_csv['Entity'] == country]  # 筛选出 对应国家的数据

            x = list(df_country['Year'])  # 存放 年份
            y = list(df_country['Annual CO2 emissions (per capita)'])  # 存放 数据

        elif (data_type == "2"):
            File_coal_csv = pd.read_csv(r"csv/co2-coal.csv")  # 读取 coal 数据表格
            df_country = File_coal_csv[File_coal_csv['Entity'] == country]  # 筛选出 对应国家的数据

            x = list(df_country['Year'])  # 存放 年份
            y = list(df_country['Annual CO2 emissions from coal'])  # 存放 数据

        elif (data_type == "3"):
            File_oil_csv = pd.read_csv(r"csv/co2-oil.csv")  # 读取 oil 数据表格
            df_country = File_oil_csv[File_oil_csv['Entity'] == country]  # 筛选出 对应国家的数据

            x = list(df_country['Year'])  # 存放 年份
            y = list(df_country['Annual CO2 emissions from oil'])  # 存放 数据

        #------------------------画图

        plt = pg.PlotWidget()
        plt.plot(x, y)
        plt.showGrid(x=True, y=True)
        return plt

    def clear_layout(ui):
        # 遍历所有的子控件
        while ui.verticalLayout_2.count():
            # 获取第 0 个子控件并从布局中移除
            item = ui.verticalLayout_2.takeAt(0)
            # 获取该子控件对应的 QWidget 或 QLayout
            widget = item.widget()
            layout = item.layout()
            # 如果是 QWidget 类型，则释放该控件
            if widget:
                widget.deleteLater()
            # 如果是 QLayout 类型，则递归调用该方法移除该布局中的子控件
            elif layout:
                clear_layout(layout)

    def uart():
        clear_layout(ui)
        ui.verticalLayout_2.addWidget(get_data_chart())

    def clear_text():
        ui.textEdit_2.clear()
        ui.textEdit_3.clear()

    app = QApplication(sys.argv)
    MainWindow = QMainWindow()
    ui = Ui_MainWindow()
    ui.setupUi(MainWindow)
    MainWindow.show()
    ui.pushButton_3.clicked.connect(uart)
    ui.pushButton_4.clicked.connect(clear_text)
    sys.exit(app.exec_())

---

三、学习指引

推荐b站up与视频：

PyQt-Fluent-Widgets: 基于 PyQt/PySide 的 Fluent Design 风格组件库_哔哩哔哩_bilibili

Pyqt5动态清零+天气预报_哔哩哔哩_bilibili

Python+Pyside/PyQt实现的GUI桌面应用_哔哩哔哩_bilibili

Python GUI——PySide6：

文档手册：Create Python GUIs with PySide2 — Simple GUIs to full apps
入门视频：【已完结】PySide6百炼成真，带你系统性入门Qt_哔哩哔哩_bilibili

---

四、问题记录 

1、如何快速学习并编辑pyqt界面？

如果你已经了解了 PyQt5 的基础知识，可以通过以下步骤来快速学习并编辑 PyQt5 界面：

1. 使用 Qt Designer 设计界面：首先，你可以使用 Qt Designer 工具来设计界面，界面可以以 .ui 文件的形式保存。在 Qt Designer 中，你可以添加各种部件，例如按钮、文本框、列表框等等，并对它们进行布局和外观设置。你还可以设置信号和槽，使得部件之间的交互能够响应用户的操作。

2. 将 .ui 文件转换成 .py 文件：一旦你设计好了界面，你需要将 .ui 文件转换成 Python 代码文件，以便在程序中使用。你可以使用以下命令将 .ui 文件转换成 Python 代码：

   pyuic5 -x input.ui -o output.py

   其中，input.ui 是你设计好的 .ui 文件路径，output.py 是你要生成的 Python 代码文件路径。

3. 创建主程序：现在，你可以创建主程序并在其中使用转换后的 .py 文件中的类，以及 PyQt5 提供的模块和函数，来实现界面的逻辑与功能。你可以在主程序中导入 .py 文件中的类，并将其作为主窗口或子窗口来使用。然后，可以在主程序中使用布局管理器对部件进行布局，设置信号和槽，并为部件添加事件处理器。

4. 调试和运行：使用 PyCharm 等 IDE 可以极大地提高 PyQt5 界面的调试效率。你可以使用 IDE 中的调试器来检查程序的运行状态，并查看程序中出现的错误和异常。最后，你可以运行程序，并通过界面来测试程序的功能。

希望以上步骤可以帮助你快速学习并编辑 PyQt5 界面。当然，在学习的过程中，不断阅读官方文档、API 文档以及各种书籍和博客文章，深入理解 PyQt5 的各个方面也是很重要的。

2、在qyqt中，如果通过代码来美化窗口边框，让其变成圆角，类似于Apple Computer UI

在 PyQt 中美化窗口边框可以使用 Qt Style Sheet。下面是实现圆角边框的示例代码：

from PyQt5.QtCore import Qt
from PyQt5.QtGui import QPainter, QBrush, QColor
from PyQt5.QtWidgets import QApplication, QWidget


class RoundedCornerWidget(QWidget):
    def __init__(self):
        super().__init__()

        # 设置窗口的标题和大小
        self.setWindowTitle("Rounded Corner Widget")
        self.setFixedSize(400, 300)

        # 设置 Qt Style Sheet，将窗口的边界设置成圆角
        self.setStyleSheet("QWidget {border-radius: 12px;}")

        # 将窗口标记成无边框窗口
        self.setWindowFlag(Qt.FramelessWindowHint)

        # 将窗口设置为透明，否则圆角效果将无法显示
        self.setAttribute(Qt.WA_TranslucentBackground)

    def paintEvent(self, event):
        painter = QPainter(self)
        painter.setRenderHint(QPainter.Antialiasing)

        # 绘制圆角边框
        brush = QBrush(QColor(255, 255, 255, 100))
        painter.setBrush(brush)
        painter.drawRoundedRect(0, 0, self.width(), self.height(), 12, 12)


if __name__ == "__main__":
    app = QApplication([])
    window = RoundedCornerWidget()
    window.show()
    app.exec()

在 RoundedCornerWidget 类的构造函数中，我们设置了窗口的标题和大小，然后使用 Qt Style Sheet 将窗口的边界设置成圆角。我们还将窗口标记为无边框窗口，并将其设置为透明。

在 paintEvent() 方法中，我们使用 QPainter 绘制了圆角边框，并使用 setRenderHint() 方法启用抗锯齿。

当使用窗口边角圆角时，需要注意将其设置为透明，否则圆角效果将无法显示。可以通过 setAttribute(Qt.WA_TranslucentBackground) 将窗口设置为透明，或者通过 Qt Style Sheet background-color: transparent; 实现。例子中采用前者。

3、如何在qyqtDesign中在样式编辑器中直接编辑 CSS 样式表，将listview的背景变成白色半透明圆角卡片？

你可以在样式编辑器中编辑 CSS 样式表，实现这个效果。下面是一个示例 CSS 样式表，将 QListView 的背景设置为半透明的白色圆角卡片：

#listView {
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 10px;
	padding: 10px;
}

这里假设 QListView 的 objectName 属性设置为 "listView"。你可以将这段 CSS 代码复制到样式编辑器中，然后应用到你的 QListView 控件上。

4、在qyqtDesign中编辑样式表，使用css将按钮美化为扁平风格

在 Qt Designer 中编辑样式表可以通过两种方式实现：

1. 在样式编辑器中直接编辑 CSS 样式表
2. 通过 QWidget.setProperty() 方法设置 widget 的样式

以下是通过样式编辑器实现按钮扁平化的步骤：

1. 在 Qt Designer 中，选中要编辑的按钮，然后从菜单栏中选择 表单 -> 编辑样式表。

2. 在样式编辑器中，将以下 CSS 样式代码粘贴到编辑区中：

   QPushButton {
       background-color: transparent;
       border: 2px solid #3498db;
       color: #3498db;
       padding: 5px;
       border-radius: 8px;
   }
   
   QPushButton:hover {
       background-color: #3498db;
       color: #ffffff;
   }
   

   以上代码定义了按钮的样式，包括：透明背景、蓝色实线边框、蓝色文字颜色、5 像素的内边距和 8 像素的圆角边框。当鼠标悬停在按钮上时，将应用另一组样式，以更改文字和背景颜色。

3. 单击“应用”按钮，使更改生效。

4. 将窗口保存为 .ui 文件，关闭 Qt Designer。

5. 在 PySide6 应用程序中加载 UI 文件并显示窗口：

   from PySide6.QtWidgets import QApplication, QMainWindow, QWidget
   from PySide6.QtUiTools import QUiLoader
   from PySide6.QtCore import QFile
   
   class MainWindow(QMainWindow):
       def __init__(self):
           super().__init__()
   
           # 加载 UI 文件
           ui_file = QFile("my_ui_file.ui")
           ui_file.open(QFile.ReadOnly)
           loader = QUiLoader()
           self.widget = loader.load(ui_file, self)
           ui_file.close()
   
           # 设置 widget 样式
           self.widget.setProperty("flat", True)  # 设置按钮为扁平化样式
   
           # 将 widget 添加到主窗口
           self.setCentralWidget(self.widget)
   
   
   if __name__ == "__main__":
       app = QApplication([])
       window = MainWindow()
       window.show()
       app.exec()
   

   以上代码加载名为 my_ui_file.ui 的 UI 文件，并在窗口中显示 flat 样式属性设置为 True 的 widget。

注意，如果您要在样式表中定义对全局窗口小部件的更改，则可以使用以下代码：

* {
    font-size: 14px;
    font-family: Arial;
}

这将更改所有窗口小部件的字体大小和字体。