ECharts地图图表：多选、单选及默认选中功能实现

ECharts地图图表：多选、单选及默认选中功能实现

本文将介绍如何使用ECharts实现地图上的多选、单选以及默认选中功能。通过具体的代码示例，帮助读者快速理解和实现相关功能。

基本配置

首先，我们需要设置地图的基本配置，包括提示框、缩放和平移功能、选中模式等。以下是一个完整的配置示例：

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, // 设置北京默认高亮
        }
      ],
    }],
  };  

初始化图表

使用setOption方法初始化图表：

myChart.setOption(option);

添加点击事件

为了实现从多选到单选的切换，我们需要添加点击事件处理函数：

// 添加点击事件处理函数  
myChart.on('click', function (params) {  
  // 动态切换数据为单选  
  myChart.setOption({  
    series: [{  
      selectedMode: 'single',  
    }]  
  });  
  // 切换到单选点击的  
  myChart.dispatchAction({  
    type: 'select',  
    // 图例名称  
    name: params.name  
  })  
});

效果展示

以下是最终实现的效果图：