首先展示代码
from pyecharts.charts import Graph
from pyecharts import options as opts
from pyecharts.globals import CurrentConfig, NotebookType, OnlineHostType
CurrentConfig.NOTEBOOK_TYPE = NotebookType.ZEPPELIN
CurrentConfig.ONLINE_HOST = OnlineHostType.NOTEBOOK_HOST
from pyecharts.render import make_snapshot # 导入输出图片工具
from snapshot_selenium import snapshot # 渲染图片
def graph_base(nodes, links):
init_opts = opts.InitOpts(
width="100%", # 图宽
height="100vh", # 图高
renderer="canvas", # 渲染模式 svg 或 canvas,即 RenderType.CANVAS 或 RenderType.SVG
js_host="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/", # js主服务位置 留空则默认官方远程主服务
bg_color="white" # 图的背景颜色
)
graph = (
Graph(init_opts)
.add("", # 表示系列名称,用于tooltip的显示
nodes, # 表示节点的数据集,存储节点的名称
links, # 表示连接数据集,存储节点之间的连接信息
repulsion=3000, # 表示节点的斥力因子
is_draggable=True, # 表示节点是否可拖拽
symbol_size=20, # 表示关系图节点的大小
is_layout_animation=True, # 在浏览器端节点数据较多(>100)的时候不建议关闭,布局过程会造成浏览器假死
linestyle_opts=opts.LineStyleOpts(curve=0.2), # 表示关系边的线条样式
edge_symbol=['circle', 'arrow'], # 设置标记为箭头
edge_symbol_size=7, # 设置标记的大小
label_opts=opts.LabelOpts(is_show=True), # 表示是否显示图例
)
# 全局配置。
.set_global_opts(
# 修改标题项
title_opts=opts.TitleOpts(title="Graph-模型库数据效果图",
title_textstyle_opts=opts.TextStyleOpts(
font_size=20, # 设置标题字体的大小
font_weight="bold" # 文字字体的粗细,可选:'normal','bold','bolder','lighter'
)
)
)
# 系列配置
.set_series_opts(
# 标签配置项
label_opts=opts.LabelOpts(
is_show=True, # 是否显示标签
position="top", # 标签的位置。可选
color='black', # 文字的颜色。如果设置为 'auto',则为视觉映射得到的颜色,如系列色。
font_size=15, # 文字的字体大小
font_style='normal', # 文字字体的风格,可选:'normal','italic','oblique'
font_weight='bold' # 文字字体的粗细,可选:'normal','bold','bolder','lighter'
),
# 提示框配置项
tooltip_opts=opts.TooltipOpts(
is_show=True, # 是否显示提示框组件,包括提示框浮层和 axisPointer。
# 指示器类型。可选
# 'line':直线指示器
# 'shadow':阴影指示器
# 'none':无指示器
# 'cross':十字准星指示器。其实是种简写,表示启用两个正交的轴的 axisPointer。
axis_pointer_type="line",
border_width=2, # 设置边框宽度
# formatter="{a}<br/>{b}<br/>{c}", # 设置提示框内数据展示的格式
textstyle_opts=opts.TextStyleOpts(font_size=10) # 设置提示框内字体的大小
),
# 算法配置项(可以设置整体的节点权重和边的权重分布)
force_atlas2_opts=opts.GraphGLForceAtlas2Opts(
is_gpu=True, # 是否启用 GPU 布局
# 一次更新的迭代次数。因为力引导算法通常会把每次迭代的结果都绘制出来,
# 但是因为绘制时间往往会大于布局的时间,会导致布局的效率降低,
# 这时候我们可以设置更大的steps参数,保证布局和绘制的时间均衡,加快布局的速度。
steps=50,
is_repulsion_by_degree=True, # 是否根据节点边的数量来计算节点的斥力因子,建议开启
is_prevent_overlap=True # 是否开启防止节点重叠
)
)
# 生成HTML文件,保存在本地
# .render("graph.html")
)
# 生成图片格式,并保存在本地
# make_snapshot(engine=snapshot, # engine: 渲染引擎(selenium或phantomjs)
# file_name="graph.html", # file_name:传入HTML文件路径
# output_name='保存图片.png', # output_name:输出图片路径
# delay=2, # delay:延迟时间,避免图还没渲染完成就生成图片,造成图片不完整
# pixel_ratio=5, # pixel_ratio:像素比例,用于调节图片质量
# is_remove_html=False # is_remove_html:渲染完图片是否删除原HTML文件
# )
# 将关系图配置转换为JSON格式
graph_data = graph.dump_options_with_quotes()
return graph_data
参数参考:
nodes = [{‘id’: ‘52847f7526d94487b2a929916ab9a8ec’, ‘name’: ‘6.审理不合格品’, “itemStyle”: {“normal”: {“color”: “#FFB6C1”}}},
{‘id’: ‘3a5bdd09191e407793b0db1c45d31b41’, ‘name’: ‘审理不合格品’, “itemStyle”: {“normal”: {“color”: “#FFC0CB”}}},]
links = [{‘source’: ‘52847f7526d94487b2a929916ab9a8ec’, ‘target’: ‘3a5bdd09191e407793b0db1c45d31b41’}]
技术要点:
1、opts.InitOpts为整个布局配置,其中的width和height为图形生成在页面上的占比,js_host为生成的echarts图中需要的主服务位置。
2、set_global_opts为整个布局的全局设置,具体参考代码的注释,自行理解。
3、set_series_opts为整个布局的系列配置,具体参考代码中的注释,自行理解。
4、设置repulsion=3000和is_repulsion_by_degree表示计算节点之间的斥力因子,为了防止节点之间重合。
5、如果想要生成html文件持久化在本地,可以使用.render(“graph.html”)方法在本地生成。其中的html名称根据情况更改。
6、如果要生成png图片格式保存,则使用make_snapshot方法,具体操作参考上述代码。
如果想要生成json数据传递给前端页面,在生成图形的话,需要使用graph_data方法,代码在上方查找。传递给前端后,前端JS代码为:
success: function (result) {
$.messager.progress(‘close’)
console.log(“pyechart返回的数据:”, result)
var myChart = echarts.init(document.getElementById(‘graph’))
myChart.resize()
myChart.setOption(JSON.parse(result))
},
error: function () {
$.messager.progress(‘close’)
console.log(“pyechart返回数据失败”)
}
记得在前端引入echarts.min.js文件,类似于:
本次为传入数据生成echarts图形的一个功能函数,其中只是一个生成graph关系图的代码展示,如果需要生成其他图形,可参考网址:https://gallery.pyecharts.org/#/Graph/npm_dependencies
有任何问题都可以留言讨论,谢谢。