基础水球图

在组件库中，我们给大家提供了丰富的组件，且为了降低大家在项目制作过程中的设计复杂度，对这些组件预设了一些样式，但我们仍可以在此基础上对其样式进行修改。

基础水球图是水球图组件的一种预设样式，包含了水球图组件所有的功能。

在组件的使用过程中，我们可以按照以下步骤进行设置：

1. 添加组件

如果您不太熟悉组件，可以通过组件窗口找到该组件后添加：

如果您比较熟悉组件，可以通过搜索来添加组件，这个方式会更便捷一些。
点击搜索按钮或按键盘“Ctrl+F”键打开搜索框，输入组件名称进行搜索，然后点击对应的组件进行添加。

2. 绑定数据

第一步：确认数据源格式

不同的组件适合于不同格式的数据，如果数据源格式不符合组件的要求，就无法正常显示内容。

水球图组件的数据由一个分类字段和一个取值字段组成，其中分类字段是字符串类型，取值字段是数字类型。

分类字段（水果）	取值字段（数量）
苹果	36
香蕉	18
橘子	25

第二步：设置数据字段

（1）使用组件数据

每个组件都自带一个示例数据源。
单击选中组件，在右侧“数据”设置窗口中，可以看到组件已经设置好了数据字段，且数据字段来自于“组件自有数据”。

【温馨提示】如果您需要在本地数据源准备好之前制作项目，如制作一个原型图或 Demo，此时您可以直接使用组件自有数据。组件自有数据符合上述的组件数据源格式要求，但是不一定符合您的项目需求，所以您需要先对其进行修改才能使用。

在“数据”设置界面下方可以直接修改数据，组件中的数据也会实时更新。

鼠标右键点击数据表头可以修改字段名称、修改数据类型和删除字段。

字段类型包括：字符串、数字和数组（X 轴字段和系列字段都是字符串类型，Y 轴是数字类型，数组类型用于词云组件），只有在字段类型正确的情况下，组件内容才能正常显示。

（2）使用本地数据

第一步：添加数据源

如果您已经准备好了本地数据源，就不需要使用组件自有数据源了。
在“数据”的下拉菜单中点击“添加数据”，将本地数据源添加进来。

在“连接数据”的窗口中，选择对应的数据源类型。

下面以添加Excel 数据源为例：（更多数据源添加方式请参看教程：连接数据）

点击“确定”即添加完成，然后就可以在“连接数据”的窗口中查看详细的数据。

第二步：设置数据字段

点击选中组件，在右侧“数据”设置窗口中切换到“看板公共数据”（同一个项目中所有数据源是共享的）。

在修改数据字段前，需要先删除当前字段，点击字段右侧的“X”可以删除字段。

接下来把本地数据字段拖拽添加到组件对应的字段设置中。

3. 设置组件样式

点击选中组件，在右侧“样式”设置窗口中可以看到多个不同的设置分类，每一个分类里都有不同的设置项，这些分类和设置项根据不同的组件会有不同的内容。

3.1. 固定样式设置

所谓固定样式，就是设置完之后一直保持的组件样式。

下面我们按照每一个设置项给大家介绍一下具体的设置：

3.1.1 基本设置

配置项	说明
不透明度	1）根据个人喜好或整体和谐度合理地使用透明度，会让大屏布局更美观；	2）这个设置项的一个常见用法是结合条件样式/交互/多状态来实现组件的显示和隐藏。
分类目标值	在此下拉框中可以选择表内分类数据。
默认值	自定义设置水球图显示的值，默认值为“50%”。

基础水球图 透明度变化，如下图所示：

3.1.2 数据颜色

对水球的填充颜色单独进行颜色设置。

3.1.3 图形文本

开启“图形文本”按钮后，组件中才能显示图形文字样式。

配置项	说明
数据显示格式	按照取值字段的类型来选择文本显示为“数值”还是“百分比”。
小数位数	根据取值字段具体数据来手动输入小数点后位数，默认填入“2”。
小数补零	开启按钮后会根据手动输入的“小数位数”在小数点后添加“0”，使小数达到一定的位数，使数据看起来更整齐。
字体	可对图形文本的字体、字体大小、颜色等样式进行配置。
内部字体颜色	对显示在水球内部的字体颜色进行单独配置。

基础水球图 图形文本样式，如下图所示：

3.1.4 图形形状

配置项	说明
轮廓颜色	对水球最外圈边缘颜色进行单独配置。
轮廓宽度	自定义设置水球最外圈边缘宽度，默认宽度“2px”。
水球背景颜色	对水球部分背景颜色进行单独配置。
水球边框颜色	对水球边缘部分颜色进行单独配置。
水球边框大小	自定义设置水球边缘部分宽度，默认宽度“2px”。
水波振幅	自定义设置水波振幅，默认振幅“10px”。
水波波长	自定义设置水球波长，默认波长“80px”。
流动方向	可设置水流流动方向为“右侧”或“左侧”。
形状	在下拉菜单中可选择9 种水球形状。

基础水球图 圆形形状如下图所示：

3.1.5 大小＆位置

可以通过直接点击和拖动组件来调整大小和位置，也可以通过直接输入宽、高、X 坐标和Y 坐标来设置。

配置项	说明
组件大小	即组件的宽度和高度，单位为px。
组件位置	组件的 X、Y 轴坐标，X 坐标为组件左上角距离页面左边界的像素距离，Y 坐标为组件左上角距离页面上边界的像素距离。
组件旋转	三维空间旋转可以输入任意数值，数值对应角度向 X 轴/Y 轴旋转。

基础水球图 大小＆位置参数示意图，如下图所示：
位置.png

3.1.6 边框设置

开启“边框设置”按钮后，组件中才会显示边框样式，才可以对组件整体边框样式进行配置。

配置项	说明
边框颜色	对组件边框的颜色单独进行配置。
边框宽度	组件边框的粗细程度，默认宽度为“1px”。
圆角半径	边框形状，默认半径为“0px”。
边框样式	可选“实线”“虚线”“点状线”和“无边框”4 种边框样式。

基础水球图 边框样式，如下图所示：

3.1.7 背景设置

组件默认没有背景颜色，如果需要设置背景颜色，需要先开启“背景设置”项按钮。

配置项	说明
背景颜色	对组件背景的颜色单独进行配置。
背景图/视频	可在此处添加本地图片或视频，充当组件背景。
背景裁剪	添加本地图片/视频后对其进行裁剪。
填充方式	背景“拉伸填充”方式下，图片会根据目标区域的大小进行拉伸或压缩，以完全覆盖该区域；背景“平铺填充”方式下，会将图片按其原始大小和比例不变的方式铺满整个区域。
是否使用点九	开启此按钮后，进行点九编辑。
点九编辑	鼠标拖动蓝色像素边框进行编辑，指定可以进行拉伸的区域。
背景模糊	使背景变得模糊或虚化，默认模糊程度为“0px”。

基础水球图 使用点九填充背景样式，如下图所示：

基础水球图 平铺填充背景色样式，如下图所示：

3.2. 条件样式设置

所谓条件样式，就是组件会根据数据条件变化的样式。（关于数据条件的设置请参考这个教程：数据条件）

几乎所有的设置项都可以进行条件样式的设置，但是不同的设置项在设置条件样式时会有一点区别，具体有以下两种方式：

方式 1：在扩展设置菜单中设置

大部分的设置项的条件设置方式都属于这种，以“基本设置”中的“不透明度”设置项为例，具体步骤如下：

点击选中组件，将鼠标移动到该设置项上，就可以看到设置项名称右侧会出现三个点（扩展设置按钮）。

点击这三个点，就可以打开扩展设置的窗口，第一个选项就是“条件样式”。
另外，将鼠标移动到设置项上使用鼠标右键点击，也可以打开扩展设置设置窗口。

点击“条件样式”打开条件样式设置窗口。

点击“+添加条件样式”，然后选择需要触发的数据条件（这里可选的数据条件必须是已有的数据条件）。
根据当前设置项，我们可以设置满足条件 1 时的不透明度数值，以及当条件都不满足时的不透明度数值。

设置完成之后，该设置项就会出现“已启用条件样式”的提示。

方式 2：直接在设置项中设置

部分设置项的条件设置方式直接显示在该设置项中，可以直接在该设置项上设置，但基础极水球图的条件样式只能通过方式 1进行设置。

3.3. 通过数据字段设置样式

所有的设置项的修改本质都是值的修改，所以所有设置项都可以通过数据字段进行控制。这里需要用到动态数据字段的功能。

仍以“基本设置”中的“不透明度”设置项为例：
打开扩展设置的窗口，点击第三个选项“生成数据字段”。

点击后，该设置项就会出现“请设置数据字段”的提示。

切换到“数据”设置界面，此时可以看到界面中新添加了一个“动态数据字段”的设置项，并且针对刚才选择的“不透明度”设置项生成了一个关联的字段。

接下来只需要添加一个数据字段到这里，就可以通过数据来控制不透明度了。
添加一个数值为“0”的数据到数据字段中，可以看到通过动态数据字段将不透明度的数值修改为“0”，从而使组件隐藏。

4. 设置组件交互

点击选中组件，在右侧“交互”设置窗口中可以对当前组件的交互进行添加和删除。

所有组件在添加后都有两个预设交互，对应的分别是入场动画和离场动画，这两个交互建议大家不要删除。
对于图表类组件，通常不需要设置动画之外的交互。

5. 二次开发

点击选中组件，在右侧设置窗口中切换到“代码”，可以对组件进行二次开发设置。

二次开发需要通过载入JavaScript 脚本文件来实现。
点击“+”添加设置项，多个脚本可以添加多个设置项。

在二开的过程中，我们可以对组件的样式进行控制。如果我们希望控制某个设置项，可以先在样式中查看该设置项的二开代码示例。

以“不透明度”设置项为例，打开扩展设置的弹窗，点击“调用代码示例”。

可以看到这个设置项的二次开发调用代码示例。

这里我们举一个简单的二开示例（更详细的请参考二次开发教程）：
二开功能：组件自动在大屏上向右移动
示例代码：如下所示

class Button{
  update(){
    const position = this.element.getOption(
      ["position"]
    );
    // 当前元素在X轴上移动一定的距离
    this.element.setOption(
      ["position"],
      [(position[0] + 1 )%100,position[1]]
    );
  }
}
export default Button;