var allData = {
dict: {
'0': '云盘',
'1': '文件B',
'2': '文件C',
'3': '文件A'
},
nodes: [{
id: '0',
name: '云盘',
category: 0,
//fixed:true,
//x:300,
//y:400
}, {
id: '1',
name: '文件B',
category: 1
}, {
id: '2',
name: '文件C',
category: 2
}, {
id: '3',
name: '2011-11-15 星期二[北京新闻 北京新闻第一版]',
category: 2
}],
links: [{
source: '0',
target: '1',
value: '引用'
}, {
source: '0',
target: '2',
value: '分享'
}, {
source: '0',
target: '3',
value: '200'
}],
linkDict: {}
};
var rocket = 'path://M-244.396,44.399c0,0,0.47-2.931-2.427-6.512c2.819-8.221,3.21-15.709,3.21-15.709s5.795,1.383,5.795,7.325C-237.818,39.679-244.396,44.399-244.396,44.399z M-260.371,40.827c0,0-3.881-12.946-3.881-18.319c0-2.416,0.262-4.566,0.669-6.517h17.684c0.411,1.952,0.675,4.104,0.675,6.519c0,5.291-3.87,18.317-3.87,18.317H-260.371z M-254.745,18.951c-1.99,0-3.603,1.676-3.603,3.744c0,2.068,1.612,3.744,3.603,3.744c1.988,0,3.602-1.676,3.602-3.744S-252.757,18.951-254.745,18.951z M-255.521,2.228v-5.098h1.402v4.969c1.603,1.213,5.941,5.069,7.901,12.5h-17.05C-261.373,7.373-257.245,3.558-255.521,2.228zM-265.07,44.399c0,0-6.577-4.721-6.577-14.896c0-5.942,5.794-7.325,5.794-7.325s0.393,7.488,3.211,15.708C-265.539,41.469-265.07,44.399-265.07,44.399z M-252.36,45.15l-1.176-1.22L-254.789,48l-1.487-4.069l-1.019,2.116l-1.488-3.826h8.067L-252.36,45.15z';
var categories = [{
name: '视频'
}, {
name: '音频'
}, {
name: '图片'
}, {
name: '其他'
}];
option = {
title: {
text: '文件关系',
top: 'bottom',
left: 'right'
},
tooltip: {
enterable: true,
triggerOn: 'click'},
//动画
//animationDurationUpdate: 20000,
//animationEasingUpdate: 'cubicInOut',
//animationDurationUpdate: function (idx) {
// 越往后的数据延迟越大
//return idx * 1;
//},
legend: {
x: "center",
//show: false,
data: categories.map(s => {
return s.name;
})
},
series: [{
type: 'graph',
layout: 'force',
symbolSize: 45,
focusNodeAdjacency: true,
roam: true,
draggable: false,
categories: categories,
dataZoom: [{
id: 'dataZoomX',
show: true, //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
backgroundColor: "rgba(47,69,84,0)", //组件的背景颜色
type: 'slider', //slider表示有滑动块的，inside表示内置的
dataBackground: { //数据阴影的样式。
//lineStyle: mylineStyle, //阴影的线条样式
//areaStyle: myareaStyle, //阴影的填充样式
},
fillerColor: "rgba(167,183,204,0.4)", //选中范围的填充颜色。
borderColor: "#ddd", //边框颜色。
filterMode: 'filter', //'filter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。
//'weakFilter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只有当全部维度都在数据窗口同侧外部，整个数据项才会被过滤掉。
//'empty'：当前数据窗口外的数据，被 设置为空。即 不会 影响其他轴的数据范围。
//'none': 不过滤数据，只改变数轴范围。
xAxisIndex: 100, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
yAxisIndex: [0, 2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
radiusAxisIndex: 3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
angleAxisIndex: [0, 2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
start: 30, //数据窗口范围的起始百分比,表示30%
end: 70, //数据窗口范围的结束百分比,表示70%
startValue: 10, //数据窗口范围的起始数值
endValue: 100, //数据窗口范围的结束数值。
orient: "horizontal", //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。
zoomLock: false, //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
throttle: 100, //设置触发视图刷新的频率。单位为毫秒（ms）。
zoomOnMouseWheel: true, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
moveOnMouseMove: true, //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
top: "top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right: "auto", //组件离容器右侧的距离,'20%'
bottom: "auto", //组件离容器下侧的距离,'20%'
}],
label: {
normal: {
show: true,
textStyle: {
fontSize: 12
},
position: 'top'
}
},
tooltip: {
formatter: params => {
// console.log(params);
var tip = `<span style="color:red;">${params.name}</span><br/>${params.data.contentId}`;
return tip;
},
padding: 5
},
force: {
repulsion: 1000,
//edgeLength: [1, 200],
//layoutAnimation :false
},
edgeSymbol: 'arrow',
edgeSymbolSize: [0, 10],
edgeLabel: {
normal: {
show: true,
textStyle: {
fontSize: 10
},
formatter: "{c}"
}
},
data: allData.nodes,
links: allData.links,
markPoint: {
symbol: rocket,
symbolSize: 50,
data: [{
name: '某个屏幕坐标',
x: 100,
y: 100
}]
},
itemStyle: {
borderColor: 'source',
borderWidth: 1
},
lineStyle: {
normal: {
opacity: 0.9,
width: 1,
curveness: 0,
color: 'source'
}
},
emphasis: {
lineStyle: {
width: 5
}
}
}],
animationDelayUpdate: function(idx) {
console.log(idx);
}
};
myChart.on('click', function(params) {
if (params.dataType == 'node') { //节点
//console.log(params);
//console.log(myChart.appendData);
//myChart.resize();
nodeOnClick(params);
}
});
function nodeOnClick(params) {
var data = params.data;
var num = Math.floor(Math.random() * 5 + 1);
for (let i = 1; i <= num; i++) {
var newNode = {
id: data.id + i,
name: i,
category: Math.floor(Math.random() * 4),
draggable: true
};
if (!allData.dict[newNode.id]) {
allData.nodes.push(newNode);
allData.dict[newNode.id] = true;
}
if (!allData.linkDict[data.id + '->' + newNode.id]) {
allData.links.push({
source: data.id,
target: newNode.id,
value: '->' + i
});
allData.linkDict[data.id + '->' + newNode.id] = true;
}
}
var node = allData.nodes.find(s => {
return s.id == data.id;
});
node.fixed = true;
node.x = 10; //params.event.offsetX;
node.y = 10; //params.event.offsetY;
myChart.setOption({
series: [{
data: allData.nodes,
links: allData.links
}]
});
}
myChart.dispatchAction({
type: 'dataZoom',
batch: [{ // 第一个 dataZoom 组件
start: 100,
end: 100
}]
});
// 定义抠图方法
function getImgData(imgSrc, radius, center = {
x: 0,
y: 0
}) {
return new Promise((resolve) => {
const canvas = document.createElement('canvas');
const contex = canvas.getContext('2d');
const img = new Image();
img.crossOrigin = '';
const diameter = 2 * radius;
img.onload = function() {
canvas.width = diameter;
canvas.height = diameter;
contex.clearRect(0, 0, diameter, diameter);
contex.save();
contex.beginPath();
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;
});
}