解决echarts地图点击下钻时出现黄色阴影的问题

最近使用echarts使用地图时碰到了一个问题,查了很久终于解决了,直接上图上代码

一级地图效果
在这里插入图片描述
地图下钻后的错误效果
地图下钻后的错误效果
地图下钻后的想要效果
地图下钻后的想要的效果
代码

return {
        grid: {
          left: '2%',
          right: '0%',
          top: '0%',
          bottom: '0%',
          width: '95%',
          containLabel: true
        },
        layoutCenter: ['50%', '50%'], // 位置
        layoutSize: '80%',
        visualMap: {
          min: 0,
          max: 1000,
          type: 'piecewise',
          show: false,
          itemWidth: 10,
          itemHeight: 80,
          showLabel: true,
          seriesIndex: [0],
          text: ['高', '低'],
          // inRange: {
          //   color: ['#7F1000', '#BD1317', '#E64C45', '#FF8C71', '#FDD29F']
          // },
          visibility: 'off',
          pieces: [
            {
              max: 200,
              color: '#FDD29F'
            },
            {
              min: 200,
              max: 400,
              color: '#FF8C71'
            },
            {
              min: 400,
              max: 600,
              color: '#E64C45'
            },
            {
              min: 600,
              max: 800,
              color: '#BD1317'
            },
            {
              min: 800,
              color: '#7F1000'
            }
          ],
          textStyle: {
            color: '#7b93a7'
          },
          bottom: 30,
          left: 'left'
        },
        geo: {
          map: 'shangyu',
          aspectScale: 1, // 长宽比
          zoom: 1.2,
          seriesIndex: 1,
          roam: false, // 是否可缩放
          label: {
            normal: {
              color: '#fff',
              show: true
            },
            emphasis: {
              show: true,
              color: '#fff',
              fontSize: 18,
              position: ['50%', '50%']
            }
          },
          itemStyle: {
            normal: {
              shadowColor: '#182f68',
              shadowOffsetX: 0,
              shadowOffsetY: 5,
              borderWidth: 0
            },
            emphasis: {
              areaColor: '#f2d5ad'
            }
          },
          globalCoord: false // 缺省为 false
        },
        series: [
          {
            type: 'map',
            // map: 'shangyu',
            geoIndex: 0,
            roam: false,
            selectedMode: false, // 添加这个属性完美解决问题
            data: this.dataList
          },
          {
            type: 'effectScatter', // 带有涟漪特效动画的散点图
            coordinateSystem: 'geo',
            data: this.mapData,
            symbol: function (value, params) {
              return params.data.img
            },
            // symbol: 'pin',
            symbolSize: [12, 12],
            label: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              show: true,
              normal: {
                color: '#7F1000'
              }
            },
            showEffectOn: 'render', // 加载完毕显示特效
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            zlevel: 1,
            showAllSymbol: true
          }
        ],
        animation: true
      }

解决方法:
在 series->map 里添加 selectedMode: false

附:地图不要求下钻时,移入或点击某块区域要高亮显示

不需要加selectedMode属性,在series->map 里添加

emphasis: { // 移入选中的样式
   itemStyle:{
       areaColor: '#4f7fff',
        borderColor: 'rgba(0,242,252,.6)',
        borderWidth: 2,
        shadowBlur: 10,
        shadowColor: '#00f2fc',
    },
},
select: { // 点击选中的样式
   itemStyle:{
        borderColor: "rgba(0,242,252,.6)",
        borderWidth: 2,
        areaColor: "#55ecbc",
        shadowBlur: 10,
        shadowColor: '#1a8d9e',
        shadowOffsetY: 0,
        shadowOffsetX: 0,
    },
}
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用echarts地图点击下钻的实现过程如下: 1. 首先,你需要在echarts中定义绘制地图的方法。可以使用Echarts提供的地图组件,通过配置相关参数来展示地图。 [3] 2. 然后,你可以设置地图点击事件,通过监听点击事件来实现地图的下钻功能。当用户点击地图上的某个区域时,可以获取到对应的区域信息,然后根据这个信息进行下一级地图的展示。 3. 根据你的需求,你可以设定多级下钻的功能。比如,当用户点击全球地图上的某个国家时,可以展示该国家的全国地图;当用户点击某个省份时,可以展示该省份的具体地图。 4. 在实现下钻功能时,你可以根据自己的需求来选择展示不同层级的地图资源。如果你只想展示全球地图和全国地图,可以设置相应的地图资源,不需要包含省级以下的地图资源。 总结起来,使用echarts地图可以通过定义绘制地图的方法和设置点击事件来实现地图点击下钻功能。你可以根据需要设定多级下钻,同时可以选择展示特定层级的地图资源。通过这样的方式,你可以实现全球下钻到全国到省级的地图展示。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [echarts地图:全球+全国+省级,可下钻层级](https://download.csdn.net/download/qq_31001889/86247086)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [echarts实现地图下钻](https://blog.csdn.net/qq_23447231/article/details/121928744)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [5分钟使用Echarts轻松实现地图下钻](https://blog.csdn.net/hsany330/article/details/118609736)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值