需求是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
})
});