在用EXCEL搭建起BI看板DEMO版后,我又尝试用Pyecharts对其进行了升级,最终呈现数据更直观、维度更细,老大看着也更满意了。
用EXCEL搭建的看板
升级后的BI看板
一、思路梳理
先看自己需要哪些图表,便导入对应的模块包;然后再导入page包,添加各图表于画布中,同时修改其在画布的位置,最终产出一份BI看板。
出于业务隐私考虑,此处均罗列测试数据。
二、操作要领
1、导入需要用到的包,同时定义画布
from pyecharts import Pie,Bar,Gauge,Line,Liquid,Page
import os as os
from bs4 import BeautifulSoup
page = Page()
2、各子图绘制
各类图表的参数介绍,在此不作赘述。
2.1、饼图绘制
pie_1 = Pie("pie_1",)
pie_1.add("", ['业务员A','业务员B','业务员C','业务员D'],[100,200,300,400], is_label_show=True)
page.add_chart(pie_1,name="pie_1")#BI看板的重要步骤,将图表添加到画布中,下同。
2.2、柱状图绘制
bar_1=Bar("bar_1",)
bar_1.add("活跃数",['江西','湖南','湖北','广东'],[190,260,420,570],is_label_show=True)
page.add_chart(bar_1,name="bar_1")
2.3、仪表盘绘制
gauge_1 = Gauge("指标A完成度%")
gauge_1.add("","完成度%",34.2)#此处需注意,如果欲展示的数值为34.2%,那么填写百分位前的数字即可。
page.add_chart(gauge_1,name="gauge_1")
2.4、折线图绘制
line_1 = Line("每天A业务增长", title_top="0%")
line_1.add("",['01.01','01.02','01.03','01.04','01.05'],[10,25,32,27,59],mark_point=["max", "min"],mark_line=["average"])
page.add_chart(line_1,name="line_1")
2.5、水滴球绘制
lq_1 = Liquid("业务A")
lq_1.add("Liquid", [0.321, 0.5, 0.2], is_liquid_outline_show=False, is_liquid_animation=True)#此处需要注意,假使欲展示的数值为32.1%,那么此处需要转换成对应的小数,与仪表盘不太一样。
page.add_chart(lq_1,name="lq_1")
3、设定画布参数
假设最终按照上述方法,分别绘制了一个饼图、一个柱形图、三个饼图、五个折线图、五个水滴球,一共15个图表,于是我们在画布上相应创建15个盒子/模型,通过设置各盒子的位置、大小,进而实现对添加到画布中的图表进行排版,实现最终的BI看板。
3.1参数介绍:
width:宽度;
height:高度;
top:距顶端的位置;
left:距最左端的位置;
border-style:边框样式;
border-color:边框颜色;
border-bottom-width:底端边框线的宽度,设置为0即为不显示,通过修改此参数,可以将属于同一维度的图表用一个共同的框线给包括,更显美观。
border-top-width、border-left-width、border-right-width:分别是顶端框线宽度、左端框线宽度、右端框线的宽度。
div_title = "
page.render("BI看板test.html")
with open(os.path.join(os.path.abspath("."),"BI看板test.html"),'r+',encoding="utf8") as html:#返回链接的路径,并加入os的路径,同时打开
html_bf=BeautifulSoup(html,"lxml")#创建 beautifulsoup 对象,Beautiful Soup是python的一个库,最主要的功能是从网页抓取数据
divs=html_bf.find_all("div")#find_all()找到所有匹配结果出现的地方,找到所有匹配div的地方
divs[0]["style"]="width:600px;height:350px;position:absolute;top:70px;left:0px;border-style:solid;border-color:#444444;border-bottom-width:0px;border-top-width:1px;border-left-width:0.5px;border-right-width:0.5px;"
divs[1]["style"]="width:600px;height:350px;position:absolute;top:70px;left:600px;border-style:solid;border-color:#444444;border-bottom-width:0px;border-top-width:1px;border-left-width:0.5px;border-right-width:0.5px;"
divs[2]["style"] = "width:600px;height:350px;position:absolute;top:70px;left:1200px;border-style:solid;border-color:#444444;border-bottom-width:0px;border-top-width:1px;border-left-width:0.5px;border-right-width:0.5px;"
divs[3]["style"] = "width:600px;height:350px;position:absolute;top:70px;left:1800px;border-style:solid;border-color:#444444;border-bottom-width:0px;border-top-width:1px;border-left-width:0.5px;border-right-width:0.5px;"
divs[4]["style"] = "width:600px;height:350px;position:absolute;top:70px;left:2400px;border-style:solid;border-color:#444444;border-bottom-width:0px;border-top-width:1px;border-left-width:0.5px;border-right-width:0.5px;"
divs[5]["style"] = "width:600px;height:300px;position:absolute;top:420px;left:0px;border-style:solid;border-color:#444444;border-bottom-width:0px;border-top-width:0px;border-left-width:0.5px;border-right-width:0.5px;"
divs[6]["style"] = "width:600px;height:300px;position:absolute;top:420px;left:600px;border-style:solid;border-color:#444444;border-bottom-width:0px;border-top-width:0px;border-left-width:0.5px;border-right-width:0.5px;"
divs[7]["style"] = "width:600px;height:300px;position:absolute;top:420px;left:1200px;border-style:solid;border-color:#444444;border-bottom-width:0px;border-top-width:0px;border-left-width:0.5px;border-right-width:0.5px;"
divs[8]["style"] = "width:600px;height:300px;position:absolute;top:420px;left:1800px;border-style:solid;border-color:#444444;border-bottom-width:0px;border-top-width:0px;border-left-width:0.5px;border-right-width:0.5px;"
divs[9]["style"] = "width:600px;height:300px;position:absolute;top:420px;left:2400px;border-style:solid;border-color:#444444;border-bottom-width:0px;border-top-width:0px;border-left-width:0.5px;border-right-width:0.5px;"
divs[10]["style"] = "width:600px;height:300px;position:absolute;top:720px;left:0px;border-style:solid;border-color:#444444;border-bottom-width:1px;border-top-width:0px;border-left-width:0.5px;border-right-width:0.5px;"
divs[11]["style"] = "width:600px;height:300px;position:absolute;top:720px;left:600px;border-style:solid;border-color:#444444;border-bottom-width:1px;border-top-width:0px;border-left-width:0.5px;border-right-width:0.5px;"
divs[12][ "style"] = "width:600px;height:300px;position:absolute;top:720px;left:1200px;border-style:solid;border-color:#444444;border-bottom-width:1px;border-top-width:0px;border-left-width:0.5px;border-right-width:0.5px;"
divs[13]["style"] = "width:600px;height:300px;position:absolute;top:720px;left:1800px;border-style:solid;border-color:#444444;border-bottom-width:1px;border-top-width:0px;border-left-width:0.5px;border-right-width:0.5px;"
divs[14]["style"] = "width:600px;height:300px;position:absolute;top:720px;left:2400px;border-style:solid;border-color:#444444;border-bottom-width:1px;border-top-width:0px;border-left-width:0.5px;border-right-width:0.5px;"
body = html_bf.find("body")
body["style"] = "background-color:#FFFFFF"
div_title = "
body.insert(0, BeautifulSoup(div_title, "lxml").div)
html_new = str(html_bf)
html.seek(0, 0)
html.truncate()
html.write(html_new)
html.close()
BI看板示例