echarts 禁用/取消 地图regions/区域 选中

在Echarts中将地图region不可选中

代码

配合官方示例更易理解: https://echarts.apache.org/examples/zh/editor.html?c=geo-seatmap-flight&lang=ts

  // 监听区域选中事件
  myChart.on('geoselectchanged', function (params: any) {
    //禁用用户选中region
    myChart.dispatchAction({
      type: 'geoUnSelect',  // 触发echarts行为类型, 参考dispatchAction文档
      geoIndex: 0,	// 不太清楚, 在我的项目和官方示例中这么写没问题
      // 地图名称, mapName
      geoName: 'flight-seats',	
      // geo 组件中 region 名称。
      name: params.name
    });
  });

禁用前:

禁用后

完整代码, 于官方代码上修改:

import * as echarts from 'echarts';

var ROOT_PATH = 'https://echarts.apache.org/examples';
type EChartsOption = echarts.EChartsOption;

var chartDom = document.getElementById('main')!;
var myChart = echarts.init(chartDom);
var option: EChartsOption;

$.get(ROOT_PATH + '/data/asset/geo/flight-seats.svg', function (svg) {
  echarts.registerMap('flight-seats', { svg: svg });

  const takenSeatNames = ['26E', '26D', '26C', '25D', '23C', '21A', '20F'];

  option = {
    tooltip: {},
    geo: {
      map: 'flight-seats',
      roam: true,
      selectedMode: 'multiple',
      layoutCenter: ['50%', '50%'],
      layoutSize: '95%',
      tooltip: {
        show: true
      },
      itemStyle: {
        color: '#fff'
      },
      emphasis: {
        itemStyle: {
          color: undefined,
          borderColor: 'green',
          borderWidth: 2
        },
        label: {
          show: false
        }
      },
      select: {
        itemStyle: {
          color: 'green'
        },
        label: {
          show: false,
          textBorderColor: '#fff',
          textBorderWidth: 2
        }
      },
      regions: makeTakenRegions(takenSeatNames)
    }
  };

  function makeTakenRegions(takenSeatNames: string[]) {
    var regions = [];
    for (var i = 0; i < takenSeatNames.length; i++) {
      regions.push({
        name: takenSeatNames[i],
        silent: true,
        itemStyle: {
          color: '#bf0e08'
        },
        emphasis: {
          itemStyle: {
            borderColor: '#aaa',
            borderWidth: 1
          }
        },
        select: {
          itemStyle: {
            color: '#bf0e08'
          }
        }
      });
    }
    return regions;
  }

  myChart.setOption(option);

  // 监听区域选中事件
  myChart.on('geoselectchanged', function (params: any) {
    //禁用用户选中region
    myChart.dispatchAction({
      type: 'geoUnSelect', // 触发echarts行为类型, 参考dispatchAction文档
      geoIndex: 0, // 不太清楚, 在我的项目和官方示例中这么写没问题
      // 地图名称, mapName
      geoName: 'flight-seats',
      // geo 组件中 region 名称。
      name: params.name
    });
  });
});

option && myChart.setOption(option);