本文介绍: echarts地图,选中颜色设置;取消鼠标默认事件,点击选中地图实现颜色变化,选择高亮,选中高亮,取消选中(再次点击取消选中),下面以四川部分地图为例。针对选择模式,非点击(click),选择事件,可以获取相关地图数据,使用echarts地图的事件方法 mapselectchanged。
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);
});
原文地址:https://blog.csdn.net/qq_40739261/article/details/129668462
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_46176.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。