胶囊预测图
文档基于胶囊预测图v1.1.5版本
组件说明
胶囊预测图是条形图的一种,可显示某段时间内的数据变化或比较各项数据之间的差距，当维度分类较多或维度名称较长应选择条形图。
效果案例
*胶囊预测图 效果案例
一、样式
在样式中可以设置组件的基本属性、全局、图例、参考线、坐标轴、数据系列等。
1、基本属性
位置尺寸
位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。
尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。
*尺寸调整不影响组件内容显示、组件动画。
*组件位置尺寸说明
默认隐藏
勾选之后在初始加载时组件默认隐藏且关闭回调触发，通常用来配合显隐控制，如【选项卡】组件进行显隐切换。
2、全局样式
在全局中支持配置组件字体、柱子样式、边距、数值标签等样式。
字体
支持修改x、y轴的标签文本样式。
柱子样式
配置项 | 说明 |
胶囊间距 | 胶囊与外边框之间的间距 |
柱内间距 | 同一数据项，不同系列间的间距。 |
柱间间距 | 不同数据项的间距，取值范围0-1，柱子粗细根据柱间间距自适应 |
柱外间距 | 柱子与图表两侧的间距，取值范围0-1，柱子粗细根据柱外间距自适应 |
柱子背景 | 支持修改柱子的颜色 |
外框颜色 | 支持修改外边框的颜色 |
边距
胶囊预测图距离整个组件四边（上、下、左、右）的边距。
*边距样式说明
数值标签
数据值的标签
配置项 | 说明 |
后缀 | 支持编辑数值标签的后缀值 |
颜色 | 支持修改标签的颜色样式 |
字号 | 支持修改数值标签大小 |
*数值标签说明
3、图例
在图例中支持配置图例的文本和布局样式。
图例文本
支持修改图例的文本样式
图例布局
配置项 | 说明 |
自定义布局 | 支持设置网格线行、列自定义布局 |
间距 | 图文的间距 |
排列 | 图例的排列方式，支持配置水平和垂直排列 |
位置 | 图例的位置，支持右、上、下排列 |
对齐 | 图例的排列方式 |
*图例配置项说明
4、X轴
配置项 | 说明 |
文本 | 支持修改x轴标签的字号和颜色 |
轴标签 | 支持配置轴标签的最大最小值、标签数量和展示角度 |
轴单位 | 支持配置x轴的单位和偏移量调整 |
轴线 | 支持调整x轴的轴线颜色和粗细 |
刻度线 | 支持调整x轴的刻度线颜色和粗细 |
网格线 | 支持调整x轴网格线样式和颜色 |
*x轴配置项说明
5、y轴
配置项 | 说明 |
文本 | 支持修改y轴标签的字号和颜色 |
轴标签 | 支持配置轴标签的最大最小值、标签数量和展示角度 |
轴单位 | 支持配置y轴的单位和偏移量调整 |
轴线 | 支持调整y轴的轴线颜色和粗细 |
刻度线 | 支持调整y轴的刻度线颜色和粗细 |
网格线 | 支持调整y轴网格线样式和颜色 |
*y轴配置项说明
6、参考线
可在图中精确对齐物体的辅助线，用于与期望数值做对照，支持修改参考线样式和文本样式。
配置项 | 说明 |
参考值 | 支持自定义设置参考值和设置为最大值 |
参考线 | 支持修改参考线的颜色和样式 |
文本 | 支持修改参考值的名称和文本样式 |
*参考线配置项说明
7、数据系列
当图表数据存在多类型展示需求时，组件默认将数据划分成多个系列，用户可通过对各系列数据进行自定义数据映射，从而完成对每个系列配置相应样式。
其中，数据系列操作支持：
：增加一个系列数据
：删除一个系列数据
：调整系列的显示格式（纵向展示、横向展示）
数据系列
配置项 | 说明 |
系列值 | 系列值对应数据中的系列字段 |
系列名 | 显示名是编辑页面中字段的变量名 |
颜色 | 改变指定系列的区域值颜色 |
*系列 - 数据映射 字段名和显示名
二、数据
组件数据格式
字段 | 说明 |
x | 类目 |
y | 值 |
s | 系列 |
p | 预测值 |
*组件数据格式说明
JSON数据案例
[
{
"x": "2010/01/01 00:00:00",
"y": 375,
"s": "系列一"
},
{
"x": "2010/01/01 00:00:00",
"y": 180,
"s": "系列二"
},
{
"x": "2010/02/01 00:00:00",
"y": 200,
"s": "系列一"
},
{
"x": "2010/02/01 00:00:00",
"y": 100,
"s": "系列二"
},
{
"x": "2010/03/01 00:00:00",
"p": 25,
"s": "系列一"
},
{
"x": "2010/03/01 00:00:00",
"p": 125,
"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