更新时间:2022-04-26 GMT+08:00
分享

折柱图

折柱图是柱状图的一种,通过折线和柱状图相结合的方式,将数据信息以折柱图的形式清晰地展示在可视化应用上。

属性配置

在设计页面左侧从“全部组件 > 图表”中拖拽折柱图至设计页面右侧空白处。在页面中选中该组件,单击组件上方图标,配置组件属性,公共属性参数说明请参考组件公共属性说明

图1 折柱图效果图
表1 折柱图配置参数说明

所属图标

参数名

说明

卡片图标

参考模板

系统默认的折柱图模板。

图形-统一配置

水平堆叠

是否堆叠显示(多数据系列效果)。

横向柱条

是否横向柱条效果显示。

图形-数据系列1

柱条宽度

柱状条相对于X轴单位间隔的宽度。

柱条颜色

可自定义柱状条颜色。选项为“单色”或“渐变色”。选择颜色可改变柱状条的颜色。

定制最大柱条

支持对最大的柱条自定义设置,包括颜色等。

柱子圆角

柱状条边框圆角设置,取值为“0”时为直角,“100”为圆角。

数据标签

是否显示数据标签。即柱状条旁是否显示数值,开启后还可设置数值显示位置和数值颜色。

数据标签最大值/最小值

是否显示柱状条数值的最大值或者最小值。

数据系列的类型

可设置为“柱状”或“折线”。

选取对照哪边的y轴

可设置为“左边y轴”或“右边y轴”。

图形-数据系列2

折线宽度

折线的宽度。

定制最大拐点

是否自定义最大拐点的样式。打开该开关后需要设置最大拐点的颜色。

数据标签

是否显示数据标签。即折线旁是否显示数值,开启后还可设置数值显示位置和数值颜色。

数据标签最大值/最小值

是否显示折线数值的最大值或者最小值。

数据系列的类型

可设置为“柱状”或“折线”。

选取对照哪边的y轴

可设置为“左边y轴”或“右边y轴”。

图例

显示图例

是否展示图例。

文字内容来源于数据模型“dataValue”中“title”取值。

图例标记

包括以下设置:

  • 图例小图标形状,如圆形、矩形、菱形。
  • 图例列表布局朝向:图例列表布局的朝向,如水平、垂直。

图例宽高

图例的宽度高度。

字体

图例文本颜色、字体、大小设置。

左间距

图例到饼图组件左侧距离占组件高度的百分比或图例位置的对齐方式设置。

上间距

图例到饼图组件顶部距离占组件高度。

翻页按钮

翻页按钮的颜色。

翻页按钮不激活

翻页按钮不激活时的颜色。

坐标轴-x轴

x轴

是否显示x轴。

轴标题

坐标轴标题。

字体

坐标轴字体。

标题偏移

标题相对于轴线的偏移。

标题旋转

标题旋转角度。

轴线

是否显示轴线。显示后需要设置轴线颜色。

刻度

是否显示刻度。

刻度标签

刻度标签样式。包括是否自动调节标签、显示所有标签。

标签行为

标签字数过多时是否进行处理,包括字数过多是否换行、字数过多是否省略。

标签旋转

标签旋转角度。

网格线

是否显示网格线。

反转

是否对轴数据进行反转。

坐标轴-y轴

y轴

是否显示y轴。

轴标题

坐标轴标题。

字体

坐标轴字体。

标题偏移

标题相对于轴线的偏移。

标题旋转

标题旋转角度。

轴线

是否显示轴线。显示后需要设置轴线颜色。

刻度

是否显示刻度。

刻度标签

刻度标签样式。包括是否自动调节标签、显示所有标签。

最小间隔

坐标轴最小间隔大小。

标签旋转

标签旋转角度。

网格线

是否显示网格线。

是否设置轴最大值

是否设置轴最大值。

打开后,直接输入阈值。

反转

是否对轴数据进行反转。

指标

显示指标

是否展示指标。

数据配置

  1. 选中该组件,在组件上方单击,配置组件数据源。
  2. 配置数据系列的数据,单击“保存”。

    在使用系统预置的静态数据基础上,添加如下标红字体代码,配置新增数据系列的数据。
    {
        "resCode": "0",
        "resMsg": "成功",
        "result": [
            {
                "order": {
                    "dataX": [
                        "Mon",
                        "Tue",
                        "Wed",
                        "Thu",
                        "Fri",
                        "Sat"
                    ],
                    "dataValue": [
                        {
                            "title": "降雨量",
                            "value": [
                                311,
                                465,
                                927,
                                630,
                                65,
                                800
                            ]
                        },
                        {
                            "title": "温度",
                            "value": [
                                36,
                                26,
                                15,
                                32,
                                42,
                                26
                            ]
                        },
                        {
                            "title": "湿度",
                            "value": [
                                500,
                                440,
                                330,
                                220,
                                110,
                                100
                            ]
                        }
                    ]
                }
            }
        ]
    }

分享:

    相关文档

    相关产品

close