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
})
});
 

 

 

posted @ 2024-09-09 19:32  惠鹏曦  阅读(23)  评论(0编辑  收藏  举报