It takes about 3 minutes to read this article
Main content: data analysis.
Applicable people: Python beginners, data analysts, or those who are interested in data analysis.
Prepared software: Anaconda (Spyder: code compilation), Navicat Premium 12 (database).
I have been engaged in IT project management for so many years, and I have basically abandoned my programming skills, but I have been exposed to Python since 2019, and I am deeply fascinated by this language. For hardware integration and data analysis, I can write in python. Xiaofeng wants to let beginners learn the following through this article:
1. Pyecharts chart;
2. Connect to the database;
3. Large-screen Kanban-monitoring center.
Today, we will talk about: 3. How to layout the large-screen Kanban
First of all, we first draw up a draft of the large screen (as shown above), and divide the large screen into 8 parts (Part0-7).
After the content of the large screen is designed, continue with the above, we write all the functions of the chart in code
from pyecharts import options as opts
from pyecharts.charts import Bar,Gauge,Pie,Page,Funnel,Geo,Scatter3D
import random
def bar(): #柱状图
cate = ['1月', '2月', '3月', '4月', '5月', '6月']
c = (
Bar()
.add_xaxis(cate)
.add_yaxis("订单数", [random.randint(100, 200) for _ in cate])
.add_yaxis("完成数", [random.randint(50, 100) for _ in cate])
.set_series_opts(
label_opts=opts.LabelOpts(is_show=True,color="#2CB34A")
)
.set_global_opts(title_opts=opts.TitleOpts(title="2021年订单推移图",
title_textstyle_opts=opts.TextStyleOpts(color="#2CB34A"),
pos_left="5%"),
legend_opts=opts.LegendOpts(textstyle_opts=opts.TextStyleOpts(color="#2CB34A")),
xaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(color="#2CB34A")),
yaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(color="#2CB34A"))
)
.set_colors(["blue", "green"])
#.render("bar_stack0.html")
)
return c
def tab0(name,color): #标题
c = (Pie().
set_global_opts(
title_opts=opts.TitleOpts(title=name,pos_left='center',pos_top='center',
title_textstyle_opts=opts.TextStyleOpts(color=color,font_size=20))))
return c
def tab1(name,color): #标题
c = (Pie().
set_global_opts(
title_opts=opts.TitleOpts(title=name,pos_left='center',pos_top='center',
title_textstyle_opts=opts.TextStyleOpts(color=color,font_size=25))))
return c
def gau():#仪表图
c = (
Gauge(init_opts=opts.InitOpts(width="400px", height="400px"))
.add(series_name="库位利用率", data_pair=[["", 90]])
.set_global_opts(
legend_opts=opts.LegendOpts(is_show=False),
tooltip_opts=opts.TooltipOpts(is_show=True, formatter="{a} <br/>{b} : {c}%"),
)
#.render("gauge.html")
)
return c
def radius():
cate = ['客户A', '客户B', '客户C', '客户D', '客户E', '其他客户']
data = [153, 124, 107, 99, 89, 46]
c=Pie()
c.add('', [list(z) for z in zip(cate, data)],
radius=["30%", "75%"],
rosetype="radius")
c.set_global_opts(title_opts=opts.TitleOpts(title="客户销售额占比", padding=[1,250],title_textstyle_opts=opts.TextStyleOpts(color="#FFFFFF")),
legend_opts=opts.LegendOpts(textstyle_opts=opts.TextStyleOpts(color="#FFFFFF"),type_="scroll",orient="vertical",pos_right="5%",pos_top="middle")
)
c.set_series_opts(label_opts=opts.LabelOpts(formatter="{b}: {d}%"))
c.set_colors(['red',"orange", "yellow", "green", "Cyan", "purple"])
return c
def funnel():
cate = ['访问', '注册', '加入购物车', '提交订单', '付款成功']
data = [30398, 15230, 10045, 8109, 5698]
c = Funnel()
c.add("用户数", [list(z) for z in zip(cate, data)],
sort_='ascending',
label_opts=opts.LabelOpts(position="inside"))
c.set_global_opts(title_opts=opts.TitleOpts(title=""))
return c
def geo():
city_num = [('武汉',105),('成都',70),('北京',99),
('西安',80),('杭州',60),('贵阳',34),
('上海',65),('深圳',54),('乌鲁木齐',76),
('哈尔滨',47),('兰州',56),('信阳',85)]
start_end = [('宁波','成都'),('武汉','北京'),('武汉','西安'),
('长沙','杭州'),('武汉','贵阳'),('武汉','上海'),
('甘肃','深圳'),('北京','乌鲁木齐'),('上海','哈尔滨'),
('武汉','兰州'),('西藏','信阳')]
c = Geo()
c.add_schema(maptype='china',
itemstyle_opts=opts.ItemStyleOpts(color='#323c48', border_color='white'))
# 4.添加数据
c.add('', data_pair=city_num, color='white')
c.add('', data_pair=start_end, type_="lines",label_opts=opts.LabelOpts(is_show=False),
effect_opts=opts.EffectOpts(symbol="arrow",
color='gold',
symbol_size=7))
c.set_global_opts(
title_opts = opts.TitleOpts(title=""))
return c
def scatter3D():
data = [(random.randint(0, 100), random.randint(0, 100), random.randint(0, 100)) for _ in range(80)]
c = (Scatter3D()
.add("", data)
.set_global_opts(
title_opts=opts.TitleOpts(""),
)
)
Next, we refer to the Page function to accumulate all the charts in one page, the code is as follows
from pyecharts.charts import Page
page = Page()
page.add(
tab0("OFFICETOUCH","#2CB34A"),
bar(),
tab1("数据可视化大屏","#2CB34A"),
gau(),
radius(),
funnel(),
geo(),
scatter3D()
)
page.render("datacenter.html")
We run the above two pieces of code and find that the layout is presented one by one from top to bottom, so far we have completed half of the coding
In order to layout the chart according to our draft, we then quote HTML (from bs4 import BeautifulSoup)
from bs4 import BeautifulSoup
with open("datacenter.html", "r+", encoding='utf-8') as html:
html_bf = BeautifulSoup(html, 'lxml')
divs = html_bf.select('.chart-container')
divs[0]["style"] = "width:10%;height:10%;position:absolute;top:0;left:2%;"
divs[1]["style"] = "width:40%;height:40%;position:absolute;top:12%;left:0;"
divs[2]["style"] = "width:35%;height:10%;position:absolute;top:2%;left:30%;"
divs[3]["style"] = "width:40%;height:40%;position:absolute;top:10%;left:28%;"
divs[4]["style"] = "width:40%;height:35%;position:absolute;top:12%;left:55%;"
divs[5]["style"] = "width:30%;height:35%;position:absolute;top:60%;left:2%;"
divs[6]["style"] = "width:60%;height:50%;position:absolute;top:45%;left:15%;"
divs[7]["style"] = "width:35%;height:40%;position:absolute;top:50%;left:60%;"
body = html_bf.find("body")
body["style"] = "background-image: " # 背景颜色
html_new = str(html_bf)
html.seek(0, 0)
html.truncate()
html.write(html_new)
html.close()
divs[0][“style”] = “width:10%;height:10%;position:absolute;top:0;left:2%;” in the code is the width, height, position, The definition of top margin and left margin, here we use percentage to achieve screen adaptive effect.
Finally, we can also set a background image, the code is combined as follows
from pyecharts import options as opts
from pyecharts.charts import Bar,Gauge,Pie,Page,Funnel,Geo,Scatter3D
import random
def bar(): #柱状图
cate = ['1月', '2月', '3月', '4月', '5月', '6月']
c = (
Bar()
.add_xaxis(cate)
.add_yaxis("订单数", [random.randint(100, 200) for _ in cate])
.add_yaxis("完成数", [random.randint(50, 100) for _ in cate])
.set_series_opts(
label_opts=opts.LabelOpts(is_show=True,color="#2CB34A")
)
.set_global_opts(title_opts=opts.TitleOpts(title="2021年订单推移图",
title_textstyle_opts=opts.TextStyleOpts(color="#2CB34A"),
pos_left="5%"),
legend_opts=opts.LegendOpts(textstyle_opts=opts.TextStyleOpts(color="#2CB34A")),
xaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(color="#2CB34A")),
yaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(color="#2CB34A"))
)
.set_colors(["blue", "green"])
#.render("bar_stack0.html")
)
return c
def tab0(name,color): #标题
c = (Pie().
set_global_opts(
title_opts=opts.TitleOpts(title=name,pos_left='center',pos_top='center',
title_textstyle_opts=opts.TextStyleOpts(color=color,font_size=20))))
return c
def tab1(name,color): #标题
c = (Pie().
set_global_opts(
title_opts=opts.TitleOpts(title=name,pos_left='center',pos_top='center',
title_textstyle_opts=opts.TextStyleOpts(color=color,font_size=25))))
return c
def gau():#仪表图
c = (
Gauge(init_opts=opts.InitOpts(width="400px", height="400px"))
.add(series_name="库位利用率", data_pair=[["", 90]])
.set_global_opts(
legend_opts=opts.LegendOpts(is_show=False),
tooltip_opts=opts.TooltipOpts(is_show=True, formatter="{a} <br/>{b} : {c}%"),
)
#.render("gauge.html")
)
return c
def radius():
cate = ['客户A', '客户B', '客户C', '客户D', '客户E', '其他客户']
data = [153, 124, 107, 99, 89, 46]
c=Pie()
c.add('', [list(z) for z in zip(cate, data)],
radius=["30%", "75%"],
rosetype="radius")
c.set_global_opts(title_opts=opts.TitleOpts(title="客户销售额占比", padding=[1,250],title_textstyle_opts=opts.TextStyleOpts(color="#FFFFFF")),
legend_opts=opts.LegendOpts(textstyle_opts=opts.TextStyleOpts(color="#FFFFFF"),type_="scroll",orient="vertical",pos_right="5%",pos_top="middle")
)
c.set_series_opts(label_opts=opts.LabelOpts(formatter="{b}: {d}%"))
c.set_colors(['red',"orange", "yellow", "green", "Cyan", "purple"])
return c
def funnel():
cate = ['访问', '注册', '加入购物车', '提交订单', '付款成功']
data = [30398, 15230, 10045, 8109, 5698]
c = Funnel()
c.add("用户数", [list(z) for z in zip(cate, data)],
sort_='ascending',
label_opts=opts.LabelOpts(position="inside"))
c.set_global_opts(title_opts=opts.TitleOpts(title=""))
return c
def geo():
city_num = [('武汉',105),('成都',70),('北京',99),
('西安',80),('杭州',60),('贵阳',34),
('上海',65),('深圳',54),('乌鲁木齐',76),
('哈尔滨',47),('兰州',56),('信阳',85)]
start_end = [('宁波','成都'),('武汉','北京'),('武汉','西安'),
('长沙','杭州'),('武汉','贵阳'),('武汉','上海'),
('甘肃','深圳'),('北京','乌鲁木齐'),('上海','哈尔滨'),
('武汉','兰州'),('西藏','信阳')]
c = Geo()
c.add_schema(maptype='china',
itemstyle_opts=opts.ItemStyleOpts(color='#323c48', border_color='white'))
# 4.添加数据
c.add('', data_pair=city_num, color='white')
c.add('', data_pair=start_end, type_="lines",label_opts=opts.LabelOpts(is_show=False),
effect_opts=opts.EffectOpts(symbol="arrow",
color='gold',
symbol_size=7))
c.set_global_opts(
title_opts = opts.TitleOpts(title=""))
return c
def scatter3D():
data = [(random.randint(0, 100), random.randint(0, 100), random.randint(0, 100)) for _ in range(80)]
c = (Scatter3D()
.add("", data)
.set_global_opts(
title_opts=opts.TitleOpts(""),
)
)
return c
page = Page()
page.add(
tab0("OFFICETOUCH","#2CB34A"),
bar(),
tab1("数据可视化大屏","#2CB34A"),
gau(),
radius(),
funnel(),
geo(),
scatter3D()
)
page.render("datacenter.html")
#os.system("scatter.html")
from bs4 import BeautifulSoup
with open("datacenter.html", "r+", encoding='utf-8') as html:
html_bf = BeautifulSoup(html, 'lxml')
divs = html_bf.select('.chart-container')
divs[0]["style"] = "width:10%;height:10%;position:absolute;top:0;left:2%;"
divs[1]["style"] = "width:40%;height:40%;position:absolute;top:12%;left:0;"
divs[2]["style"] = "width:35%;height:10%;position:absolute;top:2%;left:30%;"
divs[3]["style"] = "width:40%;height:40%;position:absolute;top:10%;left:28%;"
divs[4]["style"] = "width:40%;height:35%;position:absolute;top:12%;left:55%;"
divs[5]["style"] = "width:30%;height:35%;position:absolute;top:60%;left:2%;"
divs[6]["style"] = "width:60%;height:50%;position:absolute;top:45%;left:15%;"
divs[7]["style"] = "width:35%;height:40%;position:absolute;top:50%;left:60%;"
body = html_bf.find("body")
body["style"] = "background-image: url(bgd.jpg)" # 背景颜色
html_new = str(html_bf)
html.seek(0, 0)
html.truncate()
html.write(html_new)
The renderings are as follows:
After studying here, can you complete the work of data visualization independently? Xiaofeng finally lived up to his mission and gave you a complete introduction to how to use Python to draw data visualization on the big screen. Xiaofeng will continue to work hard to bring you more interesting, practical and simple Python functions. May we grow together!
The other two tutorials are as follows:
1. The Pyecharts chart of the most complete tutorial on Python large-screen Kanban : https://blog.csdn.net/weixin_42341655/article/details/118078089
2. The database connection of the most complete tutorial of Python large-screen Kanban https://blog.csdn.net/weixin_42341655/article/details/118096691
If you find it useful, please like, follow, and bookmark, thank you for your support!