У меня проблема с изменением направления метки ребра на графике Echarts. Я хочу, чтобы все метки по краям были горизонтальными. Но с этого момента направление метки автоматически выравнивается относительно самого ребра.
Причина, по которой я хочу сохранить все метки ребер в горизонтальном положении, заключается в том, что когда-нибудь автоматическое направление будет испорчено, если некоторые ребра пересекаются друг с другом.
Проблема, как показано ниже: Пример беспорядка меток ребер
Я пытался добавить rotate:90
в graphdata.edges label
код, но это не имеет никакого эффекта.
this.options = {
animationDurationUpdate: 150,
animationEasingUpdate: 'quinticInOut',
series: [{
type: 'graph',
layout: 'none',
data: graphdata.nodes.map(function(node) {
return {
x: node['x'],
y: node['y'],
id: node['id'],
name: node['label'],
symbolSize: [70, 40],
itemStyle: {
normal: {
borderColor: 'steelblue',
borderWidth: 1.5,
color: node['color']
}
},
label: {
textStyle: {
fontSize: 10,
color: 'black'
},
rotate:90,
show: true
}
};
}),
edgeSymbol: ['none', 'arrow'],
edges: graphdata.edges.map(function(edge) {
return {
source: edge['start_node_id'],
target: edge['end_node_id'],
name: edge['label'],
lineStyle: {
normal: {
width: edge['width']
}
},
label: {
rotate:90,
show: true,
formatter: function(params) {
if (params.dataType === 'edge') {
return params.data.name;
}
}
}
};
}),
label: {
emphasis: {
position: 'top',
show: true,
textStyle: {
fontSize: 15,
color: 'black'
}
}
},
roam: true,
focusNodeAdjacency: true,
lineStyle: {
normal: {
color: '#828282',
curveness: 0.1,
opacity: 0.7
}
}
}]
};
И я также заметил, что если rotate:90
добавляется в код graphdata.nodes label
, метка узла будет вращаться.
Поэтому я хотел бы спросить, как повернуть направление метки края или оставить его всегда горизонтальным?
Спасибо за помощь.