基本柱状图
文档基于基本柱状图v1.6.2版本
组件说明
基本柱状图通过垂直柱子高度变化展示多维的数据差异，支持自定义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