(本文档仅供参考,仅适用于本文档中的示例报表/场景,若实际报表/场景与示例代码无法完全适配(如使用功能不一致,或多个宏代码冲突等),需根据实际需求开发代码。)
(如下宏验证版本为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
}
效果如下