echarts柱状图柱子的高度（ECharts柱状图关闭鼠标hover时的高亮样式）

最近在做图表相关的需求
  
  
  
  
  
  
  
  ，使用的是echarts来画图
  
  
  
  
  
  
  
  。

今天算是遇到一个比较坑的点了吧  
  
  
  
  
  
  
  
 ，就是两根柱状图重叠对比
 


 


 


 


 


 


 


 


，设计图把某根柱状图的颜色设计得比较浅
 
 
 
 
 
 
 
 ，因为echarts的柱状图本身hover到柱子上的时候   
   
   
   
   
   
   
   
 ，会有个高亮状态
 

 

 

 

 

 

 

 

，画出来的图形本身是这样的：

 鼠标hover上去的时候

 

 

 

 

 

 

 

 ，因为预算的那根柱子的背景色设计得比较前                 ，鼠标hover的时候
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

，提示正常展示了















，但是被echarts本身hover的时候高亮状态                         ，导致柱子看不见了：

因为影响到了图表的效果 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，所以想要关闭echarts的高亮状态 
























，查文档                ，发现echarts是有给我们提供属性来控制高亮是否展示的：

 只需要把series.emphasis.disabled设置为ture,即可关闭hover时的高亮  
  
  
  
  
  
  
  
 。

option = { series: [ { name: 预算数据, type: bar, barWidth: 60%, color: #EAF6FE, emphasis: { disabled: true, focus: none }, data: [100, 520, 200, 350, 400, 370, 260] }, { name: 实际数据, type: bar, barWidth: 60%, color: #60BBFD, barGap: -100%, emphasis: { disabled: true, focus: none }, data: [10, 52, 200, 334, 390, 330, 220] } ] };

 配置好这个属性之后  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，鼠标移动到柱子上的时候
















，图表也能不被影响
  
  
  
  
  
  
  
  ，可以正常查看
 


 


 


 


 


 


 


 


。

但是需要注意的一个点是  
  
  
  
  
  
  
  
 ，这个属性
 


 


 


 


 


 


 


 


，只有5.3.0之后的版本才支持
 
 
 
 
 
 
 
 ，5.3.0之前的版本配置了是不会生效的！所以   
   
   
   
   
   
   
   
 ，如果是5.3.0之前的版本
 

 

 

 

 

 

 

 

，你可以选择联系UI修改一下图表的配色 or 升级你们项目的echarts版本啦
 
 
 
 
 
 
 
 。