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

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

一般方法

  • 要修的柱子为圆角样式,则确定修改的图形元素为柱子系列(系列->series); 
  • 在option配置项中,“系列”元素对应的是series配置项,在series配置项下面找到一个barBorderRadius属性可能有用,然后确定属性相对于option的位置结构:

          option->series→itemStyle→barBorderRadius。

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

笨办法

  • 查找ECharts官网、社区提供的示例中,是否有圆角柱子的示例效果。最终在社区中找到一个类似效果的示例。

  • 删除多余属性,注意删除时,不能破坏JSON或数组结构。在删除的过程中,不断查看图形效果,如删除某个属性导致图形显示不正常,则需恢复该属性,直至当删除掉barBorderRadius属性时,圆角效果消失,因此确定barBorderRadius为控制柱子显示为圆角样式的属性。

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

2.3 覆盖式扩展属性

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

例如,在ECharts官网上看到K线图,并且数据是静态的,不存在额外的计算代码,则可以直接将option对象复制到扩展属性中,则可以直接展示K线图。

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

3 获取Smartbi图形的option

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

例如,当想调试Smartbi中展现的图形时,可直接“鼠标中键”点击图形,打开option配置对象,然后复制option。

随意打开一个ECharts官网的demo示例,粘贴option,点击“整理代码”,最后点击刷新,即可在显示与Smartbi上相同的图形。此时可以直接在上面调试图形属性,或者确定是否与Smartbi上的图形展现一致,即当用户认为Smartbi上展现的图形不正常时,可以用此方法确定是否为Smartbi上的问题,或者定位问题原因。

视频教学

    视频教学点击下载:ECharts在Smartbi中的基本使用

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

  • 无标签