页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

...

当图形需要根据数据,动态展示一些效果的时候,使用扩展属性也难以满足。Smartbi提供“图形宏”功能,以便用户能根据需求实现各种动态效果。基本上,使用Smartbi的图形宏功能,可以在Smartbi实现任何使用ECharts能够实现的图形。功能界面如下图所示。

Image Modified

2 图形宏事件

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

...

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

Image Modified

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

Image Modified

afterRender示例

...

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

Image Modified

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

Image Modified

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

Image Modified

pointClick示例

...

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

Image Modified

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

Image Modified

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

...

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

Image Modified

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

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

Image Modified

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

Image Modified

6 资源下载

ECharts入门培训-演示资源:EChart入门培训-演示资源.xml

...