ECharts - How to prevent changing background color on hover

Question

I would like to prevent background-color from changing when I hover on ECharts map. For example, see this link https://echarts.apache.org/examples/en/editor.html?c=map-usa. How can I hover over the map but the colors of the map remain unchanged. I do not want the background color changing (to yellow in this case) when I hover my mouse on any part of the map

Montymonument

Answer 1

emphasis: { ... } similar :hover but you can silent: true to turn events off.

Update:

• silent: true it's Echarts method that suppress events for series. In this case you can use method to suppress event mouseover emitted by the map. Set silent to true no one events will not produced. According to example from question you need add row into series option:

series: [{
  name: 'USA PopEstimates',
  type: 'map',
  roam: true,
  map: 'USA',
  silent: true, // <---- here
  [...]
}]

Almost all components has this method and you can suppress events in runtime.

• emphasis it's simple and easy method to define styles that will be applied to map on mouseover event. Take a look official tutorial how to use this method:

series: [{
  name: 'USA PopEstimates',
  type: 'map',
  roam: true,
  map: 'USA',
  silent: true,
  emphasis: {
    label: {
      show: true
    }
  },
  [...]

Schonfeld

Thanks for your suggestion. Can you clarify your comment, please? Is silent:true a css property? I checked online but didn't see such. Can you please give clear example? Thanks – Montymonument

Works perfectly! Thank you so much @sergey-fedorov!! – Montymonument

What if I want to disable certain section of pie chart, is there a way around this? – Kosher

Just filter events from pie, check section and do nothing if this section the one that you need. – Schonfeld

Answer 2

You can use emphasis prop inside a serie item, to disable.

emphasis: {
    disabled: true,
  },

Missus

Answer 3

I implemented a css work-around for now, but I was thinking there is an eCharts option to turn mouse hover action off on background color.

The css solution I used is

.turnOffHover{
    pointer-events: none;

}

Montymonument