echarts 关系映射数据处理，以及整个链接的高亮处理

echarts 关系图谱数据处理及整条链路高亮处理

图谱示例：实体属性关系图

数据处理

一般情况下，从接口拿到的数据都是 关系图谱 中的节点信息，示例：

link = [{
  source: '浮游植物',
  target: '磷虾'
}, {
  source: '磷虾',
  target: '浮游植物'
}, {
  source: '浮游植物',
  target: '浮游动物'
}, {
  source: '浮游植物',
  target: '小鱼'
}, {
  source: '须鲸',
  target: '虎鲸'
}, {
  source: '大鱼',
  target: '虎鲸'
}, {
  source: '海豹',
  target: '虎鲸'
}, {
  source: '磷虾',
  target: '须鲸'
}, {
  source: '浮游动物',
  target: '大鱼'
}, {
  source: '小鱼',
  target: '海豹'
}, {
  source: '大鱼',
  target: '海豹'
}]

我们要想有 实体属性关系图 的展示效果，就必须有每个节点的位置信息，以及该节点的层级信息< category属性 >

{
	// 节点名称
	name: "小鱼",
	// 层级信息
	category: 1,
	// 位置[x, y]
	value: [200, 100],
	// 节点图标大小
	symbolSize: 50
}

这些信息该怎么去通过系统自动处理呢？

第一步 获取全部节点名称

let list = []

link.forEach(element => {
	list.push(element.source)
	list.push(element.target)
})

// 元素去重
list = [...new Set(list)]

通过这一步，可以得到全部的节点名称，结果是

['浮游植物', '磷虾', '浮游动物', '小鱼' ...]

第二步 给每个节点添加相应的属性信息

const dataInfo = []
list.forEach(element => {
  const obj = {
    name: element,
    sourceCount: 0
  }
  link.forEach(item => {
    if (item.source === element) {
      obj.sourceCount++
    }
  })
  dataInfo.push(obj)
})

通过这一步，得到的结果是

[{
	name: '大鱼',
	sourceCount: 2
}]

第三步 找到源头

暂定按照 实体属性关系图 这样的结构处理，即源头就是开始分叉的节点，也就是 sourceCount 属性值最大的那个点

// 按 sourceCount 给元素排序
dataInfo.sort((a, b) => {
  return b.sourceCount - a.sourceCount
})

// 字义一个变量，值是排序过后的，血缘的源头
const source = dataInfo[0]['name']

第四步 确定有几条分支

确定分支，主要是高亮整条链路用

// 确定整个血缘有几条线
const lineCount = dataInfo[0]['sourceCount']

第五步 把原来的一维数组按它们之间的链路关系分组成多维数组

// 定义一个多维数组
const manyItemArray = []

const otherLink = JSON.parse(JSON.stringify(link))
this.loopPush(otherLink, source, manyItemArray, lineCount)

loopPush (arr, source, manyItemArray, lineCount) {
	const lineList = []
	lineList.push(source)
	let itemName = source
  for (let index = 0; index < arr.length; index++) {
  	const element = arr[index]
  	if (itemName === element.source) {
  		lineList.push(element.target)
  		arr.splice(index, 1)
  		index = 0
  		itemName = element.target
  	}
  }
  
	manyItemArray.push(lineList)
	if (arr.length && manyItemArray.length < lineCount) {
		this.loopPush(arr, source, manyItemArray, lineCount)
	} else {
		for (let index = 0; index < arr.length; index++) {
			for (let key = 0; key < manyItemArray.length; key++) {
				if (manyItemArray[key].includes(arr[index]['source']) && !manyItemArray[key].includes(arr[index]['target'])) {
					manyItemArray[key].push(arr[index]['target'])
				}
			}
		}
	}
}

分成多维数组的主要目的，是为了方便计算它们的位置，位置是由该节点的层级 * 基数 50 来确定的

然后就剩下最后一步，添加线路信息，和层级信息，以及节点的位置信息了

第六步 添加 line 属性、categories属性、value属性

// 给元素添加 line,categories 这两个属性
for (let index = 0; index < manyItemArray.length; index++) {
  const element = manyItemArray[index]
  for (const item of dataInfo) {
    if (element.includes(item['name'])) {
      if (item['line']) {
        item['line'].push(index + 1)
      } else {
        item.line = [index + 1]
      }
      for (let key = 0; key < element.length; key++) {
        if (element[key] === item['name']) {
          item['categories'] = key
          if (item['line'].length > 1) {
            item.value = [item['categories'] * 50, (item['line'][0] + 1) * 50]
          } else {
            item.value = [item['categories'] * 50, item['line'][0] * 50]
          }
          break
        }
      }
    }
  }
}

到此，全部信息获取完毕，最终结果是

[{
  categories: 0
  itemStyle:
  opacity: 1
  line: [1, 2, 3]
	name: "浮游植物"
  sourceCount: 3
  value: [0, 100]
}]

展示已经完全没有问题

整条链路高亮

echarts API 中有一个属性，是可以控制鼠标划过节点，相邻节点高亮的

focusNodeAdjacency: true, // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点

但我们现在要的是，鼠标移到该节点，跟该节点相关的整条链路高亮

在处理之前，本着 我一定不会是第一个吃螃蟹的人，我遇到的问题，别人一定也遇到过 的原则，扒了好久的资料，倒是有人遇到过类似的问题，早在 2017年、2018年 就在 echarts 的 issu 上提出过该问题，但是并没有看到相关的回复

好吧，自己处理

既然是鼠标移到节点上，节点作出相应的反应，那能不能监听鼠标的移入移出事件？

echarts 有鼠标事件的处理，通过 on 可以监听鼠标的若干行为

鼠标事件的处理

this.relationshipMap.on('mouseover', (params) => {})

事实证明，是可以监听鼠标的移入和移出行为的，并且移入节点时，params 的 dataType 值是 node，那就好办了，此时先前准备的 line 就有了用武之地。

接下来进行一系列的骚操作

this.relationshipMap.on('mouseover', (params) => {
  if (params.dataType === 'node') {
    this.res.nodes.forEach(node => {
      node.itemStyle.opacity = 0.1
    })
    if (params.data.line.length === 1) {
      this.res.nodes.forEach(node => {
        if (node['line'].includes(params.data['line'][0])) {
          node.itemStyle.opacity = 1
        }
      })
    } else {
      params.data.line.forEach((item) => {
        this.res.nodes.forEach(node => {
          if (node['line'].includes(item)) {
            node.itemStyle.opacity = 1
          }
        })
      })
    }
  }
})

到此，其实页面上应该要做出相应的改变的，但是不管怎么努力，数据是变了，页面是就是没有给出相应的改变，难道此路不通？？？

在这个地方，我竟然卡了一天????

终于，在第二天下午，突然想到一个问题，echarts 本质是个嘛玩意儿？

从控制台看 Elements 信息，不难发现，我们所看到 echarts 在 Dom 上就是一个 canvas，而 canvas 的最重要的操作步骤是什么？

最重要的操作步骤，不是你前面换了多少次画笔，也不是你前面设置的 canvas 的维度，它的核心步骤，也是最重要的步骤，在我看来，是最后一步，重绘

每一次的 canvas 修改，如果不进行最后一步的重绘，它就不会发生任何的改变，好吧，添加上最最最重要的一步，重绘

this.relationshipMap.on('mouseover', (params) => {
  if (params.dataType === 'node') {
    this.res.nodes.forEach(node => {
      node.itemStyle.opacity = 0.1
    })
    if (params.data.line.length === 1) {
      this.res.nodes.forEach(node => {
        if (node['line'].includes(params.data['line'][0])) {
          node.itemStyle.opacity = 1
        }
      })
    } else {
      params.data.line.forEach((item) => {
        this.res.nodes.forEach(node => {
          if (node['line'].includes(item)) {
            node.itemStyle.opacity = 1
          }
        })
      })
    }
  }
  this.relationshipMap.setOption(graphOption)
})

唉呀嗬，移入时，整条链路高亮了，高亮了，高亮了，????????????

得嘞，加上移出重置，收工

// 划出恢复原本颜色
this.relationshipMap.on('mouseout', (params) => {
  this.res.nodes.forEach(node => {
    node.itemStyle.opacity = 1
  })
  this.relationshipMap.setOption(graphOption)
})

当然，这个版本的数据处理，比较片面，只是按 echarts 给出的 实体属性关系图 的结构，进行的数据处理，如果有其它的的结构，还需要在此基础上再完善。

但是可以整条链路高亮了，可以整条链路高亮了，可以整条链路高亮了