设计移动端仪表板
产品中的仪表板具备完全自适应的能力,因此您无需专门设计移动端使用的仪表板。
在PC端设计器内可一键查看移动端显示效果,也可以进行自定义布局设计。
1. 数据准备
新增数据源并添加到数据集。
(1)数据源配置
数据源属性 | 属性值 |
---|---|
Web API地址 | https://mockapi.eolink.com/jLwe6LL471d5112ef61d6b2ebe579a5190be3ee81164537/feature-analysis?responseId=1631805 |
请求方法 | GET |
JSON路径 | $.data |
JSON数据:
{
"success": true,
"code": 200,
"message": "successful",
"data": [{
"id": "1",
"cognitiveApproach": "现场广告",
"quantity": 4241,
"proportion": 0.503
}, {
"id": "2",
"cognitiveApproach": "拓展",
"quantity": 1720,
"proportion": 0.204
}, {
"id": "3",
"cognitiveApproach": "朋友介绍",
"quantity": 909,
"proportion": 0.1079
}, {
"id": "4",
"cognitiveApproach": "短信",
"quantity": 602,
"proportion": 0.0714
},{
"id": "5",
"cognitiveApproach": "网络",
"quantity": 552,
"proportion": 0.0655
}],
"count": 5
}
注意:数值型数据不要添加双引号。
2.自定义移动端布局
如果未对移动端的仪表板内容做自定义的布局,在移动端将以自动布局的方式来展示仪表板的内容。
如果您对移动端展示的内容有自定义的需求,单击仪表板右下角的,即可进入移动端展示编辑页面,在手机模拟器中修改布局及展示内容。
在手机模拟器的编辑页面中,您可以通过拖拽手动调整各组件之间的顺序调整各组件的大小。
单击组件右上角的【隐藏该组件】按钮,可将该组件从移动端页面中移除,被隐藏的组件会出现在右侧的“隐藏的图表”中。您也可以将已隐藏的图表组件列表重新拖拽至手机模拟器中。
单击右下角的【桌面端视图】按钮,返回大屏编辑页面。