echarts: Can't disable emphasis state in Echarts 5.x ?

Version

5.1.1

Reproduction link

https://jsfiddle.net/qcmgetan/

Steps to reproduce

Simply mouse over the serie.

What is expected?

Emphasis state should be disabled

What is actually happening?

Emphasis state is not disabled

I can’t manage by any way to prevent my series to go in emphasis state on mouse over, though emphasis.focus: "none" and emphasis.scale: false or even serie.silent: true are set.

lineStyle.width grows to 1px more and areaStyle.color also change. The weird part is that if you set serie.emphasis.lineStyle.width to 1 it takes account of it and “fix” the problem, so it looks like emphasis is still enabled therefore emphasis.scale is set to false. I could go with that but I couldn’t manage to find a way to set serie.areaStyle.opacity as identical.

If I set serie.emphasis: null, serie.lineStyle.width do not change but serie.areaStyle.color does.

I did not have this issue with Echarts 4.x

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 18 (7 by maintainers)

Most upvoted comments

On very large series this leads to some performance loss, ideally this functionality can be disabled altogether.

Sakkyoku-Sha on Sep 16, 2021

Overall, it would be better to revert the design about ‘[Design] Bolder lineWidth when hover.’ #12931

plainheart on May 17, 2021

@Raphyyy It seems to be possible if we specify the series.z and tooltip.axisPointer.z.

tooltip: {
    ...
    axisPointer: {
         z: 210
    }
},
series: [
    {
        ...
        z: 200
    },
    {
        ...
        z: 201
    },
    {
        ...
        z: 202
    },
    ....
]

plainheart on May 18, 2021

Yes but can I do it if I do not have the hand on the configuration.color settings ? Also my series are dynamically generated, so I can’t get programmatically the color before I use echartsIntance.setOption to create my series.

Raphyyy on May 17, 2021

Do you mean you hope to keep the area color unchanged when hovering on the chart? If so, unfortunately, there is currently no option to configure it, you have to set a specific value for area style. For example,

areaStyle: {
    color: '#5470c6'
    opacity: 0.1
},
emphasis: {
    areaStyle: {
        color: '#5470c6'
        opacity: 0.1
    }
}

About color

By default, the emphasized color is calculated by

echarts.color.lift(normalColor, -0.1)

If you want to get the emphasized color, you could use the above code.

Related issue: #12369

About lineWidth

Since v5.0.0, the line width will be bolder by 1px in emphasis state than the normal state. This feature may be removed or changed in the future. For now, you will have to set emphasis.lineStyle.width to be identical to lineStyle.width.

plainheart on May 17, 2021