Skip to main content

设计移动端仪表板

产品中的仪表板具备完全自适应的能力,因此您无需专门设计移动端使用的仪表板。

在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.自定义移动端布局

如果未对移动端的仪表板内容做自定义的布局,在移动端将以自动布局的方式来展示仪表板的内容。

如果您对移动端展示的内容有自定义的需求,单击仪表板右下角的image2018-6-27_11-29-57.png,即可进入移动端展示编辑页面,在手机模拟器中修改布局及展示内容。

image-20230705112341059

在手机模拟器的编辑页面中,您可以通过拖拽手动调整各组件之间的顺序调整各组件的大小。

image-20230705112545842

单击组件右上角的【隐藏该组件】按钮,可将该组件从移动端页面中移除,被隐藏的组件会出现在右侧的“隐藏的图表”中。您也可以将已隐藏的图表组件列表重新拖拽至手机模拟器中。

image-20230705094558666

单击右下角的【桌面端视图】image2018-6-27_11-43-51.png按钮,返回大屏编辑页面。

01-06.png