ECharts - How to prevent changing background color on hover

3
votes

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

2
hoverbackground-colorechartsdisable

2 Answers

6
votes

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
    }
  },
  [...]
0
votes

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;

}