文档首页/ 华为云Astro轻应用/ 用户指南（低代码）/ 使用AstroZero开发应用前端/ 高级页面/ 设置AstroZero高级页面预置组件属性/ 设置AstroZero高级页面散点图组件属性
更新时间：2024-09-18 GMT+08:00
查看PDF
分享

设置AstroZero高级页面散点图组件属性

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

图1 设置散点图属性

基础

  • 组件标题：设置组件的标题，用于在高级页面显示。
  • 组件名称：设置组件的名称，名称是该组件在页面中的唯一标识。

位置

  • 距离左端：组件到页面左侧的距离，单位为px。
  • 距离顶端：组件到页面顶部的距离，单位为px。
  • 宽度：组件的宽度，单位为px。
  • 高度：组件的高度，单位为px。
  • 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。
  • 自适应高度：组件的高度是否随宽度改变。
  • 开启：勾选该按钮，下方可见页面适配功能。
  • 页面适配：勾选页面适配下方的“开启”，表示组件开启自适应高度。该属性使页面其它位于其下方的组件，根据该组件的高度变化自动调整位置，一个页面只支持一个组件。

边框

设置组件的边框样式，支持全边框和角边框两种。

  • 全边框
    • 样式：设置组件边框的样式，如实线、点线、虚线和双实线。
    • 宽度：设置边框的宽度，单位px。
    • 颜色：设置组件边框的颜色。
    • 弧度：设置组件边框四个角的弧度，单位px。
  • 角边框
    • 宽度：设置组件边框的宽度，单位px。
    • 长度：设置组件边框的长度，单位px。
    • 颜色：设置组件边框的颜色。
    • 弧度：设置组件边框四个角的弧度，单位px。
    • 边距：设置组件边框和图表之间的间距，单位px。

背景

  • 样式：设置背景的样式，如普通、居中、拉伸等。
  • 图片链接：为轮播组件添加图片，当前仅支持添加JPG、JPEG、PNG和GIF格式的图片，且每张图片的大小不能超过50MB，尺寸建议使用800 x 800像素。
  • 颜色：设置组件的背景颜色。

高级设置

选中散点图组件，单击鼠标右键选择“高级设置”，可对散点图或气泡图进行多种配置。

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

相关文档