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


1 图形宏简介

    当图形需要根据数据,动态展示一些效果的时候,使用扩展属性也难以满足。Smartbi提供了“图形宏”功能,用户能根据需求实现图形的各种动态效果。“图形宏”是报表宏的一部分,是单指作用在ECharts图形对象上的报表宏,用户可以使用“图形宏”实现丰富的图形效果(如下图,实现柱图轮播)。

    

    基本上,使用Smartbi的图形宏功能,可以在Smartbi实现任何使用ECharts能够实现的图形。创建入口与创建报表宏相同(详见:报表宏创建方式),功能界面如下图所示:

    

2 图形宏事件

Smartbi图形宏目前开放了三个事件,图形加载前(beforeRender),图形加载完成后(afterRender),点击元素(pointClick)。

  • beforeRenderer:图形渲染之前执行,主要用于修改图形样式(options,就是echarts接收的配置样式,要达到什么效果,修改什么配置需要参考echarts的配置http://echarts.baidu.com/option.html#title),宏代码执行完成后才刷新图形,所以一般要更改图形的xx展现样式首先想到的是这个宏事件
  • afterRenderer:图形渲染之后执行,主要用于对图形做一些后期处理,可以直接操作图形的dom对象,以及调用图形控件的API方法修正dom
  • pointClick::点击图形对象时触发,主要用于图形跳转处理,可以通过跳转规则向导设置

事件触发流程如下图所示:

3 图形宏对象及方法

如要在图形宏中灵活操作ECharts,则需要能在图形宏中获取到与ECharts相关的对象,并调用ECharts开放的API接口,使其实现所需的图形效果。下面是常用的ECharts相关的对象和方法:

  • chartView:图形的全局对象,作为参数传入。
  • 图形的所有数据:vardata = chartView.getGridData();(包括图形未使用的字段数据)
  • Smartbi封装的ECharts对象:varsmartbiECharts = chartView.getChartObject()
  • Smartbi构建的option对象:varoptions = smartbiECharts.getOptions()
  • ECharts的原生实例对象:varechartsInstance = smartbiECharts.getChart()(注意:beforeRender事件中,因图形尚未加载,因此没有ECharts原生实例对象)
  • 设置图形option:echarsInstance.setOption(options)

其余对象及方法,请查看API或自行调试查看,本文不再赘述。

4 图形宏示例

beforeRender示例

示例需求:设置饼图中面积最大的扇区加红色边框,并设置弹出效果。

由于图形加载前,就已经可以获取到option对象,以及里面的系列数据,则可以选择beforeRender事件,然后获取到option对象,修改属性即可。

图形宏执行效果如下图所示。

afterRender示例

示例需求:打开图形后,自动显示最大值扇区的鼠标提示框。

由于需要自动显示鼠标提示,则必须在图形加载之后才能进行操作。因此选择afterRender事件。而自动显示鼠标提示,我们需要用到ECharts提供的API接口方法echartsInstance.dispatchAction触发图表行为。

在报表宏中,先获取到ECharts原生实例对象echartsInstance,然后调用dipatchAction方法触发鼠标提示效果。

图形宏执行结果如下图所示,当图形打开后,会自动显示提示框。

pointClick示例

示例需求:当点击饼图扇区时,更新图形标题为所点击扇区的信息。

需求为在点击扇区之后修改标题,自然想到使用图形元素点击事件pointClick。在图形宏中获取到option对象,然后根据点击扇区的信息,修改图形标题option.title内容。由于此时图形已经加载完成,修改option对象后,需要主动调用ECharts实例对象提供的echartsInstance.setOption方法,重新加载图形。

图形宏执行效果如下图所示。

5 使用图形宏快速实现Demo效果

上一节提到,当使用“覆盖式”扩展属性可以直接展示完整option对象的图形,但是不支持动态计算的代码。学习完图形宏,我们可以借助图形宏,在Smartbi中快速复制其他地方的ECharts图形,作为Demo展现。下面以实际案例讲述制作方法。

在ECharts官网上看到一个3D折线图,想要直接在Smartbi中展现,由于其中包含动态计算data的代码,无法直接使用“覆盖式”扩展属性。

此时我们可以考虑使用图形宏,由于图形宏里面是可以正常运行动态计算代码的,因此可以直接在beforeRender事件中,替换掉整个option。

于是,创建一个beforeRender事件的图形宏,直接复制“3D折线图”的全部代码,放到图形宏里面。然后调用Smartbi封装的ECharts对象smartbiECharts的setOptions方法,更新Smartbi构建的option为“3D折线图”的option。(注意,不是调用ECharts实例对象的echartsInstance.setOption方法)

图形宏执行效果如下图所示,这样即可快速实现Demo效果。

6 视频教学

    视频教学点击下载:图形宏图形宏实战

    视频配套资源下载:图形宏示例

  • 无标签