Echarts 实现自定义图片关系图

最新推荐文章于 2024-06-04 15:56:49 发布
CPan_
最新推荐文章于 2024-06-04 15:56:49 发布
阅读量7.4k
点赞数 5
分类专栏： echarts 文章标签： Echarts 关系图带头像关系图
本文链接：https://blog.csdn.net/CPan_/article/details/89350786
版权
echarts 专栏收录该内容
3 篇文章 0 订阅
订阅专栏
百度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,
                            'color': '#dcdcdc',
                            'type': 'solid'
                        }
                    },
                }
            ],
            "tooltip":{
                "show":false//鼠标经过提示文字
            }
        };
        loadEcharts(echartJson);
 
        function loadEcharts(echartJson) {
            var option = echartJson;
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        }
        //echarts图表点击跳转
        myChart.on('click', function (params) {
 
            if (params.data.id) {
                var idCard = params.data.link; // 获取被点击节点的身份证号
                alert(idCard);

            } else {
                alert('您点击节点信息！');
            }
        });


         // 关系链数据
         var links=[
                         
                        
                        { 
                            "source":"prente1",
                            "target":"c1"
                        },
                        { 
                            "source":"prente1",
                            "target":"c2"
                        },
                        { 
                            "source":"prente1",
                            "target":"c3"
                        },
                        { 
                            "source":"prente1",
                            "target":"c4"
                        },
                        {
                            "value":"[同户, ]",
                            "source":"prente1",
                            "target":"c7"
                        },
                        { 
                            "source":"c6",
                            "target":"s1"
                        },
                        { 
                            "source":"prente1",
                            "target":"c6"
                        }
                    ];

        // 博主数据
        var map =[
                    {
                        "name":"张1",
                        "symbolSize":50,
                        "symbol":"https://p1-dy.bytecdn.cn/aweme/720x720/1731400038dc6ee6dc1a8.jpeg",
                        "id":"prente1",
                        "itemStyle":{
                            "normal":{
                                "color":"red"
                            }
                        }
                    },  
                    {
                        "name":"张4",
                        "symbol":"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1283473720,778141451&fm=11&gp=0.jpg",
                        "symbolSize":20,
                        "id":"c1",
                        "link":'https://echarts.baidu.com/examples/#chart-type-bar'
                    },
                    {
                        "name":"",
                        "symbol":"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2495925920,1765913267&fm=26&gp=0.jpg",
                        "symbolSize":30,
                        "id":"c2",
                        "link":'https://echarts.baidu.com/examples/#chart-type-bar'
                    },
                    {
                        "name":"",
                        "symbol":"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1358434829,490132153&fm=26&gp=0.jpg",
                        "symbolSize":30,
                        "id":"c3",
                        "link":'https://echarts.baidu.com/examples/#chart-type-bar'
                    },
                    {
                        "name":"张7",
                        "symbol":"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1515174754,211221812&fm=26&gp=0.jpg",
                        "symbolSize":20,
                        "id":"c4",
                        "link":'https://echarts.baidu.com/examples/#chart-type-bar'
                    },
                    {
                        "name":"张3",
                        "symbol":"https://p9-dy.bytecdn.cn/aweme/720x720/67270022b4d9a3bb5d63.jpeg",
                        "symbolSize":20,
                        "id":"c6",
                        "link":'https://echarts.baidu.com/examples/#chart-type-bar'
                    },
                    {
                        "name":"张212",
                        "symbolSize":20,
                        "symbol":"https://p9-dy.bytecdn.cn/aweme/720x720/1b58b0005be232ddb44cb.jpeg",
                        "id":"c7",
                        "link":'https://echarts.baidu.com/examples/#chart-type-bar'
                    },
                    {
                        "name":"张8",
                        "symbol":"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4204462924,532086456&fm=11&gp=0.jpg",
                        "symbolSize":20,
                        "id":"s1"
                    }
                ];
        pubdata(map);
 
        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
                    }]
                })
            })
 
        }
    </script>
</body>
 
</html>
CPan_
关注
5
点赞
踩
43

收藏

觉得还不错? 一键收藏
7
评论
Echarts 实现自定义图片关系图

百度echart实现带图片头像的关系图<!DOCTYPE html><html style="height: 100%"><head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charset="u...
复制链接

扫一扫
专栏目录