pyecharts可视化数据大屏【详细教程】

最新推荐文章于 2024-09-14 10:06:40 发布

Dreams°123

最新推荐文章于 2024-09-14 10:06:40 发布

阅读量934

点赞数 6

分类专栏： AIGC 文章标签：大数据 python 数据可视化数据分析信息可视化 html 测试工具

本文链接：https://blog.csdn.net/weixin_44892179/article/details/142104613

版权

AIGC 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言：Pyecharts 是一个用于生成图表的 Python 库，它可以帮助你创建交互式的图表和数据可视化

1、安装 Pyecharts

首先，需要确保已经安装了 Pyecharts。可以通过 pip 安装：

pip install pyecharts

2、创建多个图表

我们将创建一个折线图、一个柱状图和一个饼图，并将它们嵌入到一个 HTML 文件中以形成数据大屏。

创建折线图

from pyecharts import options as opts  # 导入 Pyecharts 的配置选项
from pyecharts.charts import Line  # 从 pyecharts.charts 导入 Line 类

# 创建一个折线图对象
line = Line()

# 添加 x 轴数据（月份）
line.add_xaxis(["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"])

# 添加 y 轴数据（某系列的值）
line.add_yaxis("Series1", [10, 20, 30, 40, 50, 60, 70])

# 设置全局配置选项，比如标题
line.set_global_opts(
    title_opts=opts.TitleOpts(title="Line Chart Example")  # 设置图表标题
)

# 渲染图表并保存为 HTML 文件
line.render("line_chart.html")

创建柱状图

from pyecharts import options as opts  # 导入 Pyecharts 的配置选项
from pyecharts.charts import Bar  # 从 pyecharts.charts 导入 Bar 类

# 创建一个柱状图对象
bar = Bar()

# 添加 x 轴数据（类别）
bar.add_xaxis(["Category1", "Category2", "Category3", "Category4"])

# 添加 y 轴数据（某系列的值）
bar.add_yaxis("Series1", [5, 20, 15, 30])

# 设置全局配置选项，比如标题
bar.set_global_opts(
    title_opts=opts.TitleOpts(title="Bar Chart Example")  # 设置图表标题
)

# 渲染图表并保存为 HTML 文件
bar.render("bar_chart.html")

创建饼图

from pyecharts import options as opts  # 导入 Pyecharts 的配置选项
from pyecharts.charts import Pie  # 从 pyecharts.charts 导入 Pie 类

# 创建一个饼图对象
pie = Pie()

# 添加数据（每个项和对应的值）
pie.add(
    "Pie Chart",
    [("Item1", 30), ("Item2", 20), ("Item3", 40), ("Item4", 10)]
)

# 设置全局配置选项，比如标题
pie.set_global_opts(
    title_opts=opts.TitleOpts(title="Pie Chart Example")  # 设置图表标题
)

# 渲染图表并保存为 HTML 文件
pie.render("pie_chart.html")

3、创建 HTML 页面将图表嵌入到一个数据大屏

创建一个 HTML 文件来将这些图表嵌入到一个页面中。以下是 dashboard.html 文件的代码：

<!DOCTYPE html>  <!-- 定义文档类型为 HTML5 -->
<html lang="en">  <!-- 定义文档语言为英语 -->
<head>
    <meta charset="UTF-8">  <!-- 设置字符编码为 UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 设置视口宽度为设备宽度，初始缩放比例为 1.0 -->
    <title>Dashboard</title>  <!-- 网页标题 -->
    <style>
        .container {  <!-- 图表容器的样式 -->
            display: flex;  <!-- 使用弹性布局 -->
            flex-wrap: wrap;  <!-- 允许换行 -->
            gap: 20px;  <!-- 设置项目之间的间隙 -->
        }
        .chart {  <!-- 单个图表的样式 -->
            flex: 1 1 calc(33% - 20px);  <!-- 每个图表占据容器的三分之一宽度，减去间隙 -->
            box-sizing: border-box;  <!-- 包含内边距和边框在内的宽度和高度计算 -->
        }
    </style>
</head>
<body>
    <div class="container">  <!-- 容器，包含所有图表 -->
        <div class="chart">  <!-- 第一个图表的容器 -->
            <iframe src="line_chart.html" width="100%" height="400px" frameborder="0"></iframe>  <!-- 嵌入折线图 -->
        </div>
        <div class="chart">  <!-- 第二个图表的容器 -->
            <iframe src="bar_chart.html" width="100%" height="400px" frameborder="0"></iframe>  <!-- 嵌入柱状图 -->
        </div>
        <div class="chart">  <!-- 第三个图表的容器 -->
            <iframe src="pie_chart.html" width="100%" height="400px" frameborder="0"></iframe>  <!-- 嵌入饼图 -->
        </div>
    </div>
</body>
</html>

4、运行和查看

步骤 1：使用上述 Python 代码生成三个 HTML 文件 (line_chart.html、bar_chart.html 和
pie_chart.html)。
步骤 2：将 HTML 页面代码保存为 dashboard.html。
步骤 3：在浏览器中打开 dashboard.html，你将看到一个包含三个图表的数据大屏。

5、聚合到一个py文件内

将生成图表和创建 HTML 数据大屏的步骤整合到一个 Python 文件中：

from pyecharts import options as opts
from pyecharts.charts import Line, Bar, Pie

# 1. 创建折线图
def create_line_chart():
    line = Line()
    line.add_xaxis(["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"])
    line.add_yaxis("Series1", [10, 20, 30, 40, 50, 60, 70])
    line.set_global_opts(title_opts=opts.TitleOpts(title="Line Chart Example"))
    line.render("line_chart.html")

# 2. 创建柱状图
def create_bar_chart():
    bar = Bar()
    bar.add_xaxis(["Category1", "Category2", "Category3", "Category4"])
    bar.add_yaxis("Series1", [5, 20, 15, 30])
    bar.set_global_opts(title_opts=opts.TitleOpts(title="Bar Chart Example"))
    bar.render("bar_chart.html")

# 3. 创建饼图
def create_pie_chart():
    pie = Pie()
    pie.add(
        "Pie Chart",
        [("Item1", 30), ("Item2", 20), ("Item3", 40), ("Item4", 10)]
    )
    pie.set_global_opts(title_opts=opts.TitleOpts(title="Pie Chart Example"))
    pie.render("pie_chart.html")

# 4. 创建 HTML 页面来将图表嵌入到数据大屏中
def create_dashboard():
    html_content = '''
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Dashboard</title>
        <style>
            .container {
                display: flex;
                flex-wrap: wrap;
                gap: 20px;
            }
            .chart {
                flex: 1 1 calc(33% - 20px);
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="chart">
                <iframe src="line_chart.html" width="100%" height="400px" frameborder="0"></iframe>
            </div>
            <div class="chart">
                <iframe src="bar_chart.html" width="100%" height="400px" frameborder="0"></iframe>
            </div>
            <div class="chart">
                <iframe src="pie_chart.html" width="100%" height="400px" frameborder="0"></iframe>
            </div>
        </div>
    </body>
    </html>
    '''
    with open("dashboard.html", "w") as f:
        f.write(html_content)

# 主函数
def main():
    create_line_chart()  # 创建折线图
    create_bar_chart()   # 创建柱状图
    create_pie_chart()   # 创建饼图
    create_dashboard()   # 创建数据大屏 HTML 页面

# 运行主函数
if __name__ == "__main__":
    main()