Echarts 实现自定义图片关系图

最新推荐文章于 2023-05-23 17:10:44 发布

原创

最新推荐文章于 2023-05-23 17:10:44 发布 · 8k 阅读

45 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts #关系图 #带头像关系图

本文介绍如何使用百度ECharts库创建包含图片头像的关系图，通过自定义节点图标为关系图增加个性化元素，展示了从数据准备到图表展示的全过程。

百度echart 实现带图片头像的关系图

<!DOCTYPE html>
<html style="height: 100%">
 
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="utf-8">
    <style type="text/css">
       
    </style>
</head>
 
<body style="height: 100%; margin: 0">
    <div id="container" style="width:600px; height:500px; overflow:hidden;border: 1px solid red;"></div>


    <script type="text/javascript" src="echarts.min.js"></script>
    <script type="text/javascript">
 
        var myChart = echarts.init(document.getElementById("container")); 
        var echartJson ={
            "series":[
                {
                    "edgeLabel":{
                        "normal":{
                            "formatter":"{c}",
                            //"show":true,//是否显示枝干上的关系文字
                        }
                    },
                    //"edgeSymbol":"arrow",//circle,arrow//线两边显示箭头或圆
                    "force":{
                        "repulsion":200,//枝干线的长短 
                        'edgeLength':40
                    },
                    "layout":"force",
                    
                    "roam":true,
                    "itemStyle":{
                        "normal":{
                            "color":"#00ff00"//文字颜色
                        }
                    },
                    "label":{
                        "normal":{
                            //"show":true,//是否显示文字
                        }
                    },
                    "symbol":"circle",
                    "symbolSize":1,
                    "type":"graph",
                    'lineStyle': {//线的样式
                        'normal': {
                            'opacity': 1,
                            // width: 5,
                            curveness: 0,
   &n

最低0.47元/天解锁文章