常用组件对接文档
翻牌器
组件说明
翻牌器是指标组件的一种，支持自定义翻牌器的标题、数字、前缀、后缀样式，在可视化应用中用于展示实时数据的变化情况，通常单独用于热数据展示或与其他组件配合使用。
效果案例
数据格式
[
{
"name": "翻牌器标题",
"value": "1234.56"
}
]
字段映射
字段列表示组件所需的字段名称，映射列表示数据中将要匹配的字段。
在项目中，接入的数据存在情与组件并不匹配情况，在数据结构匹配，仅字段不匹配时，通过字段映射可以快速实现字段的匹配。
柱形图
组件说明
柱状图通过垂直柱子高度变化展示多维的数据差异，支持自定义y轴区间和多个系列的数据配置，常用于展示数据分布或趋势变化。
效果案例
数据格式
[
{
"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": "系列二"
}
]
字段映射
对数据有类型区分展示需求时，可以将数据划分成不同系列。
| 配置项 | 说明 |
|---|---|
| 映射 | 映射的字段名对应数据中的s系列字段，显示名是编辑页面中字段的变量名 |
| 纵轴选择 | 当有多个维度的数据需要展示时，支持对不同的系列选择不同轴向展示(前提：需同时开启Y、Z坐标轴)。 |
| 颜色 | 改变指定系列的颜色和纹理 |
| 极值选择 | 对基本柱状图中的同一系列的数据中的最大值(最小值)高亮 |
折线图
组件说明
基本面积图是折线图的一种，支持自定义y轴区间、多系列数据配置以及某个系列的数字提示框展示，以折线和区域相结合的方式，智能地展示多维的实时数据的变化趋势。
效果案例
数据格式
[
{
"x": "2010/01/01 00:00:00",
"y": 235,
"s": "系列一"
},
{
"x": "2010/02/01 00:00:00",
"y": 200,
"s": "系列一"
},
{
"x": "2010/03/01 00:00:00",
"y": 25,
"s": "系列一"
},
{
"x": "2010/04/01 00:00:00",
"y": 190,
"s": "系列一"
},
{
"x": "2010/05/01 00:00:00",
"y": 90,
"s": "系列一"
},
{
"x": "2010/06/01 00:00:00",
"y": 142,
"s": "系列一"
},
{
"x": "2010/07/01 00:00:00",
"y": 50,
"s": "系列一"
},
{
"x": "2010/08/01 00:00:00",
"y": 250,
"s": "系列一"
},
{
"x": "2010/09/01 00:00:00",
"y": 100,
"s": "系列一"
},
{
"x": "2010/10/01 00:00:00",
"y": 120,
"s": "系列一"
},
{
"x": "2010/11/01 00:00:00",
"y": 88,
"s": "系列一"
},
{
"x": "2010/12/01 00:00:00",
"y": 120,
"s": "系列一"
},
{
"x": "2010/01/01 00:00:00",
"y": 20,
"s": "系列二"
},
{
"x": "2010/02/01 00:00:00",
"y": 20,
"s": "系列二"
},
{
"x": "2010/03/01 00:00:00",
"y": 120,
"s": "系列二"
},
{
"x": "2010/04/01 00:00:00",
"y": 30,
"s": "系列二"
},
{
"x": "2010/05/01 00:00:00",
"y": 70,
"s": "系列二"
},
{
"x": "2010/06/01 00:00:00",
"y": 20,
"s": "系列二"
},
{
"x": "2010/07/01 00:00:00",
"y": 32,
"s": "系列二"
},
{
"x": "2010/08/01 00:00:00",
"y": 12,
"s": "系列二"
},
{
"x": "2010/09/01 00:00:00",
"y": 20,
"s": "系列二"
},
{
"x": "2010/10/01 00:00:00",
"y": 8,
"s": "系列二"
},
{
"x": "2010/11/01 00:00:00",
"y": 20,
"s": "系列二"
},
{
"x": "2010/12/01 00:00:00",
"y": 15,
"s": "系列二"
}
]
字段映射
| 字段 | 说明 |
|---|---|
| x | 类目，即x轴文本 |
| y | 值，即y轴数值 |
| s | 系列 |
在实际对接项目情况中，存在接口返回数据结构与我们组件结构不适配的情况。通常我们会使用过滤器来使接口数据来兼容我们组件数据结构。
例如： 接口返回下列格式，并且要求前端根据值大小排序
{
"res": [
{
"area": "北京",
"value": 200
},
{
"area": "武汉",
"value": 101
},
{
"area": "南京",
"value": 108
},
],
"status": "success"
}
过滤器如下
// data.res 参数data为静态参数或接口处理后的值，此处无其他过滤器，参照上图结构data.res取出数组项
// sort((r1,r2) => r1.value - r2.value).对数组进行从小到大排序
// map(o => ({ x: o.area, y: o.value, s: "系列一" })) 对数组数据进行map操作，按组件格式组装后返回即可
function filter(data, callbackArgs) {
return data.res.sort((r1,r2) => r1.value - r2.value).map(o => ({
x: o.area,
y: o.value,
s: "系列一"
}));
}
接口配置
接口请求设置
按照接口文档配置接口请求地址、请求方式、请求头、请求参数
接口响应
接口返回结果即为第一个过滤函数入参data值，返回结果不满足组件格式时，需要按照组件格式对数据进行处理。
