在某些需求下需要用到树形图来表达数据结构，我使用的是echarts，关于echart树形图的基础配置和使用这里就不展开。
直接上图，这是一个基础的树形图demo：
当点击非最末节点的时候，echart的默认行为为收缩该节点的子节点，这个行为会与下面实现的效果有关系，效果：
现在回到标题的需求，当点击节点的时候，实现整条链路高亮，也就是更换线的颜色，因为非最末节点的节点可能对应多个子节点，所以只有最末节点才存在一对一的关系，所以需求就是点击末节点的时候，实现整条链路高亮，效果：
下面进入实现，一开始思考这个需求的时候，以为跟经常做的柱状图点击更换柱子颜色一样，都是去替换配置，当然某种情况下也是可以实现的，先简单说一下树形图的data结构，是使用children属性层层嵌套的结构：
[
{
name: '',
value: 0,
itemStyle: {},
lineStyle: {},
children: [...]
}
]
按上面的思路，只要监听节点的点击事件，然后获取对应链路相关的节点，更改他们的lineStyle，然后echart实例重新setOption就可以，下面看一下大概实现：
myChart.on('click', function (params) {
console.log(params)
})
看一下点击节点，echart带的参数
关注里面的两个属性，一个data，也就是我们自己给节点添加的属性，然后是treeAncestors属性，它就代表了节点的链路关系，寻找唯一的父节点一直到根节点，这里只保留了name、value、dataIndex三个关键属性，dataIndex是echart生成的唯一索引，在我们的原始数据中没有，而name很有可能出现同名的情况，所以假设我们生成一个唯一的value，通过这个treeAncestors数组的每一个value和我们原始配置的数据中的value去匹配，相同的话就更换它的
lineStyle属性，最后重新setOption。
具体实现：
myChart.on('click', function (params) {
console.log(params)
// 深拷贝，防止原始配置被修改
const copyOption = JSON.parse(JSON.stringify(initOption))
const data = params.data
if (data.children) {
return
} else {
const treeAncestors = params.treeAncestors
treeAncestors.forEach((item) => {
if(item.value !== undefined) {
findSameValue(copyOption.series[0].data, item.value)
}
})
myChart.setOption(copyOption)
}
})
function findSameValue(data, value) {
data.forEach((item) => {
if(item.value === value) {
item.lineStyle = {
color: '#42cccc'
}
}
if(item.children) {
findSameValue(item.children, value)
}
})
}
到这里这种点击更换相关节点linestyle的方式就实现，但是这种方式有两个问题：
1.上面我们是假设value是唯一的，如果实际开发中value有实际用途不能让我们生成唯一的值，这种方法就无法实现。但这个还不是致命的。
2.上面说到，非最末节点点击时，会收缩与展开它的子节点，而我们上面实现高亮的时候是重新setOption，会将已操作的交互覆盖掉，点击前效果：
点击后：
可以看到，原本收起来的节点回到一开始的展开效果了，这对交互效果来说是致命的，
setOption无法做到还保留之前的交互效果，所以这种实现方法要放弃了。
实现高亮的核心还是更换节点属性的linestyle，但是不能通过重新setOption来实现，在翻遍echart配置项的时候，最后看到了一个属性和一个方法：
emphasis其实是定义鼠标移入节点时的效果，但是在echart api中可以用
dispatchAction来手动触发这个效果，通过传入type='highlight'，那么只要在点击的时候，通过dispatchAction触发相关节点的emphasis效果，那我们的需求就能实现了。dispatchAction可以传入节点的唯一索引dataIndex或者多个dataIIndex组成的数组，代表手动高亮哪些节点；且还有相对应的取消emphasis效果的api，通过dispatchAction传入type='downplay'来实现，很完美。
实现：
先在echart配置项中添加emphasis时的效果：
series:[
{
....,
emphasis: {
lineStyle: {
color: '#42cccc'
}
}
}
]
因为emphasis属性默认是鼠标移入节点时的效果，所以我们手动触发高亮会和默认行为冲突，需要一个数组保存点击高亮的节点dataIndex。
let currentDataIndexs = []
点击时手动触发相关节点的高亮：
myChart.on('click', function (params) {
// 先取消已高亮的节点连线
myChart.dispatchAction({
type: 'downplay',
dataIndex: currentDataIndexs
})
// 针对非最尾节点点击收缩展开后已高亮线路失效
if (params.data.children) {
myChart.dispatchAction({
type: 'highlight',
dataIndex: currentDataIndexs
})
return
}
const treeAncestors = params.treeAncestors
const dataIndexs = treeAncestors.map((item) => item.dataIndex)
// 重新保存当前高亮的节点
currentDataIndexs = dataIndexs
// 高亮相关节点连线
myChart.dispatchAction({
type: 'highlight',
dataIndex: dataIndexs
})
})
还需要覆盖emphasis的默认行为，也就是鼠标移入事件：
// 节点鼠标移入事件
myChart.on('mouseover', function (params) {
// 取消当前节点的高点，顶替默认事件
myChart.dispatchAction({
type: 'downplay',
dataIndex: params.dataIndex
})
// 高亮点击已保存的相关节点的连线，防止上一步取消了已保存节点的高亮
myChart.dispatchAction({
type: 'highlight',
dataIndex: currentDataIndexs
})
})
实现效果：
点击前：
点击后：
实现了。
我是鸭子，祝你幸福。