堆叠柱状图
文档基于堆叠柱状图v1.6.1版本
组件说明
堆叠柱状图是柱状图的一种,通过将每个柱子进行分割以显示相同类型下各个数据的大小情况,支持自定义y轴区间、多系列数据配置以及堆叠式的数据展示。
效果案例
*堆叠柱状图 效果案例
一、样式
在样式中可以设置组件的参考线、基本属性、全局、坐标轴、系列和提示框。
1、子组件管理
参考线
参考线子组件可以设置线样式和数据样式
样式
配置项 | 说明 |
纵轴选择 | 可选择X轴或Y轴或Z轴 |
边距 | 自定义设置参考线的边距范围 |
线样式 | 可选择实线或虚线 |
颜色 | 线样式的背景颜色和透明度 |
粗细 | 线样式的粗细 |
虚线样式 | 格式使用半角字符 |
数据样式
配置项 | 说明 |
标签内容 | 自定义填写标签内容 |
文本样式 | 参考线标签的字体样式 |
偏移 | 参考线标签的偏移位置 |
颜色 | 线样式的背景颜色和透明度 |
粗细 | 线样式的粗细 |
数值 | 设置参考线数据的文本样式和偏移 |
数据
组件数据格式
字段 | 说明 |
value | 值,即参考线数值 |
*组件数据格式说明
JSON数据案例
[
{
"value": 125
}
]
2、基本属性
位置尺寸
位置包括组件的横坐标和纵坐标,单位为px;横坐标为组件左上角距离页面左边界的像素距离,纵坐标为组件左上角距离页面上边界的像素距离。
尺寸包括组件的宽度和高度,单位为px;可单击比例锁锁定组件宽高比,等比例调整组件的宽高,比例锁默认不锁定。
基本柱状图组件尺寸不影响组件内容显示、组件动画。
*组件位置尺寸说明
默认隐藏
勾选之后在初始加载时组件默认隐藏且关闭回调触发,通常用来配合显隐控制,如【选项卡】组件进行显隐切换。
3、全局
边距
基本柱状图表距离整个组件四边(上、下、左、右)的边距。
*边距样式说明
柱状样式
配置项 | 说明 |
柱状类型 | 柱子样式,可选择方形或子弹头 |
系列间距 | 柱子间不同系列的间距,取值范围0-1,柱子粗细根据柱间间距自适应 |
柱间间距 | 每组柱子间的间距,取值范围0-1,柱子粗细根据柱间间距自适应 |
外间距 | 柱子与图表两侧的间距,取值范围0-1,柱子粗细根据柱外间距自适应 |
柱子背景 | 柱子的背景颜色、透明度 |
*柱间距说明
图例
配置项 | 说明 |
文本样式 | 图例的文本字体、字号、颜色、透明度、间距等 |
图标尺寸 | 图例的宽高尺寸 |
间距 | 图文的间距 |
布局 | 图例的布局方式,支持修改行列数、间距、九宫格排布、偏移量 |
点击交互 | 开启后可对单个系列值进行显示隐藏操作 |
未选中样式 | 修改未选中图例的透明度 |
*点击交互配置项说明
轮播动画
开启后图表数据进行轮播,可设置滚动时长和动画间隔。
数据动画
开启后首次加载和数据变化时会加载动画效果。
4、坐标轴
X轴
支持对柱状图的x轴显隐、样式编辑
配置项 | 说明 |
轴标签 | X轴的轴标签,可调整格式、文本样式、展示方式和偏移量 |
轴线 | X轴的轴线颜色和粗细 |
刻度 | X轴的刻度线的颜色、粗细、长度 |
网格线 | X轴的网格线样式、颜色、粗细 |
*X轴轴标签样式说明
Y轴
支持对柱状图的y轴显隐、样式编辑
配置项 | 说明 |
轴标签 | y轴数值范围,支持自定义输入,也支持系统选择,置空时系统根据数据中的最大、最小值或其百分比和指标点的个数自动计算; 标签刻度支持自适应和数量强制或步长强制,非自适应情况下可编辑标签和步长数量,小数点位数; 支持修改后缀内容、偏移和文本样式。 |
轴单位 | Y轴轴标签的单位,可调整单位内容、偏移量和文字样式 |
轴线 | Y轴的轴线,支持修改颜色和粗细 |
刻度 | Y轴的刻度线,可调整刻度线的颜色、粗细、长度 |
网格线 | Y轴的网格线样式、颜色、粗细 |
*Y轴轴标签样式说明
Z轴
支持对柱状图的Z轴显隐、样式编辑
配置项 | 说明 |
轴标签 | Z轴数值范围,支持自定义输入,也支持系统选择,置空时系统根据数据中的最大最小值和指标点的个数自动计算; 标签刻度支持自适应或数量强制和步长强制,非自适应情况下可编辑标签和步长数量,小数点位数; 支持修改后缀内容、偏移和文本样式。 |
轴单位 | Z轴轴标签的单位,可调整单位内容、偏移量和文字样式 |
轴线 | Z轴的轴线,支持修改颜色和粗细 |
刻度 | Z轴的刻度线,可调整刻度线的颜色、粗细、长度 |
网格线 | Z轴的网格线样式 |
*Z轴轴标签样式说明
5、系列
数据系列
对数据有类型区分展示需求时,可以将数据划分成不同系列。
配置项 | 说明 |
映射 | 映射的字段名对应数据中的s系列字段,显示名是编辑页面中字段的变量名 |
纵轴选择 | 当有多个维度的数据需要展示时,支持对不同的系列选择不同轴向展示(前提:需同时开启Y、Z坐标轴)。 |
填充样式 | 改变指定系列的颜色、纹理 |
极值选择 | 对基本柱状图中的同一系列的数据中的最大值(最小值)高亮 |
头部装饰 | 上传图片可添加头部装饰,支持设置其尺寸和偏移 |
*数据系列配置项说明
数值标签
柱子内数据值的标签配置项。
配置项 | 说明 |
文本样式 | 数值标签的文本字体、字号、颜色、透明度、间距等 |
位置 | 数值标签显示位置,支持起点、居中、终点、终点外、图表外 |
偏移 | 数值标签的数字与柱子的偏移距离,数值越大,距离越远 |
后缀 | 数值后面可以添加后缀,支持对后缀的文本字体、字号、颜色、透明度进行设置。 |
*数值标签样式说明
6、提示框
自动轮播
启用后提示框进行自动轮播,可设置停留时间。
悬停触发
鼠标悬浮到对应系列上时,显示提示框。
提示框
字段 | 说明 |
提示框样式 | 柱状图的提示框,支持调整提示框的背景、尺寸、边距和偏移量 |
行高 | 每个数据值间的行高 |
框内数据 | 提示框内的数据,支持修改X轴标签、数据名称、数据值的文字样式 |
背景 | 可以上传图片设置提示框的背景 |
*提示框配置项说明
指示器
提示的高亮区域,支持修改颜色和宽度。
*指示器配置项说明
二、数据
组件数据格式
字段 | 说明 |
x | 类目,即x轴文本 |
y | 值,即y轴数值 |
s | 系列 |
*组件数据格式说明
JSON数据案例
[
{
"x": "2010/01/01 00:00:00",
"y": 180,
"s": "系列一"
},
{
"x": "2010/01/01 00:00:00",
"y": 320,
"s": "系列二"
},
{
"x": "2010/02/01 00:00:00",
"y": 200,
"s": "系列一"
},
{
"x": "2010/02/01 00:00:00",
"y": 120,
"s": "系列二"
},
{
"x": "2010/03/01 00:00:00",
"y": 160,
"s": "系列一"
},
{
"x": "2010/03/01 00:00:00",
"y": 180,
"s": "系列二"
},
{
"x": "2010/04/01 00:00:00",
"y": 200,
"s": "系列一"
},
{
"x": "2010/04/01 00:00:00",
"y": 160,
"s": "系列二"
},
{
"x": "2010/05/01 00:00:00",
"y": 180,
"s": "系列一"
},
{
"x": "2010/05/01 00:00:00",
"y": 220,
"s": "系列二"
},
{
"x": "2010/06/01 00:00:00",
"y": 180,
"s": "系列一"
},
{
"x": "2010/06/01 00:00:00",
"y": 220,
"s": "系列二"
}
]
数据配置项说明
配置项 | 说明 |
数据源 | 数据源类型、数据源选择等 |
数据过滤器 | 勾选启用数据过滤器,单击添加过滤器,可在设置数据源页面中配置数据过滤器,详情请参见数据过滤器使用说明 |
数据响应结果 | 展示数据请求的响应结果 |
自动更新 | 选中后可以设置数据请求时间间隔 |
数据对接详情
数据对接详情请见以下文档👇
三、交互
载入动画
所有组件均提供移入、移入(小)、划变三种组件载入动画。
载入动画选择无时,则组件没有载入动画。
载入动画仅在可视化应用预览、发布组件加载时显示。
载入动画配置项:
配置项 | 说明 |
渐隐渐显 | 启用是 |
速率 | 匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、低速开始、低速结束、低速开始和结束(cubic-bezier(0.42,0,0.58,1)) |
方向 | 动画方向 |
持续时间 | 载入动画持续时间,单位为ms |
延时 | 载入动画延时长,单位为ms |
回调参数
回调参数即为全局性的参数变量,用于控制组件之间参数的传递,可通过设置回调参数来实现数据驱动交互。
其中,字段值即参数变量,变量名即对字段值的重命名。
详细的回调参数教学👉 回调的使用
自定义事件
自定义事件为「交互事件」的增强模块,支持通过数据驱动组件状态、或变更组件样式配置,也可自定义编辑复杂的条件逻辑;
详细的自定义事件教学👉自定义事件教学
欢迎您在评论区留下您对该组件的意见,管理员会及时回复您,如长时间未回复欢迎您搜索钉钉群:33782396或者扫描以下二维码添加微信群 说出您的想法,采纳后将送出定制礼品。
也可以通过问卷来向我们反馈需求:https://jinshuju.net/f/XyCXU0