echart树形图实现点击节点完整链路更换颜色

在某些需求下需要用到树形图来表达数据结构，我使用的是 echarts ，关于 echart 树形图的基础配置和使用这里就不展开。

直接上图，这是一个基础的树形图demo：

当点击非最末节点的时候，echart的默认行为为收缩该节点的子节点，这个行为会与下面实现的效果有关系，效果：

下面进入实现，一开始思考这个需求的时候，以为跟经常做的柱状图点击更换柱子颜色一样，都是去替换配置，当然某种情况下也是可以实现的，先简单说一下树形图的 data 结构，是使用 children 属性层层嵌套的结构：

按上面的思路，只要监听节点的点击事件，然后获取对应链路相关的节点，更改他们的 lineStyle ，然后 echart 实例重新 setOption 就可以，下面看一下大概实现：

看一下点击节点， echart 带的参数

到这里这种点击更换相关节点 linestyle 的方式就实现，但是这种方式有两个问题：

1.上面我们是假设 value 是唯一的，如果实际开发中 value 有实际用途不能让我们生成唯一的值，这种方法就无法实现。但这个还不是致命的。

2.上面说到，非最末节点点击时，会收缩与展开它的子节点，而我们上面实现高亮的时候是重新 setOption ，会将已 *** 作的交互覆盖掉，点击前效果：

实现高亮的核心还是更换节点属性的 linestyle ，但是不能通过重新 setOption 来实现，在翻遍 echart 配置项的时候，最后看到了一个属性和一个方法：

实现：

先在 echart 配置项中添加 emphasis 时的效果：

因为 emphasis 属性默认是鼠标移入节点时的效果，所以我们手动触发高亮会和默认行为冲突，需要一个数组保存点击高亮的节点 dataIndex 。

点击时手动触发相关节点的高亮：

还需要覆盖 emphasis 的默认行为，也就是鼠标移入事件：

实现效果：

点击前：

点击后：

实现了。

我是鸭子，祝你幸福。

文字的地方看看有没有formate属性，如果在label里加入formate：function(v){

return <a href="" onclick="你的function">v</a>

}

---