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

设置AstroZero高级页面基本柱图组件属性

基本柱图是柱状图的一种，通过柱形图来呈现数据整体的表现。

图1 设置基本柱图属性

基础

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

位置

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

边框

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

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

背景

  • 样式：设置背景的样式，如普通、居中、拉伸等。
  • 图片链接：背景图片URL。
  • 颜色：设置背景的颜色。

高级设置

选中基本柱图组件，单击鼠标右键选择“高级设置”，可对柱状图进行标题、图例等配置。

图4 基本柱图效果图
  • 参考配色模板：系统默认提供两种可选柱图模板，单击即可切换样式。
    • 默认：按照数据进行排序展示。
    • 蓝色渐变不排序。

    可选择某一模板重置，也可通过设置各配置项得到想要的效果。

  • 数据系列：对每个数据系列（柱状条颜色、柱状条宽度、柱条边框圆角、数值显示）进行一系列配置。单击“+”，可添加数据系列。如何设置数据系列，请参见设置数据系列。
    • 通用柱状图颜色：选项为“单色”或“渐变色”，选择颜色可改变柱状条的颜色。
    • 定制柱条颜色：自定义柱状条颜色。
    • 柱形图宽度：柱状条宽度，默认为20px。
    • 柱条边框圆角：柱状条边框圆角设置，取值为“0”时为直角，“100”为圆角。
    • 数值显示：柱状条旁是否显示数值，开启后还可设置数值显示位置和数值颜色。
  • 数据统一配置：对数据进一步配置，例如是否光圈标记、数据是否进行排序、是否切换柱条显示为阶梯瀑布、是否柱条效果为横向显示（默认纵向显示）。具体配置效果，可以单击配置项查看组件样式变化。
    • 光圈标记：单条数据系列时才会显示该参数，表示是否进行光圈标记。开启后，柱状条上方会显示光圈和数值。
    • 数据排序：单条数据系列时才会显示该参数，表示是否对柱状条数据进行排序展示。
    • 阶梯瀑布显示：单条数据系列且打开数据排序时才会显示该参数，表示是否对柱状条数据进行阶梯瀑布显示。瀑布图常用于经营情况分析，解释从一个数字到另一个数字的变化过程。比如评估公司利润、比较产品收益、突出显示项目的预算变更、分析一段时间内的库存或销售情况 、显示一段时间内产品价值变化等。
      图5 阶梯瀑布效果
    • 横向柱条效果：是否开启横向柱条展示效果。
    • 堆叠显示（多数据系列效果）：多条数据系列时才会显示该参数，是否对多条数据系列数据进行堆叠显示。
  • X轴：X轴配置。
    • 坐标轴名称设置：包括名称文本内容、文本颜色、文字大小、名称与轴线间距及名称旋转设置。
    • 轴线设置：包括是否显示轴线、是否显示刻度、是否对轴数据进行反转、轴线颜色及轴文本颜色设置。
    • 网格线：是否显示轴网格线、轴网格线的类型和颜色设置。
    • 柱外间距：是否显示柱外间距。
    • 柱间距：是否显示柱内间距（当有多数据系列才可设置柱内间距，多数据系列的柱子之间的间距）。
    • 标签展示：字数过多是否换行及字数过多是否省略。X轴标签取值来源于数据模型中“dataX”字段取值。
    • 刻度标签间隔：刻度标签是否间隔展示，关闭后显示所有标签。
    • 刻度标签旋转的角度：刻度标签旋转角度设置。
  • Y轴：Y轴配置。
    • 坐标轴名称设置：包括名称文本内容、文本颜色、文字大小、名称与轴线间距及名称旋转设置。
    • 坐标轴最小间隔大小：坐标轴最小间隔大小，例如间隔500，则Y轴就是0、500、1000、1500依次间隔500进行分隔。
    • 轴线设置：包括是否显示轴线、是否显示刻度、是否对轴数据进行反转、轴线颜色及轴文本颜色设置。
    • 柱形阴影：是否显示柱形阴影、阴影颜色及是否显示数据。
    • 网格线：是否显示轴网格线、轴网格线的类型和颜色设置。
    • 轴最大值：轴最大阈值设置。
    • 刻度标签旋转的角度：刻度标签旋转角度设置。
  • 标题：设置组件的标题，支持设置标题的文本内容、文本位置、背景色、文本颜色、文本大小。
  • 图例：设置图例，支持设置图例小图标、图例左侧边距、图例上侧边距。图例文字内容来源于，数据模型“dataValue”中“title”取值。
  • 公共配置 > 显示总量：打开后，会显示数据总量。
  • 图表背景：设置图表的背景，可设置背景的颜色、四边圆角（取值为“0”时为直角，“100”为圆角）。

设置数据系列

  1. 选择基本柱图组件，单击鼠标右键选择“高级设置”。
  2. 展开数据系列配置，单击旁边的“+”，添加数据系列。

    图6 配置数据系列

  3. 在右侧“数据”页签，配置该数据系列的数据。

    例如，在使用系统预置的静态数据基础上，添加如下加粗字体代码，配置新增数据系列的数据。也可以使用“动态数据”调用后台接口URL返回如下结构模型数据。 
    {
	"resCode": "0",
	"resMsg": "成功",
	"result": [{
		"order": {
			"dataX": [
				"保洁",
				"安管",
				"工程",
				"绿化",
				"消杀",
				"特约"
			],
			"dataValue": [{
					"title": "工单总数",
					"value": [
						411,
						965,
						427,
						630,
						85,
						800
					]
				},
				{
					"title": "费用",
					"value": [
						500,
						1065,
						327,
						730,
						185,
						1000
					]
				}
			]
		}
	}]
}

  4. 配置添加的数据系列柱状条颜色、柱状条宽度、柱条边框圆角、数值是否显示，柱状图上显示的数值对应上述静态数据中的数值。
  5. 设置完成后，单击“确定”。

相关文档