散点图

散点图组件主要使用散点的形式展示数据。气泡图和散点图类似，气泡图使用气泡来展示数据。

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

图1 散点图

属性

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

图2 属性

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

图3 散点图配置效果

• 数据系列：对数据属性（数据的标记图形、标记的大小、标记颜色、散点图标是否设置阴影等）进行一系列配置。单击“+”，可添加数据系列。当数据系列的设置数多于实际数据时，多于的数据系列不显示。
  • 标记的图形：散点或者气泡标记的图形。
  • 标记的大小：散点标记的大小。气泡图没有该参数且不支持改标记大小。
  • 颜色设置：支持纯色、线性渐变和径向渐变。
  • 阴影设置：设置阴影的颜色、大小、水平方向偏移距离和垂直方向偏移距离。气泡图有该参数，散点图没有。
  • 图形透明度：区间是[0,1]，0代表不显示，1代表全部显示。
  • 图形标签/显示标签：打开“显示标签”开关后显示标签，可设置标签的颜色、位置和字体大小。
  • 图表标注和标线：控制是否显示最大值标注、最小值标注和平均值标线。
• X轴设置
  • X轴坐标轴类型：可设置为连续数据（支持数值类型的数据）、类目轴（支持字符、字符串等类目类型的数据）、时间轴（支持日期、时间类型的数据）。
  • 坐标轴分割段数：设置坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。
  • 最大值最小值设置/最大值、最小值：可设置坐标轴的最大值和最小值，单击“清空”恢复默认值。
  • X轴名称设置/坐标轴名称：坐标轴的名称内容。
  • X轴名称设置/字体大小：坐标轴名称的字体大小。
  • X轴名称设置/颜色：坐标轴名称的字体颜色。
  • X轴名称设置/刻度标签旋转的角度：控制刻度标签的旋转，在文字过长时可以避免重叠。
  • 轴线设置/坐标轴显示：控制是否显示坐标轴。
  • 轴线设置/轴线显示：控制是否显示轴线。
  • 轴线设置/刻度显示：控制是否显示刻度。
  • 轴线设置/线的颜色：轴线的颜色。
  • 轴线设置/刻度标签颜色：刻度标签的颜色。
  • X轴标签字体大小：设置X轴标签的字体大小。
  • 网格线设置/显示：是否显示轴网格线。
  • 网格线设置/线的类型：轴网格线的类型。
  • 网格线设置/颜色：轴网格线的颜色。
• Y轴设置
  • Y轴坐标轴类型：可设置为连续数据（支持数值类型的数据）、类目轴（支持字符、字符串等类目类型的数据）、时间轴（支持日期、时间类型的数据）。
  • 最大值最小值设置/最大值、最小值：可设置坐标轴的最大值和最小值，单击“清空”恢复默认值。
  • Y轴名称设置/坐标轴名称：坐标轴的名称内容。
  • Y轴名称设置/字体大小：坐标轴名称的字体大小。
  • Y轴名称设置/颜色：坐标轴名称的字体颜色。
  • 轴线设置/坐标轴显示：控制是否显示坐标轴。
  • 轴线设置/轴线显示：控制是否显示轴线。
  • 轴线设置/刻度显示：控制是否显示刻度。
  • 轴线设置/线的颜色：轴线的颜色。
  • 轴线设置/刻度标签颜色：刻度标签的颜色。
  • Y轴标签字体大小：设置Y轴标签的字体大小。
  • 网格线设置/显示：是否显示轴网格线。
  • 网格线设置/线的类型：轴网格线的类型。
  • 网格线设置/颜色：轴网格线的颜色。
• 图例：设置组件中图例，图例文字内容来源于数据模型“dataValue”下“name”取值。
  • 显示图例：是否显示图例。
  • 位置选择：图例的位置。
  • 小图标：图例的小图标形状。
  • 文本样式设置/字体大小：图例文本字体的大小。
  • 文本样式设置/文本颜色：图例文本的颜色。
  • 文本样式设置/字体系列：图例文本的字体。
  • 文本样式设置/字体粗细：图例文本字体的粗细。
  • 文本样式设置/文字风格：图例文本的文字风格。
• 组件标题：设置组件的标题。
  • 设置标题：是否显示标题。
  • 内容：组件标题的文本内容。
  • 位置选择：组件标题的文本位置。
  • 背景色：标题的背景色。
  • 字体大小：组件标题的文本字体大小
  • 字体系列：组件标题的字体系列。
  • 文本颜色：组件标题的文本颜色。
• 图表信息
  • 图表背景色：设置图表的背景色。
  • 边框圆角：设置图表的边框圆角。
  • 坐标系位置：设置坐标系与组件上下左右边距距离的百分比。

数据

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

图4 设置组件数据

事件

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

图5 设置事件