王明昌博客如果你对该文章中的内容有疑问/不解,可以点击此处链接提问
要注明问题和此文章链接地址 点击此处跳转
使用echarts插件实现关系图,如下图所示
代码如下,自己研究
主要就是用了echarts里面的功能,并进行修改,以头像的形式展示关系图
<!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="/public/static/zfcms/style/echarts.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("container"));
var echartJson ={
"series":[
{
"edgeLabel":{
"normal":{
"formatter":"{c}",
//"show":true,//是否显示枝干上的关系文字
}
},
"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'
}
},
'edgeSymbol': ['circle', 'arrow'],
'edgeSymbolSize': [4, 10],
'dataZoom': [
{
zoomLock: false, //是否锁定选择区域（或叫做数据窗口）的大小。
},
],
'lineStyle': {
'opacity': 0.9,
'width': 2,
'curveness': 0
},
}
],
"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; // 获取被点击节点的身份证号
var name = params.data.name;
// alert(idCard);
alert('你点击了'+name);
} else {
alert('您点击节点信息！');
}
});
// 关系链数据
var links=[
{
"source":"prente1",
"target":"c6"
},
{
"source":"prente1",
"target":"c7"
},
{
"source":"prente1",
"target":"c8"
},
{
"source":"prente1",
"target":"c9"
},
{
"source":"c7",
"target":"c8"
},
{
"source":"c7",
"target":"c9"
}
];
// 博主数据
var map =[
{
"name":"模拟0",
"symbolSize":50,
"symbol":"https://p1-dy.bytecdn.cn/aweme/720x720/1731400038dc6ee6dc1a8.jpeg",
"id":"mn0",
"itemStyle":{
"normal":{
"color":"red"
}
}
},
{
"name":"模拟1",
"symbolSize":50,
"symbol":"https://p1-dy.bytecdn.cn/aweme/720x720/1731400038dc6ee6dc1a8.jpeg",
"id":"mn1",
"itemStyle":{
"normal":{
"color":"red"
}
}
},
{
"name":"模拟2",
"symbolSize":50,
"symbol":"https://p1-dy.bytecdn.cn/aweme/720x720/1731400038dc6ee6dc1a8.jpeg",
"id":"mn2",
"itemStyle":{
"normal":{
"color":"red"
}
}
},
{
"name":"模拟3",
"symbolSize":50,
"symbol":"https://p1-dy.bytecdn.cn/aweme/720x720/1731400038dc6ee6dc1a8.jpeg",
"id":"mn3",
"itemStyle":{
"normal":{
"color":"red"
}
}
},
{
"name":"模拟4",
"symbolSize":50,
"symbol":"https://p1-dy.bytecdn.cn/aweme/720x720/1731400038dc6ee6dc1a8.jpeg",
"id":"mn4",
"itemStyle":{
"normal":{
"color":"red"
}
}
},
{
"name":"模拟5",
"symbolSize":50,
"symbol":"https://p1-dy.bytecdn.cn/aweme/720x720/1731400038dc6ee6dc1a8.jpeg",
"id":"mn5",
"itemStyle":{
"normal":{
"color":"red"
}
}
},
{
"name":"模拟6",
"symbolSize":50,
"symbol":"https://p1-dy.bytecdn.cn/aweme/720x720/1731400038dc6ee6dc1a8.jpeg",
"id":"mn6",
"itemStyle":{
"normal":{
"color":"red"
}
}
},
{
"name":"模拟7",
"symbolSize":50,
"symbol":"https://p1-dy.bytecdn.cn/aweme/720x720/1731400038dc6ee6dc1a8.jpeg",
"id":"mn7",
"itemStyle":{
"normal":{
"color":"red"
}
}
},
{
"name":"模拟8",
"symbolSize":50,
"symbol":"https://p1-dy.bytecdn.cn/aweme/720x720/1731400038dc6ee6dc1a8.jpeg",
"id":"mn8",
"itemStyle":{
"normal":{
"color":"red"
}
}
},
{
"name":"模拟9",
"symbolSize":50,
"symbol":"https://p1-dy.bytecdn.cn/aweme/720x720/1731400038dc6ee6dc1a8.jpeg",
"id":"mn9",
"itemStyle":{
"normal":{
"color":"red"
}
}
},
{
"name":"模拟10",
"symbolSize":50,
"symbol":"https://p1-dy.bytecdn.cn/aweme/720x720/1731400038dc6ee6dc1a8.jpeg",
"id":"mn10",
"itemStyle":{
"normal":{
"color":"red"
}
}
},
{
"name":"模拟11",
"symbolSize":50,
"symbol":"https://p1-dy.bytecdn.cn/aweme/720x720/1731400038dc6ee6dc1a8.jpeg",
"id":"mn11",
"itemStyle":{
"normal":{
"color":"red"
}
}
},
{
"name":"模拟12",
"symbolSize":50,
"symbol":"https://p1-dy.bytecdn.cn/aweme/720x720/1731400038dc6ee6dc1a8.jpeg",
"id":"mn12",
"itemStyle":{
"normal":{
"color":"red"
}
}
},
{
"name":"模拟13",
"symbolSize":50,
"symbol":"https://p1-dy.bytecdn.cn/aweme/720x720/1731400038dc6ee6dc1a8.jpeg",
"id":"mn13",
"itemStyle":{
"normal":{
"color":"red"
}
}
},
{
"name":"模拟14",
"symbolSize":50,
"symbol":"https://p1-dy.bytecdn.cn/aweme/720x720/1731400038dc6ee6dc1a8.jpeg",
"id":"mn14",
"itemStyle":{
"normal":{
"color":"red"
}
}
},
{
"name":"模拟15",
"symbolSize":50,
"symbol":"https://p1-dy.bytecdn.cn/aweme/720x720/1731400038dc6ee6dc1a8.jpeg",
"id":"mn15",
"itemStyle":{
"normal":{
"color":"red"
}
}
},
{
"name":"模拟16",
"symbolSize":50,
"symbol":"https://p1-dy.bytecdn.cn/aweme/720x720/1731400038dc6ee6dc1a8.jpeg",
"id":"mn16",
"itemStyle":{
"normal":{
"color":"red"
}
}
},
{
"name":"模拟17",
"symbolSize":50,
"symbol":"https://p1-dy.bytecdn.cn/aweme/720x720/1731400038dc6ee6dc1a8.jpeg",
"id":"mn17",
"itemStyle":{
"normal":{
"color":"red"
}
}
},
{
"name":"模拟18",
"symbolSize":50,
"symbol":"https://p1-dy.bytecdn.cn/aweme/720x720/1731400038dc6ee6dc1a8.jpeg",
"id":"mn18",
"itemStyle":{
"normal":{
"color":"red"
}
}
},
{
"name":"模拟19",
"symbolSize":50,
"symbol":"https://p1-dy.bytecdn.cn/aweme/720x720/1731400038dc6ee6dc1a8.jpeg",
"id":"mn19",
"itemStyle":{
"normal":{
"color":"red"
}
}
},
{
"name":"张1",
"symbolSize":50,
"symbol":"https://p1-dy.bytecdn.cn/aweme/720x720/1731400038dc6ee6dc1a8.jpeg",
"id":"prente1",
"itemStyle":{
"normal":{
"color":"red"
}
}
},
{
"name":"张6",
"symbol":"https://p9-dy.bytecdn.cn/aweme/720x720/67270022b4d9a3bb5d63.jpeg",
"symbolSize":20,
"id":"c6",
"link":'https://echarts.baidu.com/examples/#chart-type-bar'
},
{
"name":"张7",
"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",
"symbolSize":20,
"symbol":"https://p9-dy.bytecdn.cn/aweme/720x720/1b58b0005be232ddb44cb.jpeg",
"id":"c8",
"link":'https://echarts.baidu.com/examples/#chart-type-bar'
},
{
"name":"张9",
"symbolSize":20,
"symbol":"https://p9-dy.bytecdn.cn/aweme/720x720/1b58b0005be232ddb44cb.jpeg",
"id":"c9",
"link":'https://echarts.baidu.com/examples/#chart-type-bar'
},
{
"name":"张10",
"symbolSize":20,
"symbol":"https://p9-dy.bytecdn.cn/aweme/720x720/1b58b0005be232ddb44cb.jpeg",
"id":"c10",
"link":'https://echarts.baidu.com/examples/#chart-type-bar'
},
{
"name":"张11",
"symbolSize":20,
"symbol":"https://p9-dy.bytecdn.cn/aweme/720x720/1b58b0005be232ddb44cb.jpeg",
"id":"c11",
"link":'https://echarts.baidu.com/examples/#chart-type-bar'
}
];
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>
