echarts关系图节点设置头像，并使头像以圆形来显示！

最新推荐文章于 2024-05-28 15:45:01 发布

置顶杨帆起航_200

最新推荐文章于 2024-05-28 15:45:01 发布

阅读量9.3k

点赞数 5

分类专栏： echarts 文章标签： echarts javascript

本文链接：https://blog.csdn.net/qq_36072384/article/details/85319126

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

核心代码出处见：https://gallery.echartsjs.com/editor.html?c=x7rk_-y1Yd

直接贴出全部代码：

<!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">
        body {

            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
    </style>
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%" style="width:100px; height:100px; border-radius:50%; overflow:hidden;"></div>
    <script type="text/javascript" src="echarts.min.js"></script> //根据自己echarts包来引入
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        var echartJson =
            '{"series": [{"edgeLabel": {"normal": {"formatter": "{c}","show": true}},"edgeSymbol": "circle","force": {"repulsion": 2000},"layout": "force","links": [{"value": "[同户, 同航班3次]","source": "650103198702015111","target": "857665096475783504"},{"value": "[同户]","source": "650103198702015111","target": "350555099779584311"},{"value": "[同航班1次]","source": "650103198702015111","target": "342870099576708940"},{"value": "[同航班1次]","source": "650103198702015111","target": "348050094172047786"},{"value": "[同航班1次]","source": "650103198702015111","target": "827850577979002868"},{"value": "[同航班1次]","source": "650103198702015111","target": "287550091205791400"},{"value": "[同航班1次]","source": "650103198702015111","target": "28745409957000301X"},{"value": "[同航班1次]","source": "650103198702015111","target": "347075096771048454"},{"value": "[同航班1次]","source": "650103198702015111","target": "345970096305783559"}],"roam": true,"itemStyle": {"normal": {"color": "#6495ED"}},"label": {"normal": {"show": true}},"symbol": "circle","symbolSize": 50,"type": "graph"}],"tooltip": {"show": false}}';
        loadEcharts(echartJson);

        function loadEcharts(echartJson) {
            var option = JSON.parse(echartJson);
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        }
        //echarts图表点击跳转
        myChart.on('click', function (params) {

            if (params.data.id) {
                var idCard = params.data.id; // 获取被点击节点的身份证号
                alert(idCard);
            } else {
                alert('您点击节点信息！');
            }
        });


        var map =
            "[{\"name\":\"张1\",\"symbolSize\":80,\"symbol\":\"http://g.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=c94fde2ed300baa1ba794fbf72209524/00e93901213fb80e2d9e721534d12f2eb83894a0.jpg\",\"id\":\"650103198702015111\",\"itemStyle\":{\"normal\":{\"color\":\"red\"}}},{\"name\":\"张2\",\"symbolSize\":60,\"symbol\":\"http://g.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=c94fde2ed300baa1ba794fbf72209524/00e93901213fb80e2d9e721534d12f2eb83894a0.jpg\",\"id\":\"857665096475783504\"},{\"name\":\"张3\",\"symbol\":\"http://e.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=201992e9e5cd7b89e93932873a146e91/5d6034a85edf8db13f0dee470a23dd54564e74f6.jpg\",\"symbolSize\":60,\"id\":\"350555099779584311\"},{\"name\":\"张4\",\"symbol\":\"http://bpic.588ku.com/element_origin_min_pic/16/07/08/13577f397bbc3be.jpg\",\"symbolSize\":60,\"id\":\"342870099576708940\"},{\"name\":\"张5\",\"symbol\":\"http://bpic.588ku.com/element_origin_min_pic/01/41/46/53573d40592752b.jpg\",\"symbolSize\":60,\"id\":\"348050094172047786\"},{\"name\":\"张6\",\"symbol\":\"http://bpic.588ku.com/element_origin_min_pic/01/41/46/53573d40592752b.jpg\",\"symbolSize\":60,\"id\":\"827850577979002868\"},{\"name\":\"张7\",\"symbol\":\"http://pic.90sjimg.com/design/01/13/48/71/58ef88cd8430d.png\",\"symbolSize\":60,\"id\":\"287550091205791400\"},{\"name\":\"张8\",\"symbol\":\"http://pic.90sjimg.com/design/01/13/48/71/58ef98c404df8.png\",\"symbolSize\":60,\"id\":\"28745409957000301X\"}]";
        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.5
                    }
                    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 arr_temp = JSON.parse(json);
            var picList = [];
            for (var i = 0; i < arr_temp.length; i++) {
                var object = arr_temp[i];
                var p = getImgData(object.symbol);
                picList.push(p);

            }
            Promise.all(picList).then(function (images) {
                for (var i = 0; i < images.length; i++) {
                    var img = "image://" + images[i];
                    arr_temp[i].symbol = img;
                }
                myChart.setOption({
                    series: [{
                        data: arr_temp
                    }]
                })
            })

        }
    </script>
</body>

</html>

效果图如下：

注意：本人在做的时候，由于echarts包引入的版本不对而浪费了一些时间，这个代码是可以跑通的，如果图没有显示出来，那就说明echarts包引入的版本不对！！！！小生不才，有不对的地方望大家指正，谢谢！！

杨帆起航_200

关注

5
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
6
评论
echarts关系图节点设置头像，并使头像以圆形来显示！

核心代码出处见：https://gallery.echartsjs.com/editor.html?c=x7rk_-y1Yd直接贴出全部代码：<!DOCTYPE html><html style="height: 100%"><head> <meta name="viewport" content="width=device-wid...
复制链接

扫一扫