如何制作一个移动分析看板【入门帖】

可视化未结 0 249

rolldata 站长 2023年9月5日 09:37 编辑

<h2>1. 移动端设计器</h2>首先登录产品，在上方导航栏右边打开控制台； <img src="http://help.wrenchdata.com/uploaded/202309/20230905092810_ri.png" style="box-shadow: rgb(51, 51, 51) 0px 0px 5px; max-width: 100%;"> 点击数据建模与分析模块中→移动端设计器，如下所示： <img src="http://www.wrenchdata.com:8443/images/5/35.png"> 现在打开的是移动端设计器界面： ①此处是移动端图形化组件区域； ②此处是移动端可视化控件区域； ③此处分别有预览、保存和发布操作，可以对移动驾驶舱进行相应的操作； ④此处是选择模型区域； ⑤此处是移动驾驶舱设计区域。 <h2>2. 构建移动分析驾驶舱</h2><h3>2.1 移动分析布局</h3>我们即将要构建的移动驾驶舱样式，包含一个日历控件、四个文本、面积图、环形图、条形图和堆积柱图，下面我们依次将图形组件和可视化控件拖拽到设计区并调整一下大小如下所示； <img src="http://www.wrenchdata.com:8443/images/5/36.png"> <h3>2.2 调整参数</h3>选中日历控件，打开属性配置，将垂直对齐方式选择“居中”，日期格式选择“年月”，默认值输入“2021-07”； <img src="http://www.wrenchdata.com:8443/images/5/37.png"> <h3>2.3 绑定模型</h3><h4>2.3.1 文本控件</h4>1）绑定数据：选中文本控件，点击左上角选择模型，没有模型的请参照<a href="http://help.wrenchdata.com/p/25" target="_blank"><img style="height: 12px;" src="https://api.xinac.net/icon/?url=http://help.wrenchdata.com/p/25">如何基于SQL模式创建数据模型</a>进行设计，搜索我们用到的模型，点击即可选中如下所示； <img src="http://www.wrenchdata.com:8443/images/5/38.png"> 然后打开文本右上角的数据绑定按钮，将所需度量“库存余额”拖拽到相应的位置如下所示； <img src="http://www.wrenchdata.com:8443/images/5/39.png"> 2）属性配置：打开文本的属性配置，在内边距设置中，上边距和左边距分别为5px和10px，标题内容输入“库存余额”，字号设置为16px，，公示内容输入“{{VALUE}}万吨”，文本字体设置18px，水平和垂直对齐方式均为“居中”； <img src="http://www.wrenchdata.com:8443/images/5/40.png"> 其余三个文本以同样的方式进行设置，绑定度量分别是“库存天数”、“平均库存余额”、“周转次数”。 <h4>2.3.2 面积图</h4>1）绑定数据：选中面积图，点击左上角选择模型，没有模型的请参照【模型管理】进行设计，搜索我们用到的模型，点击即可选中如下所示； <img src="http://www.wrenchdata.com:8443/images/5/41.png"> 然后打开面积图右上角的数据绑定按钮，将所需维度“类型”和度量“库存余额”拖拽到相应的位置如下所示； <img src="http://www.wrenchdata.com:8443/images/5/42.png"> 2）属性配置 基础：这可以调整面积图的基础属性，在这里我们把平滑曲线修改为折现形式； <img src="http://www.wrenchdata.com:8443/images/5/43.png"> 标题：修改为“库存金额趋势”，选中样式，将主标题字号修改为16px； <img src="http://www.wrenchdata.com:8443/images/5/44.png"> 视区：为了美观协调，将图形位置按需求进行上下左右边距的调整； <img src="http://www.wrenchdata.com:8443/images/5/45.png"> 图例：色块高度和色块宽度均调整为12px； <img src="http://www.wrenchdata.com:8443/images/5/46.png"> <h4>2.3.3 圆环图</h4>1）绑定数据：选中圆环图，点击左上角选择模型，没有模型的请参照【模型管理】进行设计，搜索我们用到的模型，点击即可选中如下所示； <img src="http://www.wrenchdata.com:8443/images/5/47.png"> 然后打开圆环图右上角的数据绑定按钮，将所需维度“类型”和度量“库存余额”拖拽到相应的位置如下所示； <img src="http://www.wrenchdata.com:8443/images/5/48.png"> 2）属性配置 基础：在这里可以调整圆环图的基础属性，在这里我们把主题属性切换到左侧第四个； <img src="http://www.wrenchdata.com:8443/images/5/49.png"> 点击系列0，将圆环图的内外半径分别调整为32%和50%大小，也可以按自己的需求进行调整； <img src="http://www.wrenchdata.com:8443/images/5/50.png"> 将引导线和数据标签选择“是”，显示位置调整“居上”，标签内容设置“{d}%”让它显示占比； <img src="http://www.wrenchdata.com:8443/images/5/51.png"> 标题：修改为“库存金额占比分析”，选中样式，将主标题字号修改为16px； <img src="http://www.wrenchdata.com:8443/images/5/52.png"> 图例：色块高度和色块宽度均调整为12px； <img src="http://www.wrenchdata.com:8443/images/5/53.png"> <h4>2.3.4 条形图</h4>1）绑定数据：选中条形图，点击左上角选择模型，没有模型的请参照【模型管理】进行设计，搜索我们用到的模型，点击即可选中如下所示； <img src="http://www.wrenchdata.com:8443/images/5/54.png"> 然后打开条形右上角的数据绑定按钮，将所需维度“类型”和度量“库存余额”拖拽到相应的位置如下所示； <img src="http://www.wrenchdata.com:8443/images/5/55.png"> 2）属性配置 基础：在这里可以调整条形图的基础属性，点击系列0，把柱条宽度调整为12px； <img src="http://www.wrenchdata.com:8443/images/5/56.png"> 标题：修改为“商品库存金额TOP5”，选中样式，将主标题字号修改为16px； <img src="http://www.wrenchdata.com:8443/images/5/57.png"> 视区：为了美观协调，将图形位置按需求进行上下左右边距的调整； <img src="http://www.wrenchdata.com:8443/images/5/58.png"> 图例：色块高度和色块宽度均调整为12px； <img src="http://www.wrenchdata.com:8443/images/5/59.png"> <h3>2.4 添加过滤条件</h3>想要通过日历控件进行传参，我们需要给控件添加超链接从而链接到每一个图形，并且每一个图形添加参数过滤条件。 1）添加超链接：打开日历控件的属性配置，在最下方找到超链接并打开，出现超级链接弹窗，需要添加两个超链接分别连接到以下的每一个图形，点击确定如下所示； <img src="http://www.wrenchdata.com:8443/images/5/60.png"> 2）添加过滤条件：打开文本1的数据绑定，将“日期”拖入筛选区，在下拉箭头中选择打开过滤条件出现以下弹窗，条件选“等于”，类型选“过滤组件”，值就是日历控件，然后添加到条件区点击确定； <img src="http://www.wrenchdata.com:8443/images/5/61.png"> 然后以同样的方式给其他的文本和图形添加同样的过滤条件；注意条形图取的是top5的数据，筛选条件处需要添加序号，按以下条件添加； <img src="http://www.wrenchdata.com:8443/images/5/62.png"> 上述步骤都完成之后移动分析驾驶舱就已经完成了，最后保存和发布到目标资源即可。下面来预览驾驶舱。 <img src="http://www.wrenchdata.com:8443/images/5/63.png">

相关标签：驾驶舱移动端数字大屏数据模型管理
注意：本文归作者所有，未经作者允许，不得转载

0个回复

消灭零回复

如何制作一个移动分析看板【入门帖】

友情链接