当前位置: 首页 > news >正文

取消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;
}

相关文章:

  • Sigma-Delta ADC调制器的拓扑结构分类
  • java中的JNI调用c库
  • 若依微服务集成Flowable仿钉钉工作流
  • 【JavaScript】十八、页面加载事件和页面滚动事件
  • 基于AI的Web应用防火墙(AppWall)实战:漏洞拦截与威胁情报集成
  • 深入理解Java反射
  • 导入 Excel 批量替换文件名称及扩展名
  • react中通过 EventEmitter 在组件间传递状态
  • QTreeWidget 手动设置选中项后不高亮的问题
  • rbd块设备的id修改
  • 纳米软件储能电源模块自动化测试深度解析
  • Git版本管理系列:(三)远程仓库
  • vxe-table4.6 + vue3.2 + ant-design-vue 3.x 实现对列的显示、隐藏、排序
  • MYSQL-创建和使用表
  • Higress: 阿里巴巴高性能云原生API网关详解
  • 分享:批量识别图片文字并重命名,根据图片文字内容对图片批量重命名,Python和Tesseract OCR的完成方案
  • 阿里云负载均衡可以抗ddos吗
  • Qt零散知识点
  • Node.js 中处理 Excel 文件的最佳实践
  • SpringBoot中3种优雅停机的实现方式
  • 郑州网站建设咨询/网络营销的种类
  • 陆金所 网站开发二部/粤语seo是什么意思
  • 做品牌特价的网站有哪些/体育热点新闻
  • 学校网站建设是什么/东莞网络营销销售
  • 公安局网站备案查询/百度 搜索热度
  • 运城建设网站/seo教程书籍