用python制作可视化大屏
目录
前言
一.环境配置
插件：
1.python
2.Chinese
3.Open In Default Browser
安装python数据可视化的库 pyecharts库
二.制作可视化大屏
从网站中找示例图
1、小编自己做过的各省份车辆销售数量图
2、数据对比类型
3、渐变圆柱
4、饼图
制作大屏
1、制作一个大屏
执行该代码后会在指定目录生成一个HTML文件，并整合并包含这些示例图。接着，在生成的html中根据需要调整各图形的位置与尺寸。
3、最后通过一下代码来调整显示示例图在大屏中的位置
总结
前言
本文采用网站提供的示例图片，并使用Python进行数据整合和处理，在HTML页面中开发了数据可视化展示系统，并最终呈现效果。
一.环境配置
小编使用的是软件：Visual Studio Code
插件：
1.python
该插件为Visual Studio提供的代码扩展工具，并全面支持Pyhon 3.7及以上的版本（适用于所有已知版本的Python语言：最低为3.7及更高版本）。它包含以下主要功能：提供智能代码辅助功能（基于Pylance），具备语句校验功能；包含调试工具；支持智能代码导航；提供代码格式化建议；包含重构功能；集成变量资源管理器；具备测试资源管理功能！
2.Chinese
该插件旨在支持Visual Studio Code界面中的多语言模式，并特别适合非英语熟练型开发者使用。
3.Open In Default Browser
这个插件是我常用的工具之一，在Visual Studio Code中非常便捷地访问网页。例如，在处理html文件时可以直接打开并跳转到相关网页界面。
安装python数据可视化的库 pyecharts库
请启动Anaconda Prompt
请从以下位置获取Python包安装工具：pip
并指定以下镜像文件：pyecharts==1.9 -i [Simple Index](https://pypi.t tuna.tsinghua.edu.cn/simple "Simple Index")
查看是否成功 pip show pyecharts
所用到的环境就安装好啦！接下来就可以用python制作可视化大屏啦
二.制作可视化大屏
从网站中找示例图
1.我们可以从下面的网站中任意找3-6个可视化示例图
https://gallery.pyecharts.org/#/README
这个网站中包含各种图形demo的项目案例代码和演示。
而下面的官网文档涵盖pyecharts中各个功能和图形的详细解析及其代码参数的具体分析。
https://pyecharts.org/#/zh-cn/intro
pyecharts的画图语法结构
小编找的四个图是
1、面积图
import pyecharts.options as opts
from pyecharts.charts import Line
from pyecharts.faker import Faker
a = (
Line()
.add_xaxis(Faker.choose())
.add_yaxis("商家A", Faker.values(), is_smooth=True)
.add_yaxis("商家B", Faker.values(), is_smooth=True)
.set_series_opts(
areastyle_opts=opts.AreaStyleOpts(opacity=0.5),
label_opts=opts.LabelOpts(is_show=False),
)
.set_global_opts(
title_opts=opts.TitleOpts(title="面积图"),
xaxis_opts=opts.AxisOpts(
axistick_opts=opts.AxisTickOpts(is_align_with_label=True),
is_scale=False,
boundary_gap=False,
),
)
# .render("line_areastyle_boundary_gap.html")
)
a.render_notebook()
2、数据对比类型
from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.faker import Faker
b = (
Bar()
.add_xaxis(Faker.days_attrs)
.add_yaxis("商家A", Faker.days_values, color='#5cd8d0')
.set_global_opts(
title_opts=opts.TitleOpts(title="数据对比类型"),
datazoom_opts=opts.DataZoomOpts(type_="inside"),
)
#.render("bar_datazoom_inside.html")
)
b.render_notebook()
3、渐变圆柱
from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.commons.utils import JsCode
from pyecharts.faker import Faker
c = (
Bar()
.add_xaxis(Faker.choose())
.add_yaxis("商家A", Faker.values(), category_gap="60%")
.set_series_opts(
itemstyle_opts={
"normal": {
"color": JsCode(
"""new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 244, 255, 1)'
}, {
offset: 1,
color: 'rgba(0, 77, 167, 1)'
}], false)"""
),
"barBorderRadius": [30, 30, 30, 30],
"shadowColor": "rgb(0, 160, 221)",
}
}
)
.set_global_opts(title_opts=opts.TitleOpts(title="渐变圆柱"))
# .render("bar_border_radius.html")
)
c.render_notebook()
4、饼图
from pyecharts import options as opts
from pyecharts.charts import Pie
from pyecharts.faker import Faker
d = (
Pie()
.add(
"",
[list(z) for z in zip(Faker.choose(), Faker.values())],
radius=["40%", "55%"],
label_opts=opts.LabelOpts(
position="outside",
formatter="{a|{a}}{abg|}\n{hr|}\n {b|{b}: }{c} {per|{d}%} ",
background_color="#eee",
border_color="#aaa",
border_width=1,
border_radius=4,
rich={
"a": {"color": "#999", "lineHeight": 22, "align": "center"},
"abg": {
"backgroundColor": "#e3e3e3",
"width": "100%",
"align": "right",
"height": 22,
"borderRadius": [4, 4, 0, 0],
},
"hr": {
"borderColor": "#aaa",
"width": "100%",
"borderWidth": 0.5,
"height": 0,
},
"b": {"fontSize": 16, "lineHeight": 33},
"per": {
"color": "#eee",
"backgroundColor": "#334455",
"padding": [2, 4],
"borderRadius": 2,
},
},
),
)
.set_global_opts(title_opts=opts.TitleOpts(title=""))
# .render("pie_rich_label.html")
)
d.render_notebook()
制作大屏
1、制作一个大屏
这个大屏仅仅显示一个大标题和时间
from pyecharts.charts import Pie
from datetime import datetime
now_time = datetime.now().strftime('%Y-%m-%d') # 获取当前时间
big_title = (
Pie() # 不画图，只显示一个标题，用来构成大屏的标题
.set_global_opts(
title_opts=opts.TitleOpts(title="可视化大屏",
title_textstyle_opts=opts.TextStyleOpts(font_size=40,
# color='#FFFFFF',
),
subtitle = f'截至：{now_time}',
pos_top=10
)
)
)
big_title.render_notebook()执行下面的代码后，在当前文件夹中的IPYNB文件中会生成对应的HTML文件，并将其汇总至该HTML文件内。在生成的HTML文件中对各图形的位置与尺寸进行调节。
from pyecharts.charts import Page
page = Page()
page.add(
big_title,
b,
c,
d,
a
)
# page.render_notebook()
page.render('page.html') # 在html中可以调整各个图形的位置和大小，按“Save Config”键保存配置chart_config.json（有的电脑不成功）。
其中的、big_title、a、b、c、d分别对应的是
big_title 制作的标签大屏
a 面积图
b 数据对比类型
c 渐变圆柱
d 饼图
3、最后通过一下代码来调整显示示例图在大屏中的位置
with open("page.html", "r+", encoding='utf-8') as html:
html_bf = BeautifulSoup(html, 'lxml')
divs = html_bf.select('.chart-container') # 根据css定位标签，选中图像的父节点标签
divs[0]["style"] = "width:50%;height:50%;position:absolute;top:0%;left:45%;border-style:dashed;border-color:#89641;border-width:0px;"
divs[1]["style"] = "width:40%;height:40%;position:absolute;top:10%;left:5%;border-style:solid;border-color:#444444;border-width:2px;"
divs[2]["style"] = "width:40%;height:40%;position:absolute;top:10%;left:55%;border-style:solid;border-color:#444444;border-width:2px;"
divs[3]["style"] = "width:40%;height:40%;position:absolute;top:55%;left:5%;border-style:solid;border-color:#444444;border-width:2px;"
divs[4]["style"] = "width:40%;height:40%;position:absolute;top:55%;left:55%;border-style:solid;border-color:#444444;border-width:2px;"
body = html_bf.find("body") # 根据标签名称定位到body标签
# body["style"] = img.imread('') # 修改背景颜色
body["style"] = "background-color:#ffffff;" # 修改背景颜色
# body["style"] = "background-image:(博客\kj.jpeg);" # 修改背景颜色
html_new = str(html_bf) # 将BeautifulSoup对象转换为字符
html.seek(0, 0) # 光标移动至
html.truncate() # 删除光标后的所有字符内容
html.write(html_new) # 将由BeautifulSoup对象转换得到的字符重新写入html文件
html.close()让我们看看最后的效果吧！
总结
在以上制作的数据可视化界面中仅限于基础版本，在此前提下我们可以考虑更换背景颜色以提升整体美观度同样也可以优化布局设置来调整示例图的比例这些操作都是常规配置选项建议您参考官方文档获取更多高级功能介绍