使用pyecharts生成graph关系图的问题解决的心得

最新推荐文章于 2024-02-21 14:19:44 发布

德里克-罗斯

最新推荐文章于 2024-02-21 14:19:44 发布

阅读量604

点赞数 11

文章标签： python echarts pycharm

本文链接：https://blog.csdn.net/lulasdjkhalkjd/article/details/135158952

版权

首先展示代码
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文件，类似于：