如今，互联网的飞速发展让我们逐步迈入了大数据的时代。不管是对于大企业的精准营销，还是对于小微企业的服务转型都具备重要作用，成本低、效率高、信息含量大是大数据超越计算机处理信息的优势。
但目前，很多企业或多或少地面临“信息孤岛”问题，各个系统平台之间的数据无法实现互通共享，难以实现一体化的数据分析和实时呈现。相较于传统人工的图表与数据仪表盘，数据可视化大屏平台的出现，可以打破数据分散的问题，通过数据采集、清晰、分析到直观实时的数据可视化展现，能多方位、多角度、多场景地展现各项指标，根据实时的监控数据，大屏清晰地呈现自己想要看到的数据，同时做出精准的决策调整。
以我们易知微自主研发的EasyV数字孪生可视化平台为例，开箱即用，可灵活、高效、快捷地搭建专业且炫酷的可视化大屏，覆盖了企业汇报、客户参观、指挥监控中心等场景。在日常可视化大屏项目实施交付过程中，我们沉淀了宝贵经验，
本期将针针对「大屏数据接入」做干货分享，并列举了一些数据接入的最佳实践，以此来规范接口的数据格式，助你高效快速地实现可视化大屏落地。
大屏的数据接入是在落地项目中至关重要的一步，该项工作可以被分为两部分：
数据准备与数据对接。
所谓数据准备，是指大屏原型稿已确认， 后端开发或者数据开发就可以根据原型来开发对应的接口/SQL语句了。而数据对接，指的是大屏搭建完毕后，前端开发人员为大屏接入相应的数据。由于数据接入的工作是由两部分人在不同的阶段来进行的，会导致后端开发的接口可能无法满足前端的需求，或者即使能满足需求，也存在一些问题，最终导致后端可能需要重新开发接口，造成重复工作。
01数据准备
大屏中使用的数据来源一般分为两种，一种是接口，另一种是数据库，两种方式的准备思路一致，表现形式上会稍有区分。
1、数据库：
select * from table_aa where type = ':type' --此处的 :type 即是后续提到的入参
数据在数据库中的样式：
column1
column2
1234
aaaa
2345
bbbb
对应数据在前端的表现形式：
[
{ // 数据库中的一行
column1: 1234, // 一行中的某列
column2: "aaaa" // 一行中的某列
},
{ // 数据库中的一行
column2: 2345, // 一行中的某列
column2: "bbbb" // 一行中的某列
}
]
2、接口：
常规的API接口，路径、headers、body 都可动态传入，反参可以是更复杂的多层嵌套数据结构。
02纯展示类数据
这类数据是指那些不会发生任何变化的数据，比如一些指标数据，或者地图的点位、路线数据，在整个大屏的演示过程中，其值都不会被修改。通常，这类数据不会很多，所以我们可以通过一个接口，来返回所有这样的数据，比如下面这个大屏：
大屏中存在6条纯展示类数据，分别是3条翻牌器数据，1条单值占比图数据，2条地图路径数据，以此分类，我们可以将静态数据整理成如下结构：
[
{
"Indicator": {
"a": "123",
"b": "456",
"c": "789"
},
"percent": {
"num1": 0.37
},
"path": {
"path1": [],
"path2": []
}
}
]
当然，如果纯展示类数据量比较大，还是建议根据其功能来划分为多个接口。以上面的大屏为例，我们可以改为通过3个接口来获取这三种数据，而不是在一个接口中将他们一次性返回。
03动态改变的数据
案例一
还是以上面的大屏为例，现在我将需求改成这样：当地图下钻到浙江省时，单值占比图需要展示浙江省的a指标，三个翻牌器需要展示浙江省内，b指标排名前三的市（包含市区名称和指标值），那么根据这个需求，我们就可以确定两个接口了。
1.某个省份的a指标
入参： adcode=330000 //adcode是指每个省的唯一编码，全国adcode值可参考https://a.amap.com/lbs/static/amap_3dmap_lite/AMap_adcode_citycode.zip
出参：
[{
value:123 //浙江省a指标的值
}]
2.某个省份内b指标排名前三的市（包含市区名称和指标值）
入参：
adcode=330000
出参:
[
{
name:"杭州市", //市名称
value:123 //指标值
},
{
name:"宁波市",
value:123
},
{
name:"温州市",
value:123
}
]
对于第二个接口，我们在大屏中可以通过下面这种方式来对接数据
1、在翻牌器组件中添加一个字段（index），用于标识展示第几名的数据
2、用数据容器获取排名数据，然后给数据容器添加回调变量名（test）
3、编写如下过滤器，接收数据容器的回调，读取翻牌器自带的字段index，根据index来获取对应的数据
const { test=[] } = callbackArgs; //从回调中提取test数据
if(test[0]){ //先判断test是否为数组
let index = data[0].index; //从组件静态数据中读取index字段值
return [{
...data[0],
value:test[index].value //根据index提取test中的value
}]
}
return data;
拓展：
该案例以adcode作为参数，而不是省份名称，是因为adcode具有唯一性，且编码规则明确，比如全国——100000，省份——xx0000，市——xxxx00，区——xxxxxx。根据这个规则，当我需要全国范围内所有省份的b指标数据时，只需筛选adcode为xx0000的数据即可，当需要某个市内所有区的b指标时，筛选adcode为xxxxxx的数据即可。
案例二
继续以上面的案例为基础，我们在大屏中加入一个下拉菜单，该组件用于筛选产业链，产业链选项包括（全部，产业链A，产业链B......），当选择不同的产业链时，需要展示当前省份下，b指标排名前三的市。这时我们需要为接口添加一个新的参数——产业链编码。
入参：
adcode=330000&procode=-1 //procode表示产业链编码，当procode=-1时表示全部产业链。
出参:
[
{
type:"first", //排名
name:"杭州市", //市名称
value:123 //指标值
},
{
type:"second",
name:"宁波市",
value:123
},
{
type:"third",
name:"温州市",
value:123
}
]
可以看出，我们的出参并没有发生任何变化，只是入参增加了一个procode。因为对于大屏而言，需要的数据格式并没有任何变化，展示的依旧是某个省份内b指标排名前三的市，只不过增加了一条额外的限制，需要的是某个产业链的数据而已，这个限制是在后端查找数据时进行的，和前端没关系，所以出参格式不需要改变。
另外需求中还有一个隐藏的点，就是需要获取“全部产业链”的数据，正常情况下，每个产业链对应的是一个procode，但是“全部产业链”并不是一个产业链，所以我们需要设置一个虚假的procode作为“全部产业链”，当后端检索到procode==-1时，意味着数据处理结果将和「案例一」一致。
案例三
在案例二中，产业链选项是固定的，这也意味着每个procode是存储在静态数据中的。如果每个省份的产业链不同，也就意味着下拉菜单的数据不是静态，而是从接口中获取的，那么此时我们还需要另一个接口，来提供各个省份的procode。
入参：
adcode=330000 //根据地区编码获取该地区的产业链
出参:
[
{
name:"全部",
procode:-1,
},
{
name:"产业链A", //产业链名称
procode:1 //产业链唯一编码
},
{
name:"产业链B",
procode:2
},
{
name:"产业链C",
procode:3
}
]
到此为止，我们的大屏交互链路如下所示：
这其实基本符合了大部分大屏的设计思路，一个核心组件（地图），控制其他组件的数据切换；选项类组件（下拉菜单、选项卡等），辅助其他组件筛选数据；最终展示的目标组件做好标记（在翻牌器的静态数据中添加index），便于接受想要数据。总而言之，具体需求具体分析，接口的开发，必须建立在原型的确认之上。
各组件数据格式附录
这里只是大致列举，具体的组件数据格式应参考组件的静态数据。
1、指标类（翻牌器，标题，单值占比图等）
翻牌器：
[
{
name:"名称", //指标名称
value:100 //指标值
}
]
标题：
[
{
text:"名称", //指标名称
}
]
单值占比图：
[
{
value: 0.37
}
]
2、轴类图表类（折线图，柱状图，万用图等）
[
{
"x": "01/01", //横坐标
"y": 320, //纵坐标
"s": "系列一" //系列名
},
...
]
3、饼图、选项类（选项卡， 下拉菜单，轮播表格，各类饼图等）
饼图：
[
{
s:"系列一" //系列名
y:123 //数值
},
...
]
选项卡：
[
{
s:"1" //选项下标
content:"选项一" //选项名
},
...
]
轮播表格：
[
{
"column1": "北京", //第一列名称
"column2": 87.2, //第二列名称
"column3": "超预期", //第三列名称
"isSticked": false, //是否置顶
"isSelected": false //是否选中
},
...
]
下拉菜单：
[
{
s:"1", //系列名
option:"选项一" //选项名
},
...
]
今天的安利就到这里了，学会了吗？关注我们，获取更多可视化干货内容！