更新时间：2024-07-11 GMT+08:00
基本柱图
基本柱图组件用于实现柱状图的图表统计。
在高级页面设计器中，单击
，从“图表 > 柱状图”中，拖拽“基本柱图”组件到画布中，如图1所示。
属性
在属性中，设置基本柱图组件的位置、边框、背景等。
图2 属性
- 基础
- 组件标题：设置组件的标题。
- 组件名称：设置组件的名称。
- 位置
- 距离左端：组件到页面左侧的距离，单位为px。
- 距离顶端：组件到页面顶部的距离，单位为px。
- 宽度：组件的宽度，单位为px。
- 高度：组件的高度，单位为px。
- 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。
- 自适应高度：组件的高度是否随宽度改变。
- 边框：设置组件的边框样式，如全边框或角边框。
- 背景
- 样式：设置背景的样式，如普通、居中、拉伸等。
- 图片链接：背景图片URL。
- 颜色：设置背景的颜色。
高级设置
选中基本柱图组件，单击鼠标右键选择“高级设置”，可对柱状图进行多种配置。
图3 基本柱图效果图
- 参考配色模板：系统默认提供两种可选柱图模板，单击即可切换样式。
- 默认：按照数据进行排序展示。
- 蓝色渐变不排序。
可选择某一模板重置，也可通过设置各配置项得到想要的效果。
- 数据系列：对每个数据系列（柱状条颜色、柱状条宽度、柱条边框圆角、数值显示）进行一系列配置。单击“+”，可添加数据系列。如何设置数据系列，请参见如何设置数据系列。
- 通用柱状图颜色：选项为“单色”或“渐变色”，选择颜色可改变柱状条的颜色。
- 定制柱条颜色：自定义柱状条颜色。
- 柱形图宽度：柱状条宽度，默认为20px。
- 柱条边框圆角：柱状条边框圆角设置，取值为“0”时为直角，“100”为圆角。
- 数值显示：柱状条旁是否显示数值，开启后还可设置数值显示位置和数值颜色。
- 数据统一配置：对数据进一步配置，例如是否光圈标记、数据是否进行排序、是否切换柱条显示为阶梯瀑布、是否柱条效果为横向显示（默认纵向显示）。具体配置效果，可以单击配置项查看组件样式变化。
- 光圈标记：单条数据系列时才会显示该参数，表示是否进行光圈标记。开启后，柱状条上方会显示光圈和数值。
- 数据排序：单条数据系列时才会显示该参数，表示是否对柱状条数据进行排序展示。
- 阶梯瀑布显示：单条数据系列且打开数据排序时才会显示该参数，表示是否对柱状条数据进行阶梯瀑布显示。瀑布图常用于经营情况分析，解释从一个数字到另一个数字的变化过程。比如评估公司利润、比较产品收益、突出显示项目的预算变更、分析一段时间内的库存或销售情况 、显示一段时间内产品价值变化等。
图4 阶梯瀑布效果
- 横向柱条效果：是否开启横向柱条展示效果。
- 堆叠显示（多数据系列效果）：多条数据系列时才会显示该参数，是否对多条数据系列数据进行堆叠显示。
- X轴：X轴配置。
- 坐标轴名称设置：包括名称文本内容、文本颜色、文字大小、名称与轴线间距及名称旋转设置。
- 轴线设置：包括是否显示轴线、是否显示刻度、是否对轴数据进行反转、轴线颜色及轴文本颜色设置。
- 网格线：是否显示轴网格线、轴网格线的类型和颜色设置。
- 柱外间距：是否显示柱外间距。
- 柱间距：是否显示柱内间距（当有多数据系列才可设置柱内间距，多数据系列的柱子之间的间距）。
- 标签展示：字数过多是否换行及字数过多是否省略。X轴标签取值来源于数据模型中“dataX”字段取值。
- 刻度标签间隔：刻度标签是否间隔展示，关闭后显示所有标签。
- 刻度标签旋转的角度：刻度标签旋转角度设置。
- Y轴：Y轴配置。
- 坐标轴名称设置：包括名称文本内容、文本颜色、文字大小、名称与轴线间距及名称旋转设置。
- 坐标轴最小间隔大小：坐标轴最小间隔大小，例如间隔500，则Y轴就是0、500、1000、1500依次间隔500进行分隔。
- 轴线设置：包括是否显示轴线、是否显示刻度、是否对轴数据进行反转、轴线颜色及轴文本颜色设置。
- 柱形阴影：是否显示柱形阴影、阴影颜色及是否显示数据。
- 网格线：是否显示轴网格线、轴网格线的类型和颜色设置。
- 轴最大值：轴最大阈值设置。
- 刻度标签旋转的角度：刻度标签旋转角度设置。
- 标题：设置组件的标题，支持设置标题的文本内容、文本位置、背景色、文本颜色、文本大小。
- 图例：设置图例，支持设置图例小图标、图例左侧边距、图例上侧边距。图例文字内容来源于，数据模型“dataValue”中“title”取值。
- 公共配置/显示总量：打开后，会显示数据总量。
- 图表背景：设置图表的背景，可设置背景的颜色、四边圆角（取值为“0”时为直角，“100”为圆角）。
如何设置数据系列
- 选择基本柱图组件，单击鼠标右键选择“高级设置”。
- 展开数据系列配置，单击旁边的“+”，添加数据系列。
图5 配置数据系列
- 在右侧“数据”页签，配置该数据系列的数据。
例如，在使用系统预置的静态数据基础上，添加如下加粗代码，配置新增数据系列的数据。也可以使用“动态数据”调用后台接口URL返回如下结构模型数据。
{ "resCode": "0", "resMsg": "成功", "result": [{ "order": { "dataX": [ "保洁", "安管", "工程", "绿化", "消杀", "特约" ], "dataValue": [{ "title": "工单总数", "value": [ 411, 965, 427, 630, 85, 800 ] }, { "title": "费用", "value": [ 500, 1065, 327, 730, 185, 1000 ] } ] } }] } - 配置添加的数据系列柱状条颜色、柱状条宽度、柱条边框圆角、数值是否显示，柱状图上显示的数值对应上述静态数据中的数值。
- 设置完成后，单击“确定”。
父主题： 全局高级组件
