轮播排行条形图

文档基于轮播排行条形图v1.1.4版本

组件说明

轮播排行条形图以排行条形图的方式展示数据，同时以轮播的效果动态展示数据排行效果。

效果案例

*轮播排行条形图 效果案例

一、样式

在样式中可以设置组件的基本属性、全局、序号、字段和系列。

1、基本属性

位置尺寸

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

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

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

*组件位置尺寸说明

默认隐藏

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

2、全局

自动排序

排序

可以根据此选择升序还是降序

显示行数

可以控制前端显示的行数

轮播动画

动画类型可以选择 翻页和水平切换；

持续时间可以更改动画的持续时间；

间隔时间可以更改每个动画之间的间隔时间；

3、序号

序号类型

可以选择文字或者图片类型：选中文字即可修改文字的样式、前缀；图片可以在样式这里修改图片类型；

宽度

可以修改序号的宽度大小；

对齐方式

可以局左、居中、局右对齐；

偏移

可以在偏移这儿自定义修改XY偏移

4、字段

可以在字段中进行添加轮播排行条形图的字段；字段与数据相对应

字段名可以任意修改，只需要与数据中的字段名相同即可；

类型可以选择“类目、柱子、数值”

其他的样式可以根据已提供的各项参数进行修改

5、系列

系列名与数据中的“s”相对应，系列名与s相同即可显示对应颜色；

柱状颜色可以修改该系列的柱子的颜色

二、数据

组件数据格式

*组件数据格式说明

JSON数据案例

[
	{
		"text": "哈尔滨",
		"value": 1200,
		"s": "系列一",
		"index": 1
	},
	{
		"text": "北京",
		"value": 900,
		"s": "系列二",
		"index": 2
	},
	{
		"text": "马鞍山",
		"value": 670,
		"s": "系列三",
		"index": 3
	},
	{
		"text": "合肥",
		"value": 530,
		"s": "系列三",
		"index": 4
	},
	{
		"text": "昆明",
		"value": 490,
		"s": "系列三",
		"index": 5
	},
	{
		"text": "六盘水",
		"value": 320,
		"s": "系列二",
		"index": 6
	},
	{
		"text": "西安",
		"value": 120,
		"s": "系列二",
		"index": 7
	},
	{
		"text": "秦皇岛",
		"value": 50,
		"s": "系列二",
		"index": 8
	}
]

数据配置项说明

数据对接详情

数据对接详情请见以下文档👇

项目交付——数据对接入门

三、交互

当前组件通过载入动画、回调参数、自定义事件三种方式设置组件交互。

载入动画

所有组件均提供移入、移入(小)、划变三种组件载入动画。

载入动画选择无时，则组件没有载入动画。

载入动画仅在可视化应用预览、发布组件加载时显示。

回调参数

回调参数即为全局性的参数变量，用于控制组件之间参数的传递，可通过设置回调参数来实现数据驱动交互。

其中，字段值即参数变量，变量名即对字段值的重命名。

详细的回调参数教学👉 回调的使用

自定义事件

自定义事件为「交互事件」的增强模块，支持通过数据驱动组件状态、或变更组件样式配置，也可自定义编辑复杂的条件逻辑；

详细的自定义事件教学👉自定义事件教学

视频教程

欢迎您在评论区留下您对该组件的意见，管理员会及时回复您，如长时间未回复欢迎您搜索钉钉群：33782396或者扫描以下二维码添加微信群 说出您的想法，采纳后将送出定制礼品。

也可以通过问卷来向我们反馈需求：https://jinshuju.net/f/XyCXU0