今天有位职场的人员询问我可不可以做一个汇报销售工作进展的数据可视化大屏,我最近刚好学了这个pyecharts库,利用它我们可以绘制一个完美的数据可视化大屏,最终结果如下图形和视频:那么这么完美的效果是怎么呈现的呢,接下来我们便开始绘制这样的数字可视化大屏。
视频演示:http://mpvideo.qpic.cn/0bf2rmaasaaadaai6wt5dzqfbc6dbgfqacia.f10002.mp4?
本次开发所用工具:python3.6和pycharm专业版
1. 首先我们导入相关库
代码语言:javascript复制from pyecharts import options as opts
from pyecharts.charts import Bar,Boxplot,Gauge,Map,Pie,HeatMap,Page
from pyecharts.faker import Faker
2.绘制第一个图形柱状图
代码语言:javascript复制def bar(): #柱状图
c = (
Bar()
.add_xaxis(Faker.choose())
.add_yaxis("商家A", Faker.values(), stack="stack1")
.add_yaxis("商家B", Faker.values(), stack="stack1")
.set_series_opts(label_opts=opts.LabelOpts(is_show=False))
.set_global_opts(title_opts=opts.TitleOpts(title="Bar"))
#.render("bar_stack0.html")
)
return c
3.绘制第二个图形箱型图
代码语言:javascript复制def box():#箱状图
v1 = [
[850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980],
[960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790],
]
v2 = [
[890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920],
[890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870],
]
c = Boxplot()
c.add_xaxis(["expr1", "expr2"])
c.add_yaxis("A", c.prepare_data(v1))
c.add_yaxis("B", c.prepare_data(v2))
c.set_global_opts(title_opts=opts.TitleOpts(title="BoxPlot-基本示例"))
#c.render("boxplot_base.html")
return c
4.绘制第三个图形仪表图
代码语言:javascript复制def gau():#仪表图
c = (
Gauge(init_opts=opts.InitOpts(width="1600px", height="800px"))
.add(series_name="业务指标", data_pair=[["完成率", 55.5]])
.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
5.绘制第四个图形地图
代码语言:javascript复制def maps():#地图
c = (
Map()
.add("商家A", [list(z) for z in zip(Faker.provinces, Faker.values())], "china")
.set_global_opts(title_opts=opts.TitleOpts(title="Map-基本示例"))
#.render("map_base.html")
)
return c
6.绘制第五个图形饼图
代码语言:javascript复制def pie():#饼图
c = (
Pie()
.add("", [list(z) for z in zip(Faker.choose(), Faker.values())])
.set_colors(["blue", "green", "yellow", "red", "pink", "orange", "purple"])
.set_global_opts(title_opts=opts.TitleOpts(title=""))
.set_series_opts(label_opts=opts.LabelOpts(formatter="{b}: {c}"))
#.render("pie_set_color.html")
)
return c
7.绘制第六个图形热力图
代码语言:javascript复制def heat():#热力图
value = [[i, j, random.randint(0, 50)] for i in range(24) for j in range(7)]
c = (
HeatMap()
.add_xaxis(Faker.clock)
.add_yaxis("series0", Faker.week, value)
.set_global_opts(
title_opts=opts.TitleOpts(title="HeatMap-基本示例"),
visualmap_opts=opts.VisualMapOpts(),
)
#.render("heatmap_base.html")
)
return c
8.给所有图加上标题并合成到一张网页上
代码语言:javascript复制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=35))))
return c
page = Page()
page.add(tab1("pyecharts可视化大屏","#FF00FF"),
gau(),
heat(),
maps(),
bar(),
box(),
pie())
page.render("mytest.html")
9.给图形进行布局和展示
代码语言:javascript复制from bs4 import BeautifulSoup
with open("mytest.html", "r ", encoding='utf-8') as html:
html_bf = BeautifulSoup(html, 'lxml')
divs = html_bf.select('.chart-container')
divs[0]["style"] = "width:40%;height:10%;position:absolute;top:0;left:30%;"
divs[1]["style"] = "width:40%;height:40%;position:absolute;top:10%;left:30%;"
divs[2]["style"] = "width:40%;height:50%;position:absolute;top:50%;left:30%;"
divs[3]["style"] = "width:30%;height:50%;position:absolute;top:0;left:0;"
divs[4][ "style"] = "width:30%;height:50%;position:absolute;top:50%;left:0;"
divs[5]["style"] = "width:30%;height:50%;position:absolute;top:0;left:70%;"
divs[6]['style'] = "width:30%;height:50%;position:absolute;top:50%;left:70%;"
body = html_bf.find("body")
body["style"] = "background-color:#FFFFFF;" # 背景颜色
html_new = str(html_bf)
html.seek(0, 0)
html.truncate()
html.write(html_new)
html.close()
以上就是我们绘制可视化大屏的全部步骤啦,绘制出来的这些图形
全是动态可以展示的呢。利用pyecharts还可以绘制更高级的数据可
视化大屏呢。如以下视频:http://mpvideo.qpic.cn/0bf2seaasaaan4ai6t35dvqfbeodbgiqacia.f10002.mp4?