echarts修改柱状图柱子颜色(echarts更改柱状图颜色)

关于echarts修改柱状图柱子颜色，echarts更改柱状图颜色这个很多人还不知道，今天欣欣来为大家解答以上的问题，现在让我们一起来看看吧！

echarts修改柱状图柱子颜色(echarts更改柱状图颜色)

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

2、直接上图，这是一个基础的树形图demo：当点击非末节点的时候，echart的默认行为为收缩该节点的子节点，这个行为会与下面实现的效果有关系，效果：下面进入实现，一开始思考这个需求的时候，以为跟经常做的柱状图点击更换柱子颜色一样，都是去替换配置，当然某种情况下也是可以实现的，先简单说一下树形图的 data 结构，是使用 children 属性层层嵌套的结构：按上面的思路，只要监听节点的点击，然后获取对应链路相关的节点，更改他们的 lineStyle ，然后 echart 实例重新 setOption 就可以，下面看一下大概实现：看一下点击节点， echart 带的参数到这里这种点击更换相关节点 linestyle 的方式就实现，但是这种方式有两个问题：1.上面我们是假设 value 是的，如果实际开发中 value 有实际用途不能让我们生成的值，这种方法就无法实现。

3、但这个还不是致命的。

4、2.上面说到，非末节点点击时，会收缩与展开它的子节点，而我们上面实现高亮的时候是重新 setOption ，会将已作的交互覆盖掉，点击前效果：实现高亮的核心还是更换节点属性的 linestyle ，但是不能通过重新 setOption 来实现，在翻遍 echart 配置项的时候，看到了一个属性和一个方法：实现：先在 echart 配置项中添加 emphasis 时的效果：因为 emphasis 属性默认是鼠标移入节点时的效果，所以我们手动触发高亮会和默认行为冲突，需要一个数组保存点击高亮的节点 dataIndex 。

5、点击时手动触发相关节点的高亮：还需要覆盖 emphasis 的默认行为，也就是鼠标移入：实现效果：点击前：点击后：实现了。

6、我是鸭子，祝你幸福。

本文到这结束，希望上面文章对大家有所帮助。