devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【可视化大屏教程】用Python开发智慧城市数据分析大屏_python写可视化大屏

作者：我家自动化 | 2024-04-06 23:43:21

赞

踩

python写可视化大屏

目录

一、开发背景

二、讲解代码

2.1 大标题+背景图

2.2 各区县交通事故统计图-系列柱形图

2.3 图书馆建设率-水球图

2.4 当年城市空气质量aqi指数-面积图

2.5 近7年人均生产总值变化图-面积图

2.6 城市人才占比结构图-柱形图

2.7 城市宣传片视频-大屏左上角位置

2.8 组合以上图表，生成临时大屏

2.9 生成最终大屏

2.10 部署到服务器-供外部访问

三、在线演示

一、开发背景

您好，我是@马哥python说 ，这是我独立开发的Python可视化大屏，看下演示效果：

【大屏演示】用Python开发智慧城市数据可视化分析大屏

这个大屏，是通过pyecharts可视化开发框架实现。

下面详细介绍，这个大屏的实现过程。

二、讲解代码

注：由于我的MySQL数据库环境问题，暂通过模拟假数据，对接可视化代码。

2.1 大标题+背景图

由于pyecharts组件没有专门用作标题的图表，我决定灵活运用Line组件实现大标题。

  1. line3 = (
  2. 		Line(init_opts=opts.InitOpts(width="1420px",  # 宽度
  3. 		                             height="800px",  # 高度
  4. 		                             bg_color={"type": "pattern", "image": JsCode("img"),
  5. 		                                       "repeat": "repeat", }))  # 设置背景图片
  6. 			.add_xaxis([None])  # 插入空数据
  7. 			.add_yaxis("", [None])  # 插入空数据
  8. 			.set_global_opts(
  9. 			title_opts=opts.TitleOpts(title=v_title,
  10. 			                          pos_left='center',
  11. 			                          pos_top='1%',
  12. 			                          title_textstyle_opts=opts.TextStyleOpts(font_size=45,
  13. 			                                                                  font_family='cursive',
  14. 			                                                                  color='white',
  15. 			                                                                  align='left'),
  16. 			                          ),
  17. 			yaxis_opts=opts.AxisOpts(is_show=False),  # 不显示y轴
  18. 			xaxis_opts=opts.AxisOpts(is_show=False))  # 不显示x轴
  19. 	)
  20. # 设置背景图片
  21. line3.add_js_funcs(
  22. 	"""
  23. 	var img = new Image(); img.src = './static/城市1.jpeg';
  24. 	"""
  25. )

这里最关键的逻辑，就是背景图片的处理。我找了一张智慧城市的炫丽背景图片：

然后用add_js_funcs代码把此图片设置为整个大屏的背景图。

大标题效果：

由于背景图片太大（4360x2910），只显示出了上半部分，恰恰是我预期的效果！

2.2 各区县交通事故统计图-系列柱形图

针对城市交通事故统计数据，绘制系列柱形图：

  1. x_data = [str(i) + '月' for i in range(1, 13)]
  2. y1_data = [193, 242, 206, 198, 335, 298, 38, 93, 88, 285, 297, 302]
  3. y2_data = [96, 41, 28, 95, 36, 94, 29, 61, 42, 85, 99, 31]
  4. bar = (
  5. 	Bar(init_opts=opts.InitOpts(theme=theme_config, width="750px", height="350px", chart_id='bar_county'))
  6. 		.add_xaxis(x_data)
  7. 		.add_yaxis("高峰期", y1_data, gap="0%")
  8. 		.add_yaxis("非高峰期", y2_data, gap="0%")
  9. 		.set_global_opts(title_opts=opts.TitleOpts(title=v_title,
  10. 	                                               pos_left='center',
  11. 	                                               title_textstyle_opts=opts.TextStyleOpts(color=chart_text_color),
  12. 	                                               ),
  13. 	                     legend_opts=opts.LegendOpts(pos_right='10%', orient='vertical'),
  14. 	                     tooltip_opts=opts.TooltipOpts(
  15. 		                     trigger="axis", axis_pointer_type="cross", is_show=True),  # 提示框配置
  16. 	                     xaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(color=chart_text_color), ),
  17. 	                     yaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(color=chart_text_color), ),
  18. 	                     )
  19. )

效果图如下：

这种两两一组的柱形图，在pyecharts中叫做：系列柱形图，Bar with different series gap

2.3 图书馆建设率-水球图

图书馆建设率，采用pyecharts的水球图（动态）展示效果：

  1. data_list = [[23, 0.6328]]
  2. l1 = Liquid(init_opts=opts.InitOpts(theme=theme_config, width="450px", height="350px", chart_id=v_chart_id))
  3. l1.add("完成率", [data_list[0][1]], center=["30%", "50%"], label_opts=opts.LabelOpts(font_size=20, position='inside'))
  4. l1.set_global_opts(title_opts=opts.TitleOpts(title=v_title,
  5.                                              pos_left='15%',
  6.                                              pos_top='15%',
  7.                                              title_textstyle_opts=opts.TextStyleOpts(color=chart_text_color),
  8.                                              ))

效果图如下：（此处是静态截图，其实有动态波纹效果）

2.4 当年城市空气质量aqi指数-面积图

城市空气质量aqi，采用面积图展示：

  1. x_data = [str(i) + '月' for i in range(1, 13)]
  2. y_data = [36.8, 35.2, 36.0, 31.9, 29.5, 14.9, 33.5, 20.8, 37.1, 42.6, 44.9, 53.3]
  3. area_color_js = (  # 设置美观背景色
  4. 	"new echarts.graphic.LinearGradient(0, 0, 0, 1, "
  5. 	"[{offset: 0, color: '#eb64fb'}, {offset: 1, color: '#3fbbff0d'}], false)"
  6. )
  7.  
  8. line = (
  9. 	Line(init_opts=opts.InitOpts(theme=theme_config, width="450px", height="300px", chart_id='line_aqi'))
  10. 		.add_xaxis(xaxis_data=x_data)
  11. 		.add_yaxis(
  12. 		series_name="增长率",
  13. 		y_axis=y_data,
  14. 		is_smooth=True,  # 是否平滑
  15. 		is_symbol_show=True,
  16. 		symbol="circle",
  17. 		symbol_size=6,
  18. 		linestyle_opts=opts.LineStyleOpts(color="#fff"),
  19. 		label_opts=opts.LabelOpts(is_show=True, position="top", color="white"),
  20. 		itemstyle_opts=opts.ItemStyleOpts(
  21. 			color="red", border_color="#fff", border_width=3
  22. 		),
  23. 		tooltip_opts=opts.TooltipOpts(is_show=False),
  24. 		areastyle_opts=opts.AreaStyleOpts(color=JsCode(area_color_js), opacity=1),
  25. 	)
  26. 		.set_global_opts(
  27. 		title_opts=opts.TitleOpts(
  28. 			title=v_title,
  29. 			pos_left="center",
  30. 			pos_top='9%',
  31. 			title_textstyle_opts=opts.TextStyleOpts(color=chart_text_color),
  32. 		),
  33. 		xaxis_opts=opts.AxisOpts(
  34. 			type_="category",
  35. 			boundary_gap=False,
  36. 			axislabel_opts=opts.LabelOpts(margin=30, color=chart_text_color),
  37. 			axisline_opts=opts.AxisLineOpts(is_show=False),
  38. 			axistick_opts=opts.AxisTickOpts(
  39. 				is_show=True,
  40. 				length=25,
  41. 				linestyle_opts=opts.LineStyleOpts(color="#ffffff1f"),
  42. 			),
  43. 			splitline_opts=opts.SplitLineOpts(
  44. 				is_show=True, linestyle_opts=opts.LineStyleOpts(color="#ffffff1f")
  45. 			),
  46. 		),
  47. 		yaxis_opts=opts.AxisOpts(
  48. 			type_="value",
  49. 			position="left",
  50. 			axislabel_opts=opts.LabelOpts(margin=20, color=chart_text_color),
  51. 			axisline_opts=opts.AxisLineOpts(
  52. 				linestyle_opts=opts.LineStyleOpts(width=2, color="#fff")
  53. 			),
  54. 			axistick_opts=opts.AxisTickOpts(
  55. 				is_show=True,
  56. 				length=15,
  57. 				linestyle_opts=opts.LineStyleOpts(color="#ffffff1f"),
  58. 			),
  59. 			splitline_opts=opts.SplitLineOpts(
  60. 				is_show=True, linestyle_opts=opts.LineStyleOpts(color="#ffffff1f")
  61. 			),
  62. 		),
  63. 		legend_opts=opts.LegendOpts(is_show=True, pos_right='right', pos_top='10%'),
  64. 		tooltip_opts=opts.TooltipOpts(
  65. 			trigger="axis", axis_pointer_type="cross", is_show=True),  # 提示框配置
  66. 	)
  67. )

效果图如下：

2.5 近7年人均生产总值变化图-面积图

与2.4章节逻辑实现相同，替换对应数据即可，不再赘述。

2.6 城市人才占比结构图-柱形图

分别统计该城市的博士人才、硕士人才、本科人才、专科人才、专科以下的占比情况，通过柱形图展示：

  1. x_data = ['博士人才', '硕士人才', '本科人才', '专科人才', '专科以下']
  2. y_data = [0.4, 5.8, 26.4, 29.8, 37.6, ]
  3. # 画柱形图
  4. bar = Bar(
  5. 	init_opts=opts.InitOpts(theme=theme_config, width="450px", height="350px", chart_id='bar_talent'))  # 初始化条形图
  6. bar.add_xaxis(x_data)  # 增加x轴数据
  7. bar.add_yaxis("占比", y_data)  # 增加y轴数据
  8. bar.set_series_opts(label_opts=opts.LabelOpts(position="right"))  # Label出现位置
  9. bar.set_global_opts(
  10. 	legend_opts=opts.LegendOpts(pos_left='right'),
  11. 	title_opts=opts.TitleOpts(title=v_title,
  12. 	                          pos_left='center',
  13. 	                          title_textstyle_opts=opts.TextStyleOpts(color=chart_text_color),
  14. 	                          ),  # 标题
  15. 	toolbox_opts=opts.ToolboxOpts(is_show=False),  # 不显示工具箱
  16. 	tooltip_opts=opts.TooltipOpts(
  17. 		trigger="axis", axis_pointer_type="cross", is_show=True),  # 提示框配置
  18. 	xaxis_opts=opts.AxisOpts(name="人才类型",  # x轴名称
  19. 	                         axislabel_opts=opts.LabelOpts(rotate=0, color=chart_text_color),
  20. 	                         splitline_opts=opts.SplitLineOpts(is_show=False)
  21. 	                         ),
  22. 	yaxis_opts=opts.AxisOpts(name="百分比",  # y轴名称
  23. 	                         axislabel_opts=opts.LabelOpts(rotate=0, color=chart_text_color),  # y轴名称
  24. 	                         )
  25. )

效果图如下：

2.7 城市宣传片视频-大屏左上角位置

难点来了！

pyecharts本身并无播放视频的组件，怎么实现的视频播放呢？

首先，任意开发一个简单的图表，柱形图、折线图、散点图什么都可以，后续把它拖拽到大屏左上角。

最后我会用宣传片视频替换掉这个图表。

2.8 组合以上图表，生成临时大屏

通过pyecharts提供的Page组件，采用DraggablePageLayout的layout方法，组合大屏：

  1. # 绘制:整个页面
  2. page = Page(
  3. 	page_title="智慧城市数据可视化分析监控大屏",  # 页面标题
  4. 	layout=Page.DraggablePageLayout,  # 采用拖拽方式
  5. )
  6. page.add(
  7. 	# 大标题
  8. 	make_title(v_title="智慧城市数据可视化分析监控大屏"),
  9. 	# 近五年城建重点项目数变化情况
  10. 	make_key_project_bar(v_title="近年城建重点项目统计"),
  11. 	# 各区县交通事故统计图
  12. 	make_county_traffic_bar(v_title="各区县交通事故统计图"),
  13. 	# 城市人才占比结构统计图
  14. 	make_talent_reversal_bar(v_title="城市人才占比结构统计图"),
  15. 	# 近7年人均生产总值变化图
  16. 	make_gdp_area_line(v_title="近7年人均生产总值变化图"),
  17. 	# 当年城市空气质量aqi变化图
  18. 	make_aqi_area_line(v_title="当年城市空气质量aqi变化图"),
  19. 	# 教育文化设施数量占比-图书馆
  20. 	make_edu_liquid(v_title="图书馆建设率", v_chart_id='liquid_1', ),
  21. )
  22. # 执行完毕后,打开临时html并拖拽,拖拽完点击Save Config，把chart_config.json放到本目录下
  23. page.render('大屏_临时.html')
  24. print('生成完毕:大屏_临时.html')

至此，临时大屏文件已经生成。

下面就开始手动拖拽，拖拽的过程，就不文字阐述了，可点击这个视频，观看拖拽过程：

【Python可视化大屏】用pyecharts拖拽生成大屏！

2.9 生成最终大屏

很关键！！

除了常规的拖拽组合大屏操作外，还记得2.7章节留下的疑问吗？

定义一个存放视频的div，把它存到一个字符串里：

  1. video_new = r"""
  2.  <div id="bar_project" class="chart-container" style="width:450px; height:350px;">
  3. 	<video id="videoID" controls="controls" style="width:140%;"> <!--MSK修改视频 -->
  4. 	  <source src="./static/城市宣传片.mp4" type="video/mp4"/>
  5. 	</video>
  6. 	</div>
  7. 	<br/>
  8. <!--	<button id="con" onclick="btn()">开始/暂停 </button>-->
  10. <script  type="text/javascript">
  11. 	window.onload = function() {
  12. 		var local1=document.getElementById('videoID');  //获取，函数执行完成后local内存释放
  13. 		local1.autoplay = true; // 自动播放
  14. 		local1.loop = true; // 循环播放
  15. 		local1.muted=true; // 关闭声音，如果为false,视频无法自动播放
  16. 		if(local1.paused){  //判断是否处于暂停状态
  17. 			local1.play();  //开启播放
  18. 	    }else{
  19. 			local1.pause();  //停止播放
  20. 	    }
  21.     }
  22.     function btn(){
  23. 		var local=document.getElementById('videoID');  //获取，函数执行完成后local内存释放
  24. 		if(local.paused){  //判断是否处于暂停状态
  25. 			local.play();  //开启播放
  26. 	    }else{
  27. 			local.pause();  //停止播放
  28. 	    }
  29. 	}
  30. </script>
  31. """

注意看这行代码下面这行代码，把mp4视频文件放到static目录下：

<source src="./static/城市宣传片.mp4" type="video/mp4"/>

在临时html里找到左上角图表的代码部分，用正则表达式替换成这个视频的代码：

  1. with open('大屏_临时.html', 'r', encoding='utf8') as f:
  2. 	text = f.read()
  3. # 正则表达式替换文本
  4. text2 = re.sub('<div id="bar_project"(.*?)</script>', video_new, text, flags=re.DOTALL)
  5. with open('大屏_临时2.html', 'w', encoding='utf8') as f:
  6. 	f.write(text2)
  7. print('已写入：大屏_临时2.html')

最后，再执行常规生成最终大屏的代码：

  1. Page.save_resize_html(
  2. 	source="大屏_临时2.html",  # 源html文件
  3. 	cfg_file="chart_config.json",  # 配置文件
  4. 	dest="大屏_最终.html"  # 目标html文件
  5. )

这样，就完成了把视频布局到大屏里的最终目的！

最后，再看一次大屏演示效果：

【大屏演示】用Python开发智慧城市数据可视化分析大屏

2.10 部署到服务器-供外部访问

通过flask框架，将html大屏网页快速部署到服务器：

  1. from flask import Flask, render_template
  2.  
  3. app = Flask(__name__, template_folder='./', )
  4.  
  5.  
  6. # 定义路由及视图函数
  7. @app.route('/')  # 装饰器
  8. def f_index():
  9. 	return render_template('大屏_最终.html')
  10.  
  11.  
  12. if __name__ == '__main__':
  13. 	app.run(host='0.0.0.0', port=7888, debug=True)

需要注意的是，host设置为'0.0.0.0'，不要把host设置为'127.0.0.1'或者'localhost'，否则只能自己在本地访问，外部用户无法访问。

再多说一句，如果host设置没问题，外部用户仍然无法访问，请查看你的云服务器防火墙配置、端口映射、win出入站访问等安全策略，是否存在问题。

三、在线演示

大屏演示地址：智慧城市数据可视化分析监控大屏

我的服务器是乞丐版的，带宽有限，左上角视频播放会卡顿，大家悠着点访问~~

本文首发公众号「老男孩的平凡之路」

我是 @马哥python说 ，持续分享python干货中！

我是马哥，全网累计粉丝上万，欢迎一起交流python技术。

各平台搜索“马哥python说”：知乎、哔哩哔哩、小红书、新浪微博。

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

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

  

闽ICP备14008679号