Echarts中的 emphasis

Echarts中的 emphasis,第1张

官网上对 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'
},

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

 

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1323035.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-12
下一篇 2022-06-12

发表评论

登录后才能评论

评论列表(0条)

保存