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

正在查看旧版本。 查看 当前版本.

与当前比较 查看页面历史

版本 1 下一个 »

(本文档仅供参考)

场景描述:

仪表盘使用联合图组件,希望可以让某个子图形例如线图都正常显示最大最小值的标注,而另一个子图形-柱图都不显示标注,如何实现?

处理方案:

(1)若是数据是固定的,可以采用自定义属性的方式实现:

option = {
  "series": [{
    "markPoint": {
      "data": []
    }
  }, {
    "markPoint": {
      "data": []
    }
  }, {
    "markPoint": {
      "data": [{
        "type": "max",
        "name": "期间目标值1"
      }, {
        "type": "min",
        "name": "测试最小值1"
      }]
    }
  }, {
    "markPoint": {
      "data": [{
        "type": "max",
        "name": "期间目标值2"
      }, {
        "type": "min",
        "name": "测试最小值2"
      }]
    }
  }]
}

组件设置——属性——自定义扩展属性:

效果如图:

(2)数据不固定,例如图例系列堆积的数量会随着筛选器变化而变化,此时随着筛选器的选中值改变,会导致series长度变化,因此不能像自定义属性那样写死哪个有标注哪个没有标注。需要写宏处理,思路为:获取图形的options,然后遍历,对于类型为线图的,就添加标注。

宏示例:注意是渲染前的宏

##名称:渲染前  类型:ClientSide  对象:图表_3  事件:onBeforeRender
function main(page: IPage, portlet: IEChartsPortlet) {
    let options = portlet.getChartOptions()
    console.log('===> options,', options)
    options.series.forEach((item:any) => {
        console.log('===> item:', item)
        if (item.type === 'line') {
            item.markPoint = {
            "data": [{
            "type": "max",
            "name": "测试最大值"
            }, {
            "type": "min",
            "name": "测试最小值"
            }]
        }
        }
    });
    portlet.setChartOptions(options)
}

组件设置——交互——宏管理——对联合图图表组件——右键新建宏——事件:onBeforeRender(组件渲染前)

效果如图:切换其他筛选器条件,也是根据线图类型判断的


  • 无标签