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上的问题，或者定位问题原因。

4 视频教学

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

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