(本文档仅供参考,仅适用于本文档中的示例报表/场景,若实际报表/场景与示例代码无法完全适配(如使用功能不一致,或多个宏代码冲突等),需根据实际需求开发代码。)
(如下宏验证版本为V97)
仪表盘地图可以将地图移动至画布以外的地方,移动端预览报表时,由于误操作将地图移动到画布以外的地方就无法拖拽回来了,需要全局刷新报表才能复原。
由于地图是可以放大缩小的,所以没有限制地图拖动的位置。并且echarts官网也没有地图限制拖拽位置的配置项,图形本身就是存在这个问题的,只能通过重新渲染实现重绘显示到界面中。
可以通过仪表盘宏,添加一个地图组件重新渲染的工具栏按钮,实现地图重新显示。
/** * 对象:geo地图 * 事件:onAfterRender * 实现效果: * 1、添加组件工具栏按钮:点击重新显示到画布中间; * 2、点击新按钮,可以实现地图重新显示到画布中间。 */ function main(page: IPage, portlet: IEChartsPortlet) { /** 画布中间位置记录器 */ let center = { left: 0, top: 0 } /** 组件工具栏实例 */ let toolbar = null // 添加组件工具栏回到中间按钮 // 这里做一下版本判断,>97版本产品已提供了获取组件工具栏的相关接口,v97未提供所以这里简单实现一下添加按钮功能。 if (portlet.getToolbar) { toolbar = portlet.getToolbar() } else { let CToolbar: any = getToolbar() toolbar = new CToolbar() toolbar.init(portlet.getId()) } toolbar.addButton({ id: 'visible', icon: 'sx-icon-visible', tip: '点击重新显示到界面上' }, (event: any) => { let chart = portlet.getChartInstance() let options = portlet.getChartOptions() if (center.left) { if (options.geo[0]) { options.geo[0].center = [center.left, center.top] } } chart.setOption(options, true) }, 0); // 拖拽位置后记录一下geo地图的原中间位置 let chart = portlet.getChartInstance() chart.on('georoam', (params: any) => { let options = portlet.getChartOptions() if (!center.left && options.geo[0]) { center.left = options.geo[0].center[0] center.top = options.geo[0].center[1] } }) } /** * 获取组件工具栏类 */ function getToolbar() { /** 组件工具栏类 */ let CToolbar = function () { this.toolbar = null } /** 初始化 */ CToolbar.prototype.init = function (portletId: string) { // 版本兼容 let toolbarContent = document.querySelector(`div[portletid="${portletId}"] .portlet__toolbar .portletToolbar__content`) let toolbar = document.querySelector(`div[portletid="${portletId}"] .portlet__toolbar`) this.toolbar = toolbarContent || toolbar } /** 获取组件工具栏所有的按钮dom */ CToolbar.prototype.getButtons = function () { let toolbar = this.toolbar if (!toolbar) return; return toolbar.childNodes || [] } /** 添加工具栏按钮 */ CToolbar.prototype.addButton = function (options: any, clickFn: any, index: any) { let toolbar = this.toolbar let buttons = this.getButtons() if (!buttons) return; // 兼容下钻,先去掉旧的按钮 let hasButton = toolbar.querySelector('#' + options.id) if (hasButton) { toolbar.removeChild(hasButton) } let dom = document.createElement('spen') dom.className = 'item' dom.id = options.id let i = document.createElement('i') i.className = ['icon-16', options.icon].join(' ') i.title = options.tip dom.appendChild(i) dom.onclick = clickFn // 添加dom到组件工具栏中 let button = buttons[index] try { if (index !== undefined && button) { toolbar.insertBefore(dom, button) } else { toolbar.appendChild(dom) } } catch (e) { console.error(e) } } return CToolbar } |
效果如下