echart 關係圖 ---- 配置 可自定義圖片

代碼如下：

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
            }]
        })
    })
}

效果圖：