斑马纹理柱状图

文档基于斑马纹理柱状图v1.4.1版本

组件说明

斑马纹理柱状图是基本柱状图的延伸,通过斑马状纹理给柱状图带来全新的样式体验。本身仍具备基本柱状图功能特性,可通过垂直柱子高度变化展示多维的数据差异,支持自定义y轴区间和多个系列的数据配置,常用于展示数据分布或趋势变化。

效果案例

*斑马纹理柱状图 效果案例

一、样式

在样式中可以设置组件的参考线基本属性全局坐标轴系列提示框

1、子组件管理

参考线

参考线子组件可以设置线样式和数据样式

样式

配置项

说明

纵轴选择

可选择Y轴或Z轴

边距

自定义设置参考线的边距范围

线样式

可选择实线或虚线

颜色

线样式的背景颜色和透明度

粗细

线样式的粗细

虚线样式

格式使用半角字符

数据样式

配置项

说明

标签内容

自定义填写标签内容

文本样式

参考线标签的字体样式

偏移

参考线标签的偏移位置

颜色

线样式的背景颜色和透明度

粗细

线样式的粗细

数值

设置参考线数据的文本样式和偏移


数据

组件数据格式

字段

说明

value

值,即参考线数值

*组件数据格式说明

JSON数据案例

[
	{
		"value": 125
	}
	
]

2、基本属性

位置尺寸

位置包括组件的横坐标纵坐标,单位为px;横坐标为组件左上角距离页面左边界的像素距离,纵坐标为组件左上角距离页面上边界的像素距离。

尺寸包括组件的宽度高度,单位为px;可单击比例锁锁定组件宽高比,等比例调整组件的宽高,比例锁默认不锁定。

基本柱状图组件尺寸不影响组件内容显示、组件动画。

*组件位置尺寸说明


默认隐藏

勾选之后在初始加载时组件默认隐藏且关闭回调触发,通常用来配合显隐控制,如【选项卡】组件进行显隐切换。


3、全局

边距

基本柱状图表距离整个组件四边(上、下、左、右)的边距

*边距样式说明

柱状样式

配置项

说明

柱状类型

柱子样式,可选择方形子弹头

系列间距

柱子间不同系列的间距,取值范围0-1,柱子粗细根据柱间间距自适应

柱间间距

每组柱子间的间距,取值范围0-1,柱子粗细根据柱间间距自适应

外间距

柱子与图表两侧的间距,取值范围0-1,柱子粗细根据柱外间距自适应

柱子背景

柱子的背景颜色、透明度

*柱间距说明

图例

在图例中可以调整组件的文本样式图标尺寸间距布局点击交互未选中样式

a. 文本样式

可对文本样式按需修改


b. 图标尺寸

自定义图例图标尺寸,斑马纹理图默认斑马样式。


c. 间距

调整图例图标文字之间的间距

d. 布局

布局中支持进一步调整图例列数间距位置偏移

配置项

说明

列数

图例的列数

间距

图例之间的行距以及列距

位置

图例的展示位置

偏移

通过x轴和y轴控制偏移量

e.【补充动图】点击交互

开启点击交互后,可通过点击标签筛选并显示对应数据,关闭该功能后无法进行点击交互。

同时,可在未选中样式中配置透明度来区分未选中时的样式。

*点击交互 - 未选中样式

轮播动画

默认未开启状态,开启后轴标签横向滚动效果。


数据动画

【补充动图】默认未开启状态,开启后 首次加载和数据变化时会模拟加载动画效果。

4、坐标轴

组件坐标轴分为x轴、y轴、z轴,可通过启用来控制是否开启某一轴的数据。

如下图所示,当取消开启x轴后可以看到x轴和x轴的相关配置项消失。

*启用x轴

X轴

通过启用控制X轴显隐,可通过轴标签轴线刻度网格线进行坐标轴样式配置:

配置项

说明

轴标签

X轴的轴标签格式、文本样式、展示方式和偏移量

轴线

X轴的轴线颜色和粗细

刻度

X轴的刻度线的颜色、粗细、长度

网格线

X轴的网格线虚线样式、颜色、粗细

其中,X轴标签分为类目型时间型两个不同维度:

类目型:以类目为单位,标签名由数据源提供。

时间型:以时间为单位,如“2017-1-1”、“2017年01月01日”等,如下图

Y轴

通过启用控制Y轴显隐,可通过轴标签轴单位轴线刻度网格线进行坐标轴样式配置:

配置项

说明

轴标签

Y轴轴标签配置,包括数据范围、刻度模式、文本样式、数据格式化、后缀内容和偏移量

轴单位

Y轴轴标签的单位,可调整单位内容、偏移量和文字样式

轴线

Y轴的轴线,支持修改颜色和粗细

刻度

Y轴的刻度线,可调整刻度线的颜色、粗细、长度

网格线

Y轴的网格线样式

其中,Y轴标签支持以下刻度配置:

数值范围支持自定义输入,也支持系统选择,置空时系统根据数据中的最大/小值和指标点的个数自动计算;

标签刻度支持开启刻度自适应或设置数量强制步长强制,非自适应情况下可自定义编辑标签、步长数量及小数位数;


Z轴

通过启用控制Z轴显隐,可通过轴标签轴单位轴线刻度网格线进行坐标轴样式配置:

配置项

说明

轴标签

Z轴标签配置,包括数据范围、刻度模式、文本样式、数据格式化、后缀内容和偏移量

轴单位

Z轴轴标签的单位,可调整单位内容、偏移量和文字样式

轴线

Z轴的轴线,支持修改颜色和粗细

刻度

Z轴的刻度线,可调整刻度线的颜色、粗细、长度

网格线

Z轴的网格线样式

其中,Z轴标签同样支持以下配置:

数值范围支持自定义输入,也支持系统选择,置空时系统根据数据中的最大/小值和指标点的个数自动计算;

标签刻度支持开启刻度自适应或设置数量强制步长强制,非自适应情况下可自定义编辑标签、步长数量及小数位数;


5、系列

当图表数据存在多类型展示需求时,组件默认将数据划分成多个系列,用户可通过对各系列数据进行自定义数据映射,从而完成对每个系列配置相应样式。

其中,数据系列操作支持:

:增加一个系列数据

:删除一个系列数据

:调整系列的显示格式(纵向展示、横向展示)

数据系列

配置项

说明

映射

映射中字段名对应数据中的系列字段,显示名是编辑页面中字段的变量名

纵轴选择

选择当前系列对应的纵轴Y轴/Z轴

颜色

斑马纹理颜色样式

纹理类型

柱状斑马纹理类型可选默认和自定义

纹理宽度

柱状斑马纹理宽度大小样式

纹理高度

柱状斑马纹理高度大小样式

极值高亮

极值高亮样式,包括选择极值最大值/最小值,颜色样式

*系列 - 数据映射 字段名和显示名

数值标签

柱子数据值的标签

配置项

说明

文本样式

数值标签的文本字体、字号、颜色、透明度、间距等

偏移

数值标签的数字与柱子的偏移距离,数值越大,距离越远

*数值标签样式说明


6、提示框

自动轮播

默认未开启,开启下提示框按轴标签横向轮播。

悬停触发

支持鼠标焦点移入到对应的数据点后会显示当前对应的数据提示框。

*悬停触发 提示框效果


提示框

提示框整体分为两部分,提示框样式框内数据

组成

说明

提示框样式

提示框的样式,支持调整提示框的背景、尺寸、边距和偏移量

框内数据

提示框内的数据,支持修改标签、行高、数据的文字样式

行高

提示框内每个数据值间的行高

a

*框内数据 对应样式配置


二、数据

组件数据格式

字段

说明

x

类目,即x轴文本

y

值,即y轴数值

s

系列

*组件数据格式说明


JSON数据案例

[
	{
		"x": "2010/01/01 00:00:00",
		"y": 5,
		"s": "系列一"
	},
	{
		"x": "2010/02/01 00:00:00",
		"y": 20,
		"s": "系列一"
	},
	{
		"x": "2010/03/01 00:00:00",
		"y": 8,
		"s": "系列一"
	},
	{
		"x": "2010/04/01 00:00:00",
		"y": 13,
		"s": "系列一"
	},
	{
		"x": "2010/05/01 00:00:00",
		"y": 6,
		"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







400-8505-905复制
免费试用
在线咨询
微信社区
易知微-数据可视化
微信扫一扫入群