使用echarts加载map3D,如果配置了3D柱状图以及气泡图,ECHARTS监听不到地图板块点击事件,只能监听到SERIES里面的数据,如果将地图放到series中无法高亮选中的地图。
解决思路是同时加载地图板块和series,然后将板块地图颜色设置为透明,通过点击修改option的geo3D来进行高亮。
实现代码
let myChart = echarts.init(dom);
echarts.registerMap('shanghai', mapJson); //注册地图;
let options = {
backgroundColor: '#0f375f',
geo3D: { //加载geo3D
map: 'shanghai',
itemStyle: {
color: "rgba(1, 16, 31, 0)", //将geo3d数据设置为透明
opacity: 0, //透明
borderColor: "rgba(1, 16, 31, 0)",
borderWidth: 0
},
},
series: [{
type: 'map3D', //加载series数据
map: 'shanghai',
itemStyle: {
color: "rgba(1, 16, 31, .2)",
opacity: 1,
borderColor: "rgba(1, 16, 31, .6)",
borderWidth: 1
},
label: {
show: false
},
emphasis: {
label: {
show: true
},
itemStyle: {
color: "rgba(1, 16, 31, 1)",
opacity: 1
}
},
// shading: 'color',
zlevel: 1
}]
}
myChart.setOption(options);
// 监听
myChart.on("click",params=>{
let option = this.chart.getOption();
let list = option.geo3D[0].regions;
//清空上次选中
list = list.map(el => {
delete el.itemStyle
delete el.label
return el
});
//找到选中的地图,并设置高亮
let result = list.find(el => el.name === name);
if(result){
result.itemStyle = {
color: '#ff0',
opacity: 1
};
result.label = {
show: true
}
this.chart.setOption(option);
}
})