雷达图

雷达图是指通过极坐标的展现形式，使用围合的区域，来表示数据在不同维度的具体表现。

在高级页面设计器中，单击，从“图表 > 雷达图”中，拖拽“雷达图”组件到画布中，如图1所示。

图1 雷达图

属性

在属性中，设置雷达图组件的位置、边框、背景等。

图2 属性

• 基础
  • 组件标题：设置组件的标题。
  • 组件名称：设置组件的名称。
• 位置
  • 距离左端：组件到页面左侧的距离，单位为px。
  • 距离顶端：组件到页面顶部的距离，单位为px。
  • 宽度：组件的宽度，单位为px。
  • 高度：组件的高度，单位为px。
  • 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。
  • 自适应高度：组件的高度是否随宽度改变。
• 边框：设置组件的边框样式，如全边框或角边框。
• 背景
  • 样式：设置背景的样式，如普通、居中、拉伸等。
  • 图片链接：背景图片URL。
  • 颜色：设置背景的颜色。

图3 雷达图配置效果

• 选择模板：系统预置的雷达图模板，单击即可切换样式。可选择某一模板重置，也可通过设置各配置项得到想要的效果。
• 数据系列：对数据属性（数据的标记图形、标记的大小等）进行一系列配置。单击“+”，可添加数据系列。当数据系列的设置数多于实际数据时，多于的数据系列不显示。
  • 标记样式/标记的图形：可以设置标记的图形形状。
  • 标记样式/标记的大小：可以设置标记的图形大小。
  • 标记样式/折线拐点标志颜色：折线拐点标志的颜色。
  • 折线样式/宽度：折线的宽度。
  • 折线样式/线的类型：折线的类型。
  • 折线样式/不透明度：折线的透明度。
  • 折线样式/颜色：折线的颜色。
  • 区域填充样式/不透明度：折线内区域填充的透明度。
  • 区域填充样式/颜色：折线内区域填充的颜色。
  • 图形上的文本标签：打开“显示标签”，可设置图形上的文本标签的文本字体大小、字体颜色和字体粗细。
• 坐标系：设置组件的坐标系，包括雷达半径、中心位置、指示器配置、分隔线设置等。重点参数说明如下：
  • 基本信息/半径(%)：雷达图的半径占组件一半高度的百分比。
  • 基本信息/仪表盘中心位置/横坐标(%)、纵坐标(%)：圆心到组件左侧的距离占组件高度的百分比、圆心到组件顶端的距离占组件高度的百分比。
  • 基本信息/绘制类型：雷达图的绘制类型，支持圆形和多边形。
  • 指示器：单击“+”可增加指示器。可以设置指示器的名称、最大值、最小值、颜色。
  • 指示器名称：打开“显示名称”开关，可以统一设置所有指示器名称的颜色、文字风格、文本字体大小、字体系列、字体粗细，另外可以设置指示器名称与指示器轴的距离。
  • 轴分割段数：轴的分割段数，即几个圆圈。
  • 分割线：即圆圈。分割线会按颜色设置列表中颜色的顺序依次循环展示颜色。
  • 分隔区域。打开“显示分隔区域”可设置分隔区域颜色，分隔区域会按颜色设置列表中颜色的顺序依次循环展示颜色。
  • 坐标轴轴线：打开“显示轴线”，可设置坐标轴轴线的颜色。
• 图例：设置组件的图例，图例文字内容来源于数据模型“dataValue”下“name”取值。
  • 图例选择模式：可选单个或多个两种模式。
  • 位置选择：图例的位置。
  • 图例间隔：图例之间的间距。
  • 小图标：图例的小图标形状。
  • 文本样式设置/文本字体大小：图例文本字体的大小。
  • 文本样式设置/文本颜色：图例文本的颜色。
  • 文本样式设置/字体系列：图例文本的字体。
  • 文本样式设置/字体粗细：图例文本字体的粗细。
  • 文本样式设置/文字风格：图例文本的文字风格。
• 组件标题：设置组件的标题。
  • 设置标题：是否显示组件标题。
  • 内容：组件标题的文本内容。
  • 位置选择：组件标题的文本位置。
  • 背景色：标题的背景色。
  • 文本字体大小：组件标题的文本字体大小
  • 字体系列：组件标题的字体系列。
  • 文本颜色：组件标题的文本颜色。
• 图表信息：设置图表的背景，支持设置背景的颜色、四边圆角（取值为“0”时为直角，“100”为圆角）。

数据

在数据中，设置组件的数据来源。更多介绍，请参见如何调用后台接口。

图4 设置组件数据

事件

在事件中，查看组件可配置的事件列表。更多关于事件的介绍，请参见初识事件-动作。

图5 设置事件