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('container')
	      	this.graph = new Graph({
	        	container: container, // 画布容器
	        	width: container.offsetWidth, // 画布宽
	        	height: container.offsetHeight, // 画布高
	        	autoResize: true,
	        	background: { // 背景
	          		color: '#F2F7FA'
	        	},
		        panning: {
		          enabled: true // 支持滚动放大缩小
		        },
		        mousewheel: {
		          enabled: true,
		          modifiers: 'Ctrl', // 按住ctrl按键滚动鼠标滚轮缩放
		          factor: 1.1,
		          maxScale: 10,
		          minScale: 0.05
		        },
	        	grid: {
		          visible: true, // 渲染网格背景
		          type: 'doubleMesh',
		          args: [
		            {
		              color: '#eee', // 主网格线颜色
		              thickness: 1 // 主网格线宽度
		            },
		            {
		              color: '#ddd', // 次网格线颜色
		              thickness: 1, // 次网格线宽度
		              factor: 4 // 主次网格线间隔
		            }
		          ]
	        	}
	      	})
	      	this.graph.use( // 启用对齐线
	        	new Snapline({
	          		enabled: true
	        	})
	      	)
	      	// 鼠标移入线
	      	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 })
		        }
	      	})
		},
		// 获取数据
	    init() {
	      this.loading = true
	      API.getData().then(res => {
	        if (res.code === 200) {
	          this.setGraphData(res)
	        } else {
	          this.$message.error(res.msg)
	        }
	      }).finally(() => {
	        this.loading = false
	      })
	    },
	    setGraphData(data) {
	      const X = 200
	      this.data = {
	        nodes: [],
	        edges: []
	      }
	      const obj = {}
	      // 转为对象数组  多个节点可能顺序相同，顺序相同的排列在同一行
	      data.state_data.map(item => {
	        if (obj[item.order_id]) {
	          obj[item.order_id].push(item)
	        } else {
	          obj[item.order_id] = []
	          obj[item.order_id].push(item)
	        }
	      })
	      // 遍历对象数组 通过遍历数组,将节点数据转为流程图中需要的数据类型
	      Object.keys(obj).forEach((key, objIndex) => {
	        obj[key].map((item, index) => {
	          const node = {
	            id: item.id, // 节点id
	            shape: 'custom-rect', // 这是上边定义的节点类型
	            label: item.name, // 节点名称
	            x: X + 300 * index, // 节点x轴坐标 因为存在顺序相同的节点，需要排在同一行，但是y不一样
	            y: 40 + 150 * objIndex, // 节点y轴坐标 顺序不同的节点，y轴坐标不同
	            attrs: {
	              body: { // 这里是区分普通节点与开始结束节点的， 具体看效果图
	                rx: item.type_id === 0 ? 4 : 10,
	                ry: item.type_id === 0 ? 4 : 10
	              }
	            }
	          }
	          if (item.id === Number(AES.decryptECB(this.nodeId))) {
	            node.attrs.body.stroke = '#67C23A' // 边框颜色
	            node.attrs.body.fill = '#e1f3d8' // 填充颜色
	          }
	          this.data.nodes.push(node)
	        })
	      })
	      // 遍历线的数据 通过遍历数组,将线数据转为流程图中需要的数据类型
	      data.transition_data.map((item, index) => {
	        const obj = {
	          id: item.id, // 线id
	          shape: 'edge', // 类型为线
	          source: item.source_state_id, // 源节点
	          target: item.destination_state_id, // 目标节点
	          labels: [ // 线名称样式
	            {
	              attrs: {
	                label: {
	                  text: item.name // 线名称
	                }
	              },
	              position: 0.2 // 名称在线的相对位置（0-1）一般为0.5
	            }
	          ],
	          router: { // 线的路由
	            name: 'metro', // 智能路由manhattan  地图路由metro
	            args: { // 这里根据线的状态来判断线是从源节点的哪里开始，到目标节点的哪里结束  // 值为1 线从源节点下方开始，到目标节点上方结束 // 值为2 线从源节点左方开始，到目标节点左方结束 // 值其他 线从源节点右方开始，到目标节点右方结束
	              startDirections: item.attribute_type_id === 1 ? ['bottom'] : item.attribute_type_id === 2 ? ['left'] : ['right'],
	              endDirections: item.attribute_type_id === 1 ? ['top'] : item.attribute_type_id === 2 ? ['left'] : ['right']
	            }
	          },
	          tools: [{
	            name: 'segments',
	            args: {
	              snapRadius: 20,
	              attrs: {
	                fill: '#444'
	              }
	            }
	          }],
	          attrs: { // 线样式
	            line: {
	              stroke: '#8f8f8f',
	              strokeWidth: 1
	            }
	          }
	        }
	        this.data.edges.push(obj)
	      })
	      this.graph.fromJSON(this.data) // 渲染数据 将添加的节点与线画出来
	      window.__x6_instances__ = []
	      window.__x6_instances__.push(this.graph)
	    },
	}
}
</script>