这个关系图实现了拖拽但是怎么给每个节点添加对应的图标和名字
配置项如下
//本身关系图不能进行拖拽(设其自带原点为A),我们设置与图中data相同的点(点B), A点不动
//B点动,B点变化后改变data、的值,从而逼迫A点从新画图,下图是B点没隐藏这样方便我们看。
//设置点的大小
var symbolSize = 20;
option = null;
//设置个个点坐标
var data = [[520,400], [800,400],
[670,250],
[70,50], [140,50], [210,50],
[280,50], [350,50], [420,50],
[490,50], [560,50], [630,50],
[700,50], [770,50], [840,50],
[910,50], [980,50], [1050,50],
[1120,50], [1190,50], [1260,50]
];
//设置连接线终点以及起点的位置(排序数值是坐标点在data里的序号)
var xydata =[[0,2],[1,2],
[2,3],
[2,4],[2,5],[2,6],
[2,7],[2,8],[2,9],
[2,10],[2,11],[2,12],
[2,13],[2,14],[2,15],
[2,16],[2,17],[2,18],
[2,19],[2,20]]
//当0时候表示输入起点坐标,其他值输入终点坐标
var position = 0;
//起点
var positionSource;
//钟点
var positionTarget;
//设置判断点击线还是点击点
var ok = 1;
//删除数组的索引位置
var del;
var linkss = xydata.map(function (item, i) {
return {
source: xydata[i][0],
target: xydata[i][1]
};
});
myChart.setOption({
//定义将坐标系转化为像素
tooltip: {
triggerOn: 'none',
formatter: function (params) {
return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
}
},
//定义X轴 最大刻度最小刻度是否从零开始
xAxis: {
show:false,
min: 0,
max: 1330,
type: 'value',
axisLine: {onZero: false}
},
//同上
yAxis: {
show:false,
min: 0,
max: 450,
type: 'value',
axisLine: {onZero: false}
},
series: [
{
id: 'a',
type: 'graph',
layout: 'none',
coordinateSystem: 'cartesian2d',
//设置球的大小
symbolSize: symbolSize,
label: {
normal: {
show: true
}
},
//指定数据数组
data: data,
//指定连线方式
edges: linkss,
//指定连线颜色
lineStyle: {
normal: {
color: '#2f4554'
}
}
}
]
});
myChart.setOption({
graphic: echarts.util.map(data, function (item, dataIndex) {
return {
type: 'circle',
edgeSymbol:'image://mcu.png',
//将坐标转化为像素
position: myChart.convertToPixel('grid', item),
shape: {
r: symbolSize
// 拖动点的大小
},
//指定虚拟圈是否可见
invisible: false,
//指定圈被拖拽
draggable: true,
//指定拖拽的反应
ondrag: echarts.util.curry(onPointDragging, dataIndex),
//指定鼠标移入移出的反应
onmousemove: echarts.util.curry(showTooltip, dataIndex),
onmouseout: echarts.util.curry(hideTooltip, dataIndex),
//Z值 及坐标z
z: 2 ,
};
})
});
//将像素转化为坐标 如果删除 后台会打印 像素
window.addEventListener('resize', function () {
myChart.setOption({
graphic: echarts.util.map(data, function (item, dataIndex) {
return {
position: myChart.convertToPixel('grid', item)
};
})
});
});
function showTooltip(dataIndex) {
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: dataIndex
});
}
function hideTooltip(dataIndex) {
myChart.dispatchAction({
type: 'hideTip'
});
}
function onPointDragging(dataIndex, dx, dy) {
data[dataIndex] = myChart.convertFromPixel('grid', this.position);
myChart.setOption({
series: [{
id: 'a',
data: data,
}]
});
console.log('array', data);
}
//点击事件
console.log('xydata', xydata);
if (option && typeof option === "object") {
myChart.setOption(option, true);
}