选项卡控制万用图中数据的显示

点击不同的日期，如何在万用图组件中显示相应的数据？本篇就来教你。预览效果如下⬇️

解决方案

在选项卡中设置回调参数将日期回调出去，在万用图组件中添加过滤器将符合日期的数据过滤出来显示。

实操教程

2.1 全局配置
首先添加首先添加【万用图】、【多项选项卡】等组件。

2.2 多项选项卡配置
在【多项选项卡】中填入/接入数据。（本篇教程显示5个年份，因此设置5组数据）

数据例子（可直接复制）⬇️
[
{
“s”: “1”,
“content”: “2020”
},
{
“s”: “2”,
“content”: “2021”
},
{
“s”: “3”,
“content”: “2022”
},
{
“s”: “4”,
“content”: “2023”
},
{
“s”: “5”,
“content”: “2024”
}
]
在回调中发出信号，控制万用图的数据显示。字段值为数据中的数值字段，变量名表示为发出的回调信号设置一个名称。

2.3 万用图配置
在【万用图】组件中填入/接入数据，有5组数据与多项选项卡相对应。

数据例子（可直接复制）⬇️
[
{
“s”: “系列一”,
“x”: “2020”,
“y”: 290
},
{
“s”: “系列一”,
“x”: “2021”,
“y”: 360
},
{
“s”: “系列一”,
“x”: “2022”,
“y”: 320
},
{
“s”: “系列一”,
“x”: “2023”,
“y”: 287
},
{
“s”: “系列一”,
“x”: “2024”,
“y”: 295
}
]
添加两组过滤器，进行数据过滤并使数据按照x轴排列。

首先，添加过滤器1（数据过滤器），接收回调字段，让万用图显示的数据值和选项卡中的数据一一对应。

“数据过滤”过滤器代码⬇️

console.log(“12343”,callbackArgs.content)
var result=[]
var c=callbackArgs.content
if©{
for(var i=0;i<c.length;i++){
var d=data.filter(function(a,b){
return a.x==c[i]
})
console.log(“3456”,result)
result.push(d[0])
}
return result;
}
else{
return data
}
其次，添加过滤器2（按照x轴排列），使数据按照x轴排列显示。

“按x轴排序”过滤器代码⬇️
data.sort((a, b) => (a.x > b.x) ? 1 : -1);
return data;
进入公众号“易知微产品帮助中心”对话框，发送“选项卡控制万用图”，即可获取demo～

作为国产自研的数字孪生可视化工具，数据安全和隐私保护等多方面因素无忧，以零代码\低代码的方式，提供数据源实时接入、拖拽式数字面板呈现、三维模型\地理信息\孪生场景构建等可视化应用的协同搭建能力，以更低成本、更高效率帮助客户\伙伴满足指挥中心、数字化展厅、数字化管理等各类数字化场景的应用建设～
易知微已经为130000+在线用户、3600+企业客户提供数字孪生可视化平台应用，和众多行业伙伴融合共生，一起让每一个组织及个体看见并受益于数字化！
想要了解更多案例，可以访问易知微的官网案例中心，涵盖数字孪生可视化技术在各行各业的应用，欢迎大家积极讨论，分享你的数字孪生经历。
易知微官网
全新上线供免费使用的个人版，欢迎大家前来易知微官网试用～配有保姆级教程，助你收获专属数字孪生场景！