目錄
- 一、開發背景
- 二、講解代碼
- 2.1 大標題+背景圖
- 2.2 各區縣交通事故統計圖-系列柱形圖
- 2.3 圖書館建設率-水球圖
- 2.4 當年城市空氣質量aqi指數-面積圖
- 2.5 近7年人均生產總值變化圖-面積圖
- 2.6 城市人才占比結構圖-柱形圖
- 2.7 城市宣傳片視頻-大屏左上角位置
- 2.8 組合以上圖表，生成臨時大屏
- 2.9 生成最終大屏
- 2.10 部署到服務器-供外部訪問
- 三、在線演示
一、開發背景
您好，我是 @馬哥python說 ，這是我獨立開發的Python可視化大屏，看下演示效果：
截圖：
視頻演示效果：
https://www.zhihu.com/zvideo/1556218745923821568
這個大屏，是通過pyecharts可視化開發框架實作，
下面詳細介紹，這個大屏的實作程序，
二、講解代碼
注：由于我的MySQL資料庫環境問題，暫通過模擬假資料，對接可視化代碼，
2.1 大標題+背景圖
由于pyecharts組件沒有專門用作標題的圖表，我決定靈活運用Line組件實作大標題，
line3 = (
Line(init_opts=opts.InitOpts(, # 寬度
height="800px", # 高度
bg_color={"type": "pattern", "image": JsCode("img"),
"repeat": "repeat", })) # 設定背景圖片
.add_xaxis([None]) # 插入空資料
.add_yaxis("", [None]) # 插入空資料
.set_global_opts(
title_opts=opts.TitleOpts(title=v_title,
pos_left='center',
pos_top='1%',
title_textstyle_opts=opts.TextStyleOpts(font_size=45,
font_family='cursive',
color='white',
align='left'),
),
yaxis_opts=opts.AxisOpts(is_show=False), # 不顯示y軸
xaxis_opts=opts.AxisOpts(is_show=False)) # 不顯示x軸
)
# 設定背景圖片
line3.add_js_funcs(
"""
var img = new Image(); img.src = 'https://www.cnblogs.com/mashukui/archive/2022/09/25/static/城市1.jpeg';
"""
)
這里最關鍵的邏輯，就是背景圖片的處理，我找了一張智慧城市的炫麗背景圖片：
然后用add_js_funcs代碼把此圖片設定為整個大屏的背景圖，
大標題效果：
由于背景圖片太大（4360x2910），只顯示出了上半部分，恰恰是我預期的效果！
2.2 各區縣交通事故統計圖-系列柱形圖
針對城市交通事故統計資料，繪制系列柱形圖：
x_data = https://www.cnblogs.com/mashukui/archive/2022/09/25/[str(i) +'月' for i in range(1, 13)]
y1_data = https://www.cnblogs.com/mashukui/archive/2022/09/25/[193, 242, 206, 198, 335, 298, 38, 93, 88, 285, 297, 302]
y2_data = [96, 41, 28, 95, 36, 94, 29, 61, 42, 85, 99, 31]
bar = (
Bar(init_opts=opts.InitOpts(theme=theme_config, , height="350px", chart_id='bar_county'))
.add_xaxis(x_data)
.add_yaxis("高峰期", y1_data, gap="0%")
.add_yaxis("非高峰期", y2_data, gap="0%")
.set_global_opts(title_opts=opts.TitleOpts(title=v_title,
pos_left='center',
title_textstyle_opts=opts.TextStyleOpts(color=chart_text_color),
),
legend_opts=opts.LegendOpts(pos_right='10%', orient='vertical'),
tooltip_opts=opts.TooltipOpts(
trigger="axis", axis_pointer_type="cross", is_show=True), # 提示框配置
xaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(color=chart_text_color), ),
yaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(color=chart_text_color), ),
)
)
效果圖如下：
這種兩兩一組的柱形圖，在pyecharts中叫做：系列柱形圖，Bar with different series gap
2.3 圖書館建設率-水球圖
圖書館建設率，采用pyecharts的水球圖（動態）展示效果：
data_list = [[23, 0.6328]]
l1 = Liquid(init_opts=opts.InitOpts(theme=theme_config, , height="350px", chart_id=v_chart_id))
l1.add("完成率", [data_list[0][1]], center=["30%", "50%"], label_opts=opts.LabelOpts(font_size=20, position='inside'))
l1.set_global_opts(title_opts=opts.TitleOpts(title=v_title,
pos_left='15%',
pos_top='15%',
title_textstyle_opts=opts.TextStyleOpts(color=chart_text_color),
))
效果圖如下：（此處是靜態截圖，其實有動態波紋效果）
2.4 當年城市空氣質量aqi指數-面積圖
城市空氣質量aqi，采用面積圖展示：
x_data = https://www.cnblogs.com/mashukui/archive/2022/09/25/[str(i) +'月' for i in range(1, 13)]
y_data = https://www.cnblogs.com/mashukui/archive/2022/09/25/[36.8, 35.2, 36.0, 31.9, 29.5, 14.9, 33.5, 20.8, 37.1, 42.6, 44.9, 53.3]
area_color_js = ( # 設定美觀背景色"new echarts.graphic.LinearGradient(0, 0, 0, 1, "
"[{offset: 0, color: '#eb64fb'}, {offset: 1, color: '#3fbbff0d'}], false)"
)
line = (
Line(init_opts=opts.InitOpts(theme=theme_config, , height="300px", chart_id='line_aqi'))
.add_xaxis(xaxis_data=https://www.cnblogs.com/mashukui/archive/2022/09/25/x_data)
.add_yaxis(
series_name="增長率",
y_axis=y_data,
is_smooth=True, # 是否平滑
is_symbol_show=True,
symbol="circle",
symbol_size=6,
linestyle_opts=opts.LineStyleOpts(color="#fff"),
label_opts=opts.LabelOpts(is_show=True, position="top", color="white"),
itemstyle_opts=opts.ItemStyleOpts(
color="red", border_color="#fff", border_width=3
),
tooltip_opts=opts.TooltipOpts(is_show=False),
areastyle_opts=opts.AreaStyleOpts(color=JsCode(area_color_js), opacity=1),
)
.set_global_opts(
title_opts=opts.TitleOpts(
title=v_title,
pos_left="center",
pos_top='9%',
title_textstyle_opts=opts.TextStyleOpts(color=chart_text_color),
),
xaxis_opts=opts.AxisOpts(
type_="category",
boundary_gap=False,
axislabel_opts=opts.LabelOpts(margin=30, color=chart_text_color),
axisline_opts=opts.AxisLineOpts(is_show=False),
axistick_opts=opts.AxisTickOpts(
is_show=True,
length=25,
linestyle_opts=opts.LineStyleOpts(color="#ffffff1f"),
),
splitline_opts=opts.SplitLineOpts(
is_show=True, linestyle_opts=opts.LineStyleOpts(color="#ffffff1f")
),
),
yaxis_opts=opts.AxisOpts(
type_="value",
position="left",
axislabel_opts=opts.LabelOpts(margin=20, color=chart_text_color),
axisline_opts=opts.AxisLineOpts(
linestyle_opts=opts.LineStyleOpts(width=2, color="#fff")
),
axistick_opts=opts.AxisTickOpts(
is_show=True,
length=15,
linestyle_opts=opts.LineStyleOpts(color="#ffffff1f"),
),
splitline_opts=opts.SplitLineOpts(
is_show=True, linestyle_opts=opts.LineStyleOpts(color="#ffffff1f")
),
),
legend_opts=opts.LegendOpts(is_show=True, pos_right='right', pos_top='10%'),
tooltip_opts=opts.TooltipOpts(
trigger="axis", axis_pointer_type="cross", is_show=True), # 提示框配置
)
)
效果圖如下：
2.5 近7年人均生產總值變化圖-面積圖
與2.4章節邏輯實作相同，替換對應資料即可，不再贅述，
2.6 城市人才占比結構圖-柱形圖
分別統計該城市的博士人才、碩士人才、本科人才、專科人才、專科以下的占比情況，通過柱形圖展示：
x_data = https://www.cnblogs.com/mashukui/archive/2022/09/25/['博士人才', '碩士人才', '本科人才', '專科人才', '專科以下']
y_data = https://www.cnblogs.com/mashukui/archive/2022/09/25/[0.4, 5.8, 26.4, 29.8, 37.6, ]
# 畫柱形圖
bar = Bar(
init_opts=opts.InitOpts(theme=theme_config, , height="350px", chart_id='bar_talent')) # 初始化條形圖
bar.add_xaxis(x_data) # 增加x軸資料
bar.add_yaxis("占比", y_data) # 增加y軸資料
bar.set_series_opts(label_opts=opts.LabelOpts(position="right")) # Label出現位置
bar.set_global_opts(
legend_opts=opts.LegendOpts(pos_left='right'),
title_opts=opts.TitleOpts(title=v_title,
pos_left='center',
title_textstyle_opts=opts.TextStyleOpts(color=chart_text_color),
), # 標題
toolbox_opts=opts.ToolboxOpts(is_show=False), # 不顯示工具箱
tooltip_opts=opts.TooltipOpts(
trigger="axis", axis_pointer_type="cross", is_show=True), # 提示框配置
xaxis_opts=opts.AxisOpts(name="人才型別", # x軸名稱
axislabel_opts=opts.LabelOpts(rotate=0, color=chart_text_color),
splitline_opts=opts.SplitLineOpts(is_show=False)
),
yaxis_opts=opts.AxisOpts(name="百分比", # y軸名稱
axislabel_opts=opts.LabelOpts(rotate=0, color=chart_text_color), # y軸名稱
)
)
效果圖如下：
2.7 城市宣傳片視頻-大屏左上角位置
難點來了！
pyecharts本身并無播放視頻的組件，怎么實作的視頻播放呢？
首先，任意開發一個簡單的圖表，柱形圖、折線圖、散點圖什么都可以，后續把它拖拽到大屏左上角，
最后我會用宣傳片視頻替換掉這個圖表，
2.8 組合以上圖表，生成臨時大屏
通過pyecharts提供的Page組件，采用DraggablePageLayout的layout方法，組合大屏：
# 繪制:整個頁面
page = Page(
page_title="智慧城市資料可視化分析監控大屏", # 頁面標題
layout=Page.DraggablePageLayout, # 采用拖拽方式
)
page.add(
# 大標題
make_title(v_title="智慧城市資料可視化分析監控大屏"),
# 近五年城建重點專案數變化情況
make_key_project_bar(v_title="近年城建重點專案統計"),
# 各區縣交通事故統計圖
make_county_traffic_bar(v_title="各區縣交通事故統計圖"),
# 城市人才占比結構統計圖
make_talent_reversal_bar(v_title="城市人才占比結構統計圖"),
# 近7年人均生產總值變化圖
make_gdp_area_line(v_title="近7年人均生產總值變化圖"),
# 當年城市空氣質量aqi變化圖
make_aqi_area_line(v_title="當年城市空氣質量aqi變化圖"),
# 教育文化設施數量占比-圖書館
make_edu_liquid(v_title="圖書館建設率", v_chart_id='liquid_1', ),
)
# 執行完畢后,打開臨時html并拖拽,拖拽完點擊Save Config，把chart_config.json放到本目錄下
page.render('大屏_臨時.html')
print('生成完畢:大屏_臨時.html')
至此，臨時大屏檔案已經生成，
下面就開始手動拖拽，拖拽的程序，就不文字闡述了，可點擊這個視頻，觀看拖拽程序：
2.9 生成最終大屏
很關鍵！！
除了常規的拖拽組合大屏操作外，還記得2.7章節留下的疑問嗎？
定義一個存放視頻的div，把它存到一個字串里：
video_new = r"""
<div id="bar_project" style="width:450px; height:350px;">
<video id="videoID" controls="controls" style="width:140%;"> <!--MSK修改視頻 -->
<source src="https://www.cnblogs.com/mashukui/archive/2022/09/25/static/城市宣傳片.mp4" type="video/mp4"/>
</video>
</div>
<br/>
<!-- <button id="con" onclick="btn()">開始/暫停 </button>-->
<script type="text/javascript">
window.onload = function() {
var local1=document.getElementById('videoID'); //獲取，函式執行完成后local記憶體釋放
local1.autoplay = true; // 自動播放
local1.loop = true; // 回圈播放
local1.muted=true; // 關閉聲音，如果為false,視頻無法自動播放
if(local1.paused){ //判斷是否處于暫停狀態
local1.play(); //開啟播放
}else{
local1.pause(); //停止播放
}
}
function btn(){
var local=document.getElementById('videoID'); //獲取，函式執行完成后local記憶體釋放
if(local.paused){ //判斷是否處于暫停狀態
local.play(); //開啟播放
}else{
local.pause(); //停止播放
}
}
</script>
"""
注意看這行代碼下面這行代碼，把mp4視頻檔案放到static目錄下：
<source src="https://www.cnblogs.com/mashukui/archive/2022/09/25/static/城市宣傳片.mp4" type="video/mp4"/>
在臨時html里找到左上角圖表的代碼部分，用正則運算式替換成這個視頻的代碼：
with open('大屏_臨時.html', 'r', encoding='utf8') as f:
text = f.read()
# 正則運算式替換文本
text2 = re.sub('<div id="bar_project"(.*?)</script>', video_new, text, flags=re.DOTALL)
with open('大屏_臨時2.html', 'w', encoding='utf8') as f:
f.write(text2)
print('已寫入：大屏_臨時2.html')
最后，再執行常規生成最終大屏的代碼：
Page.save_resize_html(
source="大屏_臨時2.html", # 源html檔案
cfg_file="chart_config.json", # 組態檔
dest="大屏_最終.html" # 目標html檔案
)
這樣，就完成了把視頻布局到大屏里的最終目的！
最后，再看一次大屏演示效果：
https://www.zhihu.com/zvideo/1556218745923821568
2.10 部署到服務器-供外部訪問
通過flask框架，將html大屏網頁快速部署到服務器：
from flask import Flask, render_template
app = Flask(__name__, template_folder='./', )
# 定義路由及視圖函式
@app.route('/') # 裝飾器
def f_index():
return render_template('大屏_最終.html')
if __name__ == '__main__':
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可視化大屏】全流程揭秘實作可視化資料大屏的背后原理！
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/509496.html
標籤：其他
上一篇：棄用 Windows，政府機構 5000 萬臺電腦將替換為國產 Linux！
下一篇：Java8Stream流