FAQ中心
页面树结构
转至元数据结尾
转至元数据起始

（本文档仅供参考，仅适用于本文档中的示例报表/场景，若实际报表/场景与示例代码无法完全适配（如使用功能不一致，或多个宏代码冲突等），需根据实际需求开发代码。）

（如下宏验证版本为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
}

效果如下



  • 无标签