vue +antvX6 （二）鼠标移入线时，标签（label）颜色设置

简介

这一章主要讲vue +antvX6 鼠标移入线时，标签（label）颜色设置，需要看前置内容的的可以在下方链接中查看。
vue +antvX6 根据节点与线，动态设置节点坐标生成流程图

效果

代码

这里只有鼠标移入事件相关的代码，其他代码请看：
vue +antvX6 根据节点与线，动态设置节点坐标生成流程图
主要代码：

// 鼠标移入线
	      	this.graph.on('edge:mouseenter', ({
    
     e, edge, view }) => {
   
   
		        edge.attr({
   
   
		          line: {
   
   
		            stroke: 'red',
		            strokeWidth: 3
		          }
		        })
		        const label = edge.getLabelAt(0)
		        if (label) {
   
   
		          edge.setLabelAt(0, {
   
    attrs: {
   
    label: {
   
    fill: 'red', text: label.attrs.label.text } }, position: label.position })
	        	}
	      	})
	      	// 鼠标移出线
	      	this.graph.on('edge:mouseleave', ({
    
     edge }) => {
   
   
		        edge.attr({
   
   
		          line: {
   
   
		            stroke: '#8f8f8f',
		            strokeWidth: 1
		          }
		        })
		        const label = edge.getLabelAt(0)
		        if (label) {
   
   
		          edge.setLabelAt(0, {
   
    attrs: {
   
    label: {
   
    fill: 'black', text: label.attrs.label.text } }, position: label.position })
		        }
	      	})

全代码（js部分）：

<script>
... // 引入部分
export default {
   
   
	... // 其他数据与方法
	methods: {
   
   
		initGraph() {
   
   
			const container = document.getElementById('conta