echart map图标切换多选,单选,默认选中
需求是echart默认地图选中之前的去过的城市,一开始多选,后面点击为单选
const option = { tooltip: { trigger: 'item', formatter: '{b}' }, series: [{ type: 'map', roam : true,//是否开启缩放和平移 zoom : 1,//当前视角缩放比例 selectedMode: 'multiple', // 只允许单选 // 设置为一张完整经纬度的世界地图 left: 0, top: 0, right: 0, // botto: 0, itemStyle : {//地图区域的多边形 图形样式 hoverAnimation : true, normal : { opacity : .6, borderWidth: 1, areaColor: '#4C525D', //默认的地图板块颜色 borderColor: 'rgba(255,255,255,0.2)',//地图边框颜色 }, // 点击选中的颜色 emphasis : { areaColor: '#6D717A', //默认的地图板块颜色 borderColor: 'rgba(255,255,255,0.6)',//地图边框颜色 opacity : 1, label: { show : false, fontSize : 0 } }, }, // 默认选中的颜色 select: { itemStyle: { areaColor: '#6D717A', //默认的地图板块颜色 borderColor: 'rgba(255,255,255,0.6)',//地图边框颜色 opacity : 1, }, label: false }, mapType: 'world', animation: false, data : [ { name: '广东省', selected: true, // 设置广东默认高亮 }, { name: '四川省', selected: true, // 设置北京默认高亮 } ], }], };
myChart.setOption(option);
// 添加点击事件处理函数
myChart.on('click', function (params) {
// 动态切换数据为单选
myChart.setOption({
series: [{
selectedMode: 'single',
}]
});
// 切换到单选点击的
myChart.dispatchAction({
type: 'select',
// 图例名称
name: params.name
})
});