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示例中运行,以查看效果。
...