基于pyecharts搭建BI看板

在用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 = "<div align="center" style="width:3000px;left:0px;">******：此处需根据最终整个画布的大小，设置标题的宽度，进而使标题呈现居中效果。

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 = "<div align=\"center\" style=\"width:3000px;left:0px;\">\n<span style=\"font-size:32px;font face=\'黑体\';color:#000\"><b>BI看板test</b></div>"  # 修改页面背景色、添加看板标题，以及标题的宽度等。注：需根据看板整体宽度调整标题的宽度，使标题呈现居中效果。
    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看板示例