解决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,
    },
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值