取消echarts地图悬浮时默认黄色高亮

在这里插入图片描述

  • 这是核心代码
emphasis: {
     areaColor: undefined,// 继承 normal 颜色
},
  • 这是完整option demo
    注意mapName 替换
export default (data, _this) => {
  const mapName = data.mapName;
  const mapList = data.mapList || [];

  let options = {
    tooltip: {
      show:false,
      trigger: 'item',
      formatter: '{b}: {c}'
    },
    geo: {
      map: mapName,
      type: 'geo',
      roam: false,
      zoom: 1.1,      // 初始缩放级别
      label: {
        show: false
      },
      itemStyle: { // 加重立体感
        shadowColor: 'rgb(4,122,187)',
        shadowOffsetX: 5,
        shadowOffsetY: 10,
        shadowBlur: 5
      }
    },
    visualMap: {
      show:true,
      min: 0,
      max: 100,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'], // 文本,默认为数值文本
      calculable: true
    },
    series: [{
      type: 'map',
      map: mapName,
      z: 0,
      zoom: 1.1,      // 同步 geo 的配置
      label: { //地图上的标签相关属性
        normal: {
          show: true,
          color: '#fff',
          fontSize: 20,
        },
        emphasis: {
          textStyle: {
            color: '#fff'
          }
        }
      },
      itemStyle: {//地图每一块区域相关属性
        normal: {
          borderColor: '#c5ecfa', //#39ceff
          borderWidth: 2,
          // 关键修改点:设置固定渐变色
          areaColor: {
            type: 'linear',
            x: 0,y: 1,x2: 0,y2: 0,
            colorStops: [
              { offset: 0, color: '#438bfb' }, // 渐变起始色
              { offset: 1, color: '#5cacf9' }  // 渐变结束色
            ]
          }
        },
        emphasis: {
          areaColor: undefined, // 继承 normal 颜色
          borderWidth: 2,
        },
      },
      animation: false,
      data: mapList
    }]
  }

  return options;
}

在使用 ECharts 地图,如果希望取消鼠标悬浮(hover)带来的高亮效果,可以通过配置 `emphasis` 状态的样式以及关闭 `mouseover` 高亮行为来实现。 ECharts 提供了多种方式来控制地图区域在不同状态下的样式表现。默认情况下,当鼠标悬停在地图区域上,会自动应用强调状态(emphasis)的样式,通常表现为颜色加深或边框加粗等效果。要禁用这种行为,可以通过以下方式进行设置: ### 1. 禁用 emphasis 状态的视觉映射 在 `series` 配置项中,通过设置 `emphasis` 的 `itemStyle` 和 `areaColor` 来使其与正常状态一致,从而避免视觉上的变化。 ```javascript option = { geo: { map: 'yourMapName', type: 'map' }, series: [{ type: 'map', data: [], emphasis: { itemStyle: { areaColor: '#fff' // 设置为与默认颜色相同 } } }] }; ``` ### 2. 关闭 mouseover 高亮行为 ECharts 提供了全局的行为控制接口,可以通过 `blur` 和 `focus` 模式来管理图表元素的状态交互。可以将所有系列的 `blur` 模式设为 `'self'` 或 `'none'`,以防止其他元素被高亮。 ```javascript option = { focusNodeAdjacency: false, blurNodeAdjacency: true, series: [{ type: 'map', data: [], blur: { itemStyle: { areaColor: '#fff' // 保持与默认状态一致 } }, emphasis: { itemStyle: { areaColor: '#fff' } } }] }; ``` ### 3. 使用 `mouseover` 事件阻止默认行为 如果上述方法仍无法完全满足需求,还可以通过监听 `mouseover` 事件并手动干预渲染逻辑来彻底屏蔽高亮效果。 ```javascript myChart.on('mouseover', function(params) { if (params.componentType === 'series') { myChart.dispatchAction({ type: 'blur' }); } }); ``` 以上方法可以有效控制 ECharts 地图组件中由于鼠标悬停引发的高亮行为[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值