页面树结构

版本比较

标识

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

1 可视化配置

Smartbi针对ECharts图形,提供了可视化的配置界面,可支持用户在不了解option配置属性的情况下,依然能按自己的需求,制作出丰富的ECharts图形效果。

Smartbi中的图形可视化配置界面,同样是与ECharts图形结构是一一对应的,如下图所示。其本质是根据用户在可视化配置界面中的设置,构建出option配置对象,进而绘制出ECharts图形的。

2 扩展属性

ECharts的配置项非常丰富及灵活,无法通过Smartbi的可视化配置界面实现一一对应。因此Smartbi提供扩展属性的功能,当可视化配置界面无法配置出所需图形效果时,可以考虑使用扩展属性调整图形。

2.1 扩展属性使用方法

扩展属性的一般使用方法:

  • 先确定要修改的图形元素(标题、系列、坐标轴等);
  • 在元素对应的option配置项中(标题->title、系列→series等),寻找可能的属性,并确定该属性相对于option的位置结构;
  • 将该属性添加到扩展属性中查看效果。如果无效则重复第2步。(建议尝试属性时,可以参照前面调试ECharts图形效果介绍的方法,效率较高,同时可排除Smartbi方面的问题

...

  • 在ECharts官网、社区提供的实例中找到类似效果的图;
  • 删除多余的属性,确定效果对应的关键属性,并确定该属性相对option的位置结构;
  • 将属性添加到扩展属性中查看效果。

2.2 扩展属性使用示例

例如,通过Smartbi的可视化配置界面,如果无法调出圆角的柱子,那么此时,我们就需要通过扩展属性调整图形。接下来,我们以 “将普通柱图的长方形柱子调整为圆角的柱子”为例(如下图所示),分别说明扩展属性使用的一般方法和笨办法。

...

  • barBorderRadius属性添加到扩展属性,查看效果。

2.3 覆盖式扩展属性

当我们需要将其它地方看到的ECharts图形,直接放到Smartbi中展现,以证明Smartbi支持此类图形时,可以将图形对应的option属性,整个放到扩展属性中,并选择属性合并方式为“覆盖”,Smartbi就会直接以扩展属性的option直接绘制图形。注意,扩展属性中只能放置option属性,此时的数据是静态的,不能存在动态计算的代码段。

...

下图的ECharts图形示例中,除了option属性外,还包含额外的计算代码,以动态计算数据。这类图形不能直接复制代码放到扩展属性中,需要将数据处理成静态后,再放置到扩展属性。

3 获取Smartbi图形的option

Smartbi支持“鼠标中键”点击图形以展示当前图形的option配置对象。当需要调试Smartbi图形或Smartbi图形显示不正常时,可以取出Smartbi图形的option配置对象,放到ECharts官网的demo示例中运行,以查看效果。

...