Echarts中的 emphasis

官网上对 emphasis 的解释就是：高亮的图形样式和标签样式。

是不是有点懵，没有懂具体什么意思

 

 了解 emphasis 

 在 Echarts 中 ， 尤其是在做到堆叠柱状图的时候 ， 由于很多的信息容易看混 ，可以用上 series 里的 emphasis 去淡化周围的，显示自己想看的那一项具体的信息。

还是很抽象 ？举个例子

在自拍的时候拍出来的一张照片里元素太多了 ，可我原本单纯是想自拍拍出自己的脸，可入镜的有后面的花草树木，走过的路人，行驶过去的车辆等等等等。这时候手机相册里有个编辑功能叫虚化 。顾名思义，这就是 echarts 里面的 emphasis 了。

结合上面的理解，放几个官网上的展示图，加深印象

 

 

---

属性

series 中的 emphasis 用的比较多的两种属性

• focus

• blurScope

---

focus ：在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。

• none        不淡出其它图形，默认使用该配置
• self          只聚焦（不淡出）当前高亮的数据的图形
• series      聚焦当前高亮的数据所在的系列的所有图形

none 就不过多解释了

下面代码实现 self 和 series 两种属性

 blurScope ： 在开启 focus 的时候，可以通过 blurScope 配置淡出的范围。

•  ' coordinateSystem '         淡出范围为坐标系，默认使用该配置。
•  ' series '                            淡出范围为系列。  
•  ' global '                            淡出范围为全局。

代码实现

emphasis : {
    focus : 'self'
},

鼠标放在上面，很明显聚焦了，但没有高亮我需要显示的信息 

 

emplasis : {
    focus : 'series'
},

 一目了然，和之前展示官网上的图效果一样，高亮了需要显示的具体数据 ( 一般用这个会比较多 )