echarts地图拖动，当地图边缘超出父元素边框，停止拖动的demo

很高兴为您解答。以下是一个简单的示例代码，可以实现您所需的功能：

HTML：

<div id="map-container">
  <div id="map"></div>
</div>

CSS：

#map-container {
  width: 800px;
  height: 600px;
  overflow: hidden;
  position: relative;
}

#map {
  width: 100%;
  height: 100%;
}

JavaScript：

// 初始化地图
var myChart = echarts.init(document.getElementById('map'));

// 设置地图选项
var option = {
  // ...
};

// 渲染地图
myChart.setOption(option);

// 获取地图容器
var mapContainer = document.getElementById('map-container');

// 获取地图容器的位置和尺寸
var containerRect = mapContainer.getBoundingClientRect();

// 记录地图容器的边界
var containerLeft = containerRect.left;
var containerTop = containerRect.top;
var containerRight = containerRect.right;
var containerBottom = containerRect.bottom;

// 记录当前地图的位置
var mapLeft = 0;
var mapTop = 0;

// 监听地图的拖动事件
myChart.on('drag', function(params) {
  // 获取地图移动的偏移量
  var dx = params.event.dx;
  var dy = params.event.dy;

  // 计算地图的新位置
  var newLeft = mapLeft + dx;
  var newTop = mapTop + dy;

  // 判断地图是否超出容器边界
  if (newLeft > containerLeft) {
    newLeft = containerLeft;
  }
  if (newTop > containerTop) {
    newTop = containerTop;
  }
  if (newLeft + containerRect.width < containerRight) {
    newLeft = containerRight - containerRect.width;
  }
  if (newTop + containerRect.height < containerBottom) {
    newTop = containerBottom - containerRect.height;
  }

  // 更新地图位置
  myChart.setOption({
    geo: {
      left: newLeft,
      top: newTop
    }
  });

  // 记录地图的新位置
  mapLeft = newLeft;
  mapTop = newTop;
});

在这个示例中，我们通过监听地图的拖动事件来实现地图的拖动，并且在拖动过程中判断地图是否超出了容器边界，如果超出了就将地图的位置调整到容器边界上。这样就可以实现地图拖动时当地图边缘超出父元素边框时停止拖动的效果。