就是做這種的功能,箭頭原本是可以動態重複移動的,但不知道哪裏問題導致沒箭頭了,然後補了個edgeSymbol: ['','arrow'],
字段,才增加了箭頭。
拖拽某個節點,只有關聯到的線條會跟着變動其他的節點位置不變。
參考
https://gallery.echartsjs.com/editor.html?c=x8Fgri22P9
https://echarts.baidu.com/examples/editor.html?c=line-draggable&qq-pf-to=pcqq.group
這兩篇文章結合,然後再自己調試出來的。
如果需要在畫布上畫區域的話,建議用markArea不要用markline。這樣一個域可以省兩個座標點繪製,而且域也不會像markline那樣因爲座標超出畫布就不顯示連接的線了。
我這是在用vue項目調試的,所以demo是一個vue文件,echat版本應該是4.2的,不過只要版本不是太低應該都沒啥問題
貼下主要的代碼:
var option = {
title: {
text: '網絡拓撲圖'
},
backgroundColor: "#F5F5F5",
xAxis: {
min: 0,
max: 12,
show: false,
type: 'value'
},
yAxis: {
min: 0,
max: 12,
show: false,
type: 'value'
},
series: [{
type: 'graph',
layout: 'none',
id:'a',
// coordinateSystem: 'cartesian2d',
coordinateSystem: 'cartesian2d',
edgeSymbol: ['','arrow'],
// symbolSize: 20,
// force: {
// repulsion: 1000,
// edgeLength: [150, 200],
// layoutAnimation: false
// },
label: {
normal: {
show: true,
position: 'bottom',
color: '#12b5d0'
}
},
lineStyle: {
normal: {
width: 2,
shadowColor: 'none'
}
},
xAxis: {
min: 0,
max: 12,
show: false,
type: 'value'
},
yAxis: {
min: 0,
max: 12,
show: false,
type: 'value'
},
// edgeSymbolSize: 8,
draggable:true,
data: charts.nodes,
links: charts.links,
itemStyle: {
normal: {
label: {
show: true,
formatter: function(item) {
return item.data.name
}
}
}
}
}, {
name: 'A',
type: 'lines',
coordinateSystem: 'cartesian2d',
edgeSymbol: ['circle', 'arrow'],
effect: {
show: true,
trailLength: 0,
// constantSpeed: 30,
symbol: 'arrow',
// color: '#12b5d0',
color:'#FF0000',
symbolSize: 22
},
data: charts.linesData
}]
};
myChart.setOption(option);
// setTimeout(function () {
// Add shadow circles (which is not visible) to enable drag.
myChart.setOption({
graphic: echarts.util.map(charts.nodes, function (item, dataIndex) {
return {
type: 'circle',
position: myChart.convertToPixel('grid', item.value),
shape: {
cx: 5,
cy: 5,
r: 20
},
invisible: true,
draggable: true,
ondrag: echarts.util.curry(onPointDragging, dataIndex),
onmousemove: echarts.util.curry(showTooltip, dataIndex),
onmouseout: echarts.util.curry(hideTooltip, dataIndex),
z: 100
};
})
});
function onPointDragging(dataIndex, dx, dy) {
var tempV = myChart.convertFromPixel('grid', this.position);
charts.nodes[dataIndex].value = [tempV[0],tempV[1]];
// Update data
myChart.setOption({
series: [{
id: 'a',
data: charts.nodes
}]
});
}
function showTooltip(dataIndex) {
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: dataIndex
});
}
function hideTooltip(dataIndex) {
myChart.dispatchAction({
type: 'hideTip'
});
}
// }, 50);
window.addEventListener('resize',function(){
myChart.resize();
myChart.setOption({
series: [{
id: 'a',
data: charts.nodes
}]
});
});
還有的節點以及連線的代碼參考第一篇文章,我這邊的節點圖片需要更換下自己項目中對應的圖片地址,最好是在src外面層的其他目錄下,比如外建一個static目錄存放圖片
最後附上demo文件下載地址:(原本是想把下載積分改爲1最低的,但是現在上傳資源時沒得設置了,默認爲5積分)
https://download.csdn.net/download/u012138137/11136186
這個是後續做了點優化卡頓的問題,增加異常設備閃動的效果(demo中的圖片路徑需要自己更換成本地的圖標)。
https://download.csdn.net/download/u012138137/11191900