echarts geo根据缩放动态加载effectScatter以及居中问题解决方案
echarts geo根据缩放动态加载effectScatter以及居中问题解决方案
星宇大前端
发布于 2021-12-16 10:14:58
发布于 2021-12-16 10:14:58
echarts 画中国地图出现effectScatter标注点，但是由于点太密集，坐标太多，客户想实现地图一样根据缩放显示不同数据。
背景环境
框架： UMI/React Hooks echarts版本：4.9.0 react-for-echarts
实现思路
- events 监听时间georoam（拖动和缩放）
<ReactEcharts
option={option}
ref={instance}
onEvents={{
georoam: georoam,
}}
style={{
height: '100%',
width: '100%',
overflow: 'hidden',
paddingLeft: '2.2rem',
}}
/>- 获取缩放比例
const georoam = (params) => {
if (Reflect.has(params, "dx")) return; //如果是拖拽事件则退出
setZoom(instance.current.getEchartsInstance().getOption().geo[0].zoom)
const newZoom = Math.floor(instance.current.getEchartsInstance().getOption().geo[0].zoom)
//根据新的缩放，从新获取数据
ctrolData(newZoom)
};- 根据缩放比例筛选数据
这样基本满足了缩放，显示数据层次。但是又有了新问题，拖动的时候数据刷新了echarts每次都会从新居中。
解决数据刷新echarts geo 自动居中问题
echarts geo 有一个center属性，中国地图不设置默认居中。
在这里插入图片描述
所以需要动态捕获当前最后移动位置，刷新数据之后再重置这个属性。
步骤
- 设置个全局变量或者ref 记录下拖动最后，echarts 的center值。
在这里插入图片描述
- 监听mousemove ，并每个记录下center
<ReactEcharts
option={option}
ref={instance}
onEvents={{
georoam: georoam,
mousemove:mousemoveHandle
}}
style={{
height: '100%',
width: '100%',
overflow: 'hidden',
paddingLeft: '2.2rem',
}}
/> const mousemoveHandle = (params)=>{
center = instance.current.getEchartsInstance().getOption().geo[0].center
}- 最后在echarts option geo 赋值一下就可以
在这里插入图片描述
反思
并不是所有的状态都需要实时的去要界面响应。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021/12/15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
