FAQ中心
页面树结构
转至元数据结尾
转至元数据起始 
（本文档仅供参考）

问题说明

如下图所示，仪表盘中双y联合图中，使用曲线面积图和柱图时，曲线面积图默认会覆盖在柱图上，影响柱图的展示，以及影响柱图上的跳转、筛选等功能。

解决方案

目前产品中没有直接的设置项可以进行层级的调整，不过可以通过扩展属性或者宏的方式来讲柱图置于曲线面积图之上。

1、通过扩展属性的方式实现

与Echarts图形-扩展属性：联合图柱图显示上方，面积图显示在下方一致，

{
  "series": [{
    "zlevel": 0
  }, {
    "zlevel": 1
  }]
}

不过需要注意图形的层级应该与图形保持一致，如下图所示：

2、通过写宏的方式实现

在对应的双y联合图组件新建宏，对象为该组件，事件为onBeforeRender(组件渲染前)，代码如下

/**
 * 宏说明：
 * 作用：仅用于将联合图中的柱图层级提高
 * 逻辑：如果判断类型为柱图则将层级设置为999
 */
function main(page: IPage, portlet: IEChartsPortlet) {
    let options = portlet.getChartOptions()
    let series = options.series
    series.forEach((item: any) => {
        if (item.type === 'bar') { 
            item.zlevel = 999
        }
    })
    portlet.setChartOptions(options)
}
  • 无标签