echarts地图,选中颜色设置;取消鼠标默认事件,点击选中地图实现颜色变化,选择高亮,选中高亮,取消选中(再次点击取消选中),以下面地图为例

echarts地图,选中颜色设置;取消鼠标默认事件,点击选中地图实现颜色变化,选择高亮,选中高亮,取消选中(再次点击取消选中),下面以四川部分地图为例
在这里插入图片描述

series: [
          {
            // left: '0%',
            // top: '0%',
            zoom: 1.2,
            type: "map",
            map: name,
            roam: false, //鼠标平移或者缩放
            silent: silent,
            itemStyle: {
              normal: {//未对地图作任何操作时的样式,加载想默认展示的样式
                borderWidth: 2, //边框大小
                borderColor: "#ffffff",
                areaColor: "#2DD4D6", //背景颜色
                label: {
                  show: true,
                  formatter: function (params) {
                    return `{pic|${
                      params.value.toString() == "NaN" ? 0 : params.value
                    }}\n{fline|${params.name}}`;
                  },
                  position: "top",
                  rich: {
                    pic: {
                      backgroundColor: "rgba(25, 31, 37, 0.34)",
                      padding: [2, 5],
                      width: "auto",
                      height: 15,
                      align: "center",
                      color: "#FFFFFF",
                      fontSize: "10px",
                      borderRadius: 5,
                    },
                    fline: {
                      color: "#FFFFFF",
                      align: "center",
                      fontSize: "12px",
                    },
                  },
                },
              },
              emphasis: {// 这个是鼠标移上去就会选中的样式,鼠标mouseover
                  borderWidth:1,
                  borderColor:'yellow',
                  areaColor:"#77e8e4",
              }
            },
            //重点下面,与点击事件不同,虽然也是点击选中,但是事件不一样
            selectedMode:"single", //选择模式,单选,只能选中一个地市
            select:{//这个就是鼠标点击后,地图想要展示的配置
              disabled:false,//可以被选中
              itemStyle:{//相关配置项很多,可以参考echarts官网
                areaColor:"#77e8e4"//选中
              }
            },
            data: this.map.data,//你的地图数据
          },
        ],

针对选择模式,非点击(click),选择事件,可以获取相关地图数据,使用echarts地图的事件方法 mapselectchanged

var myChart = echarts.init(this.$refs.echart_map);
myChart.setOption(option, true);
myChart.on('mapselectchanged',(e)=>{
        console.log(e,111111111111);
}); 
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值