目录
一、开发背景
二、讲解代码
2.1 大标题+背景图
2.2 各区县交通事故统计图-系列柱形图
2.3 图书馆建设率-水球图
2.4 当年城市空气质量aqi指数-面积图
2.5 近7年人均生产总值变化图-面积图
2.6 城市人才占比结构图-柱形图
2.7 城市宣传片视频-大屏左上角位置
2.8 组合以上图表，生成临时大屏
2.9 生成最终大屏
2.10 部署到服务器-供外部访问
三、在线演示
您好，我是 ，这是我独立开发的Python可视化大屏，看下演示效果：
这个大屏，是通过pyecharts可视化开发框架实现。
下面详细介绍，这个大屏的实现过程。
注：由于我的MySQL数据库环境问题，暂通过模拟假数据，对接可视化代码。
由于pyecharts组件没有专门用作标题的图表，我决定灵活运用Line组件实现大标题。
这里最关键的逻辑，就是背景图片的处理。我找了一张智慧城市的炫丽背景图片：
然后用add_js_funcs代码把此图片设置为整个大屏的背景图。
大标题效果：
由于背景图片太大（4360x2910），只显示出了上半部分，恰恰是我预期的效果！
针对城市交通事故统计数据，绘制系列柱形图：
效果图如下：
这种两两一组的柱形图，在pyecharts中叫做：系列柱形图，Bar with different series gap
图书馆建设率，采用pyecharts的水球图（动态）展示效果：
效果图如下：（此处是静态截图，其实有动态波纹效果）
城市空气质量aqi，采用面积图展示：
效果图如下：
与2.4章节逻辑实现相同，替换对应数据即可，不再赘述。
分别统计该城市的博士人才、硕士人才、本科人才、专科人才、专科以下的占比情况，通过柱形图展示：
效果图如下：
难点来了！
pyecharts本身并无播放视频的组件，怎么实现的视频播放呢？
首先，任意开发一个简单的图表，柱形图、折线图、散点图什么都可以，后续把它拖拽到大屏左上角。
最后我会用宣传片视频替换掉这个图表。
通过pyecharts提供的Page组件，采用DraggablePageLayout的layout方法，组合大屏：
至此，临时大屏文件已经生成。
下面就开始手动拖拽，拖拽的过程，就不文字阐述了，可点击这个视频，观看拖拽过程：
很关键！！
除了常规的拖拽组合大屏操作外，还记得2.7章节留下的疑问吗？
定义一个存放视频的div，把它存到一个字符串里：
注意看这行代码下面这行代码，把mp4视频文件放到static目录下：
在临时html里找到左上角图表的代码部分，用正则表达式替换成这个视频的代码：
最后，再执行常规生成最终大屏的代码：
这样，就完成了把视频布局到大屏里的最终目的！
最后，再看一次大屏演示效果：
通过flask框架，将html大屏网页快速部署到服务器：
需要注意的是，host设置为'0.0.0.0'，不要把host设置为'127.0.0.1'或者'localhost'，否则只能自己在本地访问，外部用户无法访问。
再多说一句，如果host设置没问题，外部用户仍然无法访问，请查看你的云服务器防火墙配置、端口映射、win出入站访问等安全策略，是否存在问题。
大屏演示地址：智慧城市数据可视化分析监控大屏
我的服务器是乞丐版的，带宽有限，左上角视频播放会卡顿，大家悠着点访问~~
本文首发公众号「老男孩的平凡之路」
我是 @马哥python说 ，持续分享python干货中！
我是马哥，全网累计粉丝上万，欢迎一起交流python技术。
各平台搜索“马哥python说”：知乎、哔哩哔哩、小红书、新浪微博。