echart 关系图 ---- 配置可自定义图片

缺乏、安全感 2023-06-07 03:20 35阅读 0赞

**代码如下：**

var myChart = echarts.init(document.getElementById("relation-chart"));
    var echartJson ={ 
        "series":[
            { 
                "edgeLabel":{ 
                    "normal":{ 
                        "formatter":"{c}",
                    }
                },
                "force":{ 
                    "repulsion":200,//枝干线的长短 
                    'edgeLength':[80,130]
                },
                "layout":"force",
                "roam":true,
                "itemStyle":{ 
                    "normal":{ 
                        "color":"#f1f9f7"//文字颜色
                    }
                },
                "label":{ 
                    "normal":{ 
                        "show":true,//是否显示文字
                        "position": "bottom",
                    }
                },
                "symbol":"circle",
                "symbolSize":1,
                "type":"graph",
                'lineStyle': { //线的样式
                    'normal': { 
                        opacity: .6,
                        curveness: 0,
                        color: '#4fffd4',
                        type: 'solid'
                    }
                },
            }
        ],
        "tooltip":{ 
            "show":false//鼠标经过提示文字
        }
    };
    loadEcharts(echartJson);
    
    // 关系链数据
    var links=[
        { 
            "source":"prente1",
            "target":"c1"
        },
        { 
            "source":"prente1",
            "target":"c2"
        },
        { 
            "source":"prente1",
            "target":"c3"
        },
        { 
            "source":"prente1",
            "target":"c4"
        },
        { 
            "source":"prente1",
            "target":"c7"
        },
        { 
            "source":"c6",
            "target":"s1"
        },
        { 
            "source":"prente1",
            "target":"c6"
        }
    ];
    
    // 数据
    var map =[
        { 
            "name":"",
            "symbolSize":100,
            "symbol":"../assets/img/relation_self.png",
            "id":"prente1",
            "itemStyle":{ 
                "normal":{ 
                    "color":"red"
                }
            }
        },
        { 
            "name":"母亲:夏雪",
            "symbol":"../assets/img/relation_mom.png",
            "symbolSize":50,
            "id":"c1",
        },
        { 
            "name":"父亲:梅长苏",
            "symbol":"../assets/img/relation_father.png",
            "symbolSize":50,
            "id":"c2",
        },
        { 
            "name":"女儿:梅芳芳",
            "symbol":"../assets/img/relation_child.png",
            "symbolSize":40,
            "id":"c3",
        },
        { 
            "name":"妻子:游泳",
            "symbol":"../assets/img/relation_love.png",
            "symbolSize":50,
            "id":"c4",
        },
        { 
            "name":"朋友:姜文",
            "symbol":"../assets/img/relation_friend.png",
            "symbolSize":50,
            "id":"c6",
        },
        { 
            "name":"朋友:唐宛如",
            "symbolSize":50,
            "symbol":"../assets/img/relation_friend.png",
            "id":"c7",
        }
    ];
    pubdata(map);
    
    function loadEcharts(echartJson) { 
        var option = echartJson;
        if (option && typeof option === "object") { 
            myChart.setOption(option, true);
        }
    }
    
    function getImgData(imgSrc) { 
        var fun = function (resolve) { 
            const canvas = document.createElement('canvas');
            const contex = canvas.getContext('2d');
            const img = new Image();
            img.crossOrigin = '';
            img.onload = function () { 
                //设置图形宽高比例
                center = { 
                    x: img.width / 2,
                    y: img.height / 2
                };
                var diameter = img.width;//半径
                canvas.width = diameter;
                canvas.height = diameter;
                contex.clearRect(0, 0, diameter, diameter);
                contex.save();
                contex.beginPath();
                radius = img.width / 2;
                contex.arc(radius, radius, radius, 0, 2 * Math.PI); //画出圆
                contex.clip(); //裁剪上面的圆形
                contex.drawImage(img, center.x - radius, center.y - radius, diameter, diameter, 0, 0,
                    diameter, diameter); // 在刚刚裁剪的园上画图
                contex.restore(); // 还原状态
                resolve(canvas.toDataURL('image/png', 1))
            };
            img.src = imgSrc;
        };
        var promise = new Promise(fun);
        return promise
    }
    
    function pubdata(json) { 
        var androidMap = json;
        var picList = [];//获取出全部图片
        for (var i = 0; i < androidMap.length; i++) { 
            //把图片路径转成canvas 
            let p = getImgData(androidMap[i].symbol);
            console.log(p)
            picList.push(p);
        }
        Promise.all(picList).then(function (images) { 
            //取出base64 图片 然后赋值到jsondata中
            for (var i = 0; i < images.length; i++) { 
                var img = "image://" + images[i];
                console.log(img);
                androidMap[i].symbol = img;
            }
            // 把数据设置到Echart中data
            myChart.setOption({ 
                series: [{ 
                    data: androidMap,
                    links:links
                }]
            })
        })
    }

**效果图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70]: /images/20230601/a74fab2b69174fc681d680ff49e8c728.png

发表评论取消回复

表情：

评论列表（有 0 条评论，35人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts数据可视化第4章 Echarts可视化图 4.16 关系图

Echarts数据可视化文章目录 Echarts数据可视化第4章 Echarts可视化图 4

以你之姓@/ 2024年03月25日 20:18/ 0 赞/ 238 阅读

相关 ECharts 自定义图表导出图片

1 前言在项目过程中，碰到一个这样的需求，页面显示时如下图所示ECharts图表背景是深色，文字是白色的。 ![watermark_type_ZmFuZ3poZW5n

妖狐艹你老母/ 2023年10月05日 11:41/ 0 赞/ 160 阅读

相关 echart的symbol自定义图片问题

工具网址图片转成dataURL的工具可以在线搜索，这里提供 http://tu.chacuo.net/imagetodataurl svg -> svg p

深碍√TFBOYSˉ_/ 2023年07月10日 14:16/ 0 赞/ 48 阅读

相关使用echarts做关系图

先看效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

待我称王封你为后i/ 2023年06月13日 09:38/ 0 赞/ 80 阅读

相关 echart 关系图 ---- 配置可自定义图片

代码如下： var myChart = echarts.init(document.getElementById("relation-chart")); va

缺乏、安全感/ 2023年06月07日 03:20/ 0 赞/ 36 阅读

相关 echarts 关系图自定义节点 symbol如何设置显示本地图片

官网使用教程： [https://echarts.apache.org/zh/option.html\series-graph.data.symbol][https_ec

左手的ㄟ右手/ 2022年08月30日 11:52/ 0 赞/ 919 阅读

相关 echarts（一）自定义配置

1、图片自适应重绘 window.onresize = function () { myChart.resize(); //使第一个图表适应

青旅半醒/ 2022年06月10日 03:55/ 0 赞/ 410 阅读

相关 JS（十五）自定义方式导出echarts图片

用法： 1、echartsContainer对应到echarts的容器id； 2、exportOut()绑定导出按钮即可。 \--------------------

淡淡的烟草味﹌/ 2022年06月10日 03:40/ 0 赞/ 475 阅读

相关如何自定义echarts 线性图的选择事件

最近在做公司的数据大盘，要用到图表显示，echarts研二的时候有用过，我就决定用它了。这里用到一个可以同时显示多条曲线的line-charts，基本样子如下： ![82

「爱情、让人受尽委屈。」/ 2022年01月10日 00:47/ 0 赞/ 395 阅读

相关 echarts 关系图graph

1、配置数据类型 data:[ { name:'节点名称', value:'节点值' x:节点坐标, 在

朴灿烈づ我的快乐病毒、/ 2021年07月25日 01:49/ 1 赞/ 1680 阅读