echarts 关于geo中roam的交互

oewdyzsn  于 2022-11-03  发布在  Echarts
关注(0)|答案(4)|浏览(290)

1.在一个大的canvas里绘制一个小型的geoMap,设置了roam后只有Map周围可以拖动,周围大部分空表区域都不能拖动

2.在实现点击区域放大某一地区的功能(手动设置center和boundingCoords)后,roam的可拖动区域就变成了被选中的地区,超出范围的也不能拖动了。。。

有什么办法可以设置整个echart示例是可以被拖动和缩放的呢?

谢谢!

sz81bmfz

sz81bmfz1#

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

ua4mk5z4

ua4mk5z42#

这个问题不准备修复吗?v5.0.0 也有这个bug

nuypyhwy

nuypyhwy3#

This issue is marked to be stale and is going to be closed within a week. If you think it shouldn't be closed, please leave a comment.

yrwegjxp

yrwegjxp4#

发现了同样的问题。不过可以通过需要放到区域和整个Map的坐标宽高比例来设置 zoom 属性进行放大。

_api.getModel()?.getSeriesByIndex(0).coordinateSystem 这个 API 属性中可以拿到 _rect 属性信息:

// _chinaMapRect 为整个Map的 rect 信息
// regionInfo._rect 是某个省份的,可以在 coordinateSystem.regions 获得
const widthPer = _chinaMapRect.width / regionInfo._rect.width
const heightPer = _chinaMapRect.height / regionInfo._rect.height

echarts.setOptions({
      series: [{
          center: regionInfo.center,
          layoutCenter: ['50%', '50%'],
          layoutSize: '100%',
          zoom: Math.min(widthPer, heightPer)
      }]
})

这样可以获得理想的交互效果

相关问题