官网上对 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'
},
一目了然,和之前展示官网上的图效果一样,高亮了需要显示的具体数据 ( 一般用这个会比较多 )
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)