devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Python实现可视化智慧大屏展示_python可视化大屏实现

作者：盐析白兔 | 2024-04-12 03:21:12

赞

踩

python可视化大屏实现

1 参考资料

【Python】全网最新最全Pyecharts可视化教程(三)：制作多个子图_51CTO博客_python数据可视化pyecharts使用pyecharts拖拉，拽，创建大屏展示 - 简书 (jianshu.com)

智慧大屏是如何实现数据可视化的？ - 知乎 (zhihu.com)

python爬取数据保存在mysql中之后可以用什么实现可视化大屏？ - 知乎 (zhihu.com)

【Python可视化大屏】全流程揭秘实现可视化数据大屏的背后原理！ - 知乎 (zhihu.com)icon-default.png?t=MBR7https://zhuanlan.zhihu.com/p/505408710

2 设计思路

使用百度的pyecharts绘图工具箱进行绘制。设计的基本思路：

  1. 获取绘图数据（从Excel表格、MySQL数据库、或csv文件）
  2. 绘制各种图表
  3. 整合在pyecharts的Page对象中，设置为可拖拽布局，输出到临时html页面中。
  4. 打开html页面，调整图表布局，保存JSON文件。
  5. 基于临时html页面使用Page对象的方法生成大屏页面。（此部分单独创建程序完成）

3 实现过程

使用jupyter notebook工具实现，具体实现过程如下：

3.1 导入相关的库

使用jupyter 创建一个页面布局文件page_layout.ipynb,导入相关的库。

  1. from pyecharts import options as opts
  2. from pyecharts.charts import Bar, Grid, Line, Liquid, Page, Pie
  3. from pyecharts.commons.utils import JsCode
  4. from pyecharts.components import Table
  5. from pyecharts.faker import Faker

注意这里使用pyecharts的faker来模拟数据来生成各种图表，实际应用中换成自己的数据即可。Table用来展示表格数据。

3.2 定义绘制图表的函数。

  1. # 定义绘制条形图函数
  2. def bar_datazoom_slider() -> Bar:
  3.     c = (
  4.         Bar(init_opts=opts.InitOpts(chart_id=1))
  5.         .add_xaxis(Faker.days_attrs)
  6.         .add_yaxis("商家A", Faker.days_values)
  7.         .set_global_opts(
  8.             title_opts=opts.TitleOpts(title="Bar-DataZoom（slider-水平）"),
  9.             datazoom_opts=[opts.DataZoomOpts()],
  10.         )
  11.         
  12.     )
  13.     return c
  14.  
  15. # 定义绘制折线图函数
  16. def line_markpoint() -> Line:
  17.     c = (
  18.         Line(init_opts=opts.InitOpts(chart_id=2))
  19.         .add_xaxis(Faker.choose())
  20.         .add_yaxis(
  21.             "商家A",
  22.             Faker.values(),
  23.             markpoint_opts=opts.MarkPointOpts(data=[opts.MarkPointItem(type_="min")]),
  24.         )
  25.         .add_yaxis(
  26.             "商家B",
  27.             Faker.values(),
  28.             markpoint_opts=opts.MarkPointOpts(data=[opts.MarkPointItem(type_="max")]),
  29.         )
  30.         .set_global_opts(title_opts=opts.TitleOpts(title="Line-MarkPoint"))
  31.     )
  32.     return c
  33.  
  34. # 定义绘制饼图函数
  35. def pie_rosetype() -> Pie:
  36.     v = Faker.choose()
  37.     c = (
  38.         Pie(init_opts=opts.InitOpts(chart_id=3))
  39.         .add(
  40.             "",
  41.             [list(z) for z in zip(v, Faker.values())],
  42.             radius=["30%", "75%"],
  43.             center=["25%", "50%"],
  44.             rosetype="radius",
  45.             label_opts=opts.LabelOpts(is_show=False),
  46.         )
  47.         .add(
  48.             "",
  49.             [list(z) for z in zip(v, Faker.values())],
  50.             radius=["30%", "75%"],
  51.             center=["75%", "50%"],
  52.             rosetype="area",
  53.         )
  54.         .set_global_opts(title_opts=opts.TitleOpts(title="Pie-玫瑰图示例"))
  55.     )
  56.     return c
  57.  
  58. # 定义绘制Grid-多 Y 轴图函数 
  59. def grid_mutil_yaxis() -> Grid:
  60.     x_data = ["{}月".format(i) for i in range(1, 13)]
  61.     bar = (
  62.         Bar(init_opts=opts.InitOpts(chart_id=4))
  63.         .add_xaxis(x_data)
  64.         .add_yaxis(
  65.             "蒸发量",
  66.             [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
  67.             yaxis_index=0,
  68.             color="#d14a61",
  69.         )
  70.         .add_yaxis(
  71.             "降水量",
  72.             [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
  73.             yaxis_index=1,
  74.             color="#5793f3",
  75.         )
  76.         .extend_axis(
  77.             yaxis=opts.AxisOpts(
  78.                 name="蒸发量",
  79.                 type_="value",
  80.                 min_=0,
  81.                 max_=250,
  82.                 position="right",
  83.                 axisline_opts=opts.AxisLineOpts(
  84.                     linestyle_opts=opts.LineStyleOpts(color="#d14a61")
  85.                 ),
  86.                 axislabel_opts=opts.LabelOpts(formatter="{value} ml"),
  87.             )
  88.         )
  89.         .extend_axis(
  90.             yaxis=opts.AxisOpts(
  91.                 type_="value",
  92.                 name="温度",
  93.                 min_=0,
  94.                 max_=25,
  95.                 position="left",
  96.                 axisline_opts=opts.AxisLineOpts(
  97.                     linestyle_opts=opts.LineStyleOpts(color="#675bba")
  98.                 ),
  99.                 axislabel_opts=opts.LabelOpts(formatter="{value} °C"),
  100.                 splitline_opts=opts.SplitLineOpts(
  101.                     is_show=True, linestyle_opts=opts.LineStyleOpts(opacity=1)
  102.                 ),
  103.             )
  104.         )
  105.         .set_global_opts(
  106.             yaxis_opts=opts.AxisOpts(
  107.                 name="降水量",
  108.                 min_=0,
  109.                 max_=250,
  110.                 position="right",
  111.                 offset=80,
  112.                 axisline_opts=opts.AxisLineOpts(
  113.                     linestyle_opts=opts.LineStyleOpts(color="#5793f3")
  114.                 ),
  115.                 axislabel_opts=opts.LabelOpts(formatter="{value} ml"),
  116.             ),
  117.             title_opts=opts.TitleOpts(title="Grid-多 Y 轴示例"),
  118.             tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),
  119.         )
  120.     )
  121.  
  122.     line = (
  123.         Line()
  124.         .add_xaxis(x_data)
  125.         .add_yaxis(
  126.             "平均温度",
  127.             [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
  128.             yaxis_index=2,
  129.             color="#675bba",
  130.             label_opts=opts.LabelOpts(is_show=False),
  131.         )
  132.     )
  133.  
  134.     bar.overlap(line)
  135.     return Grid().add(
  136.         bar, opts.GridOpts(pos_left="5%", pos_right="20%"), is_control_axis_index=True
  137.     )
  138.  
  139. # 定义绘制liquid数据精度图函数 
  140. def liquid_data_precision() -> Liquid:
  141.     c = (
  142.         Liquid(init_opts=opts.InitOpts(chart_id=5))
  143.         .add(
  144.             "lq",
  145.             [0.3254],
  146.             label_opts=opts.LabelOpts(
  147.                 font_size=50,
  148.                 formatter=JsCode(
  149.                     """function (param) {
  150.                         return (Math.floor(param.value * 10000) / 100) + '%';
  151.                     }"""
  152.                 ),
  153.                 position="inside",
  154.             ),
  155.         )
  156.         .set_global_opts(title_opts=opts.TitleOpts(title="Liquid-数据精度"))
  157.     )
  158.     return c

3.3 定义绘制表格函数

  1. # 定义表格
  2. def table_base() -> Table:
  3.     table = Table()
  4.  
  5.     headers = ["City name", "Area", "Population", "Annual Rainfall"]
  6.     rows = [
  7.         ["Brisbane", 5905, 1857594, 1146.4],
  8.         ["Adelaide", 1295, 1158259, 600.5],
  9.         ["Darwin", 112, 120900, 1714.7],
  10.         ["Hobart", 1357, 205556, 619.5],
  11.         ["Sydney", 2058, 4336374, 1214.8],
  12.         ["Melbourne", 1566, 3806092, 646.9],
  13.         ["Perth", 5386, 1554769, 869.4],
  14.     ]
  15.     table.add(headers, rows).set_global_opts(
  16.         title_opts=opts.ComponentTitleOpts(title="Table")
  17.     )
  18.     return table

3.4 定义大屏展示的标题

  1. # 定义大屏标题
  2. def title_table(dp_title):
  3.     table_color="black";
  4.     table = Table()
  5.     table.add(headers=[dp_title],rows=[],attributes={
  6.         "align":"center",
  7.         "border":False,
  8.         "padding":"2px",
  9.         "style":"background:{};width:1400px; height:60px; font-size:28px; color:white; ".format(table_color)            
  10.         })
  11.     table.render("大标题.html")
  12.     return table

3.5 定义页面布局函数

定义了一个页面布局函数，将前面定义的各种图表函数添加到默认页面布局中，运行程序时，页面布局结果会保存在temp3.html文件中。

  1. #定义布局页面
  2. def page_default_layout():
  3.     page = Page(layout= Page.DraggablePageLayout, page_title= "大屏展示")
  4.     # page = Page()
  5.     page.add(
  6.         title_table("兰州市天气分析系统智慧大屏解决方案"),
  7.         bar_datazoom_slider(),
  8.         line_markpoint(),
  9.         pie_rosetype(),
  10.         grid_mutil_yaxis(),
  11.         liquid_data_precision(),
  12.         table_base(),
  13.     )
  14.     page.render("temp3.html")

3.6 运行程序，生成默认布局文件

运行页面布局函数，会在同目录下生成temp3.html文件。

  1. if __name__ == "__main__":
  2.     page_default_layout()

打开temp3文件，可以看到如下图所示：

 3.7 拖拽调整进行页面重新布局

页面中的每个图表和表格四周都有一个虚线框，可以拖拽改变大小和移动位置，各图表在页面上进行重新布局，布局后的效果如下图所示。

 3.8  生成重新布局的json文件

布局后的位置信息可以通过点击下图所示的save config按钮保存为json文件。假如保存的json文件为chart_config.json,放在当前目录中。

3.9 生成智慧大屏文件

在当前目录中重写创建一个生成大屏页面的python文件generate_screen.ipynb,代码如下：

  1. from pyecharts.charts import Page
  2.  
  3. Page.save_resize_html( 
  4.      source='temp3.html', 
  5.      cfg_file= 'chart_config.json', 
  6.      dest= '大屏展示3.html'
  7.  )

运行程序会在当前目录中生成一个大屏展示.html文件，此为最终的大屏展示文件，至此智慧大屏生成完毕。之所以称为智慧大屏，主要pyecharts生成的图可以进行交互，同时数据来源可以连接数据库进行实时更新，进而可以动态反映到大屏文件上。最终效果如下：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/408931
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号