Title

荣培学院

RollData College
  • 文档

    • 产品安装与部署
    • 准备工作
    • 复杂报表
    • 数据上报
    • 数据可视化
    • 数据加工厂
    • 权限划分设置
    • 二次开发
  • 视频
  • 社区
  • 官网
  • 
  • 登录
  • 注册   
登录
注册
搜索

 文档

  • 产品安装与部署
  • 准备工作
  • 复杂报表
  • 数据上报
  • 数据可视化
  • 数据加工厂
  • 权限划分设置
  • 二次开发
视频
社区
官网

数据可视化
●构建带条件筛选的驾驶舱
●构建图表联动的驾驶舱
●构建驾驶舱的穿透
●构建移动分析
●构建数字大屏
文档
Title

构建移动分析

  • 编辑
  • 
  • 文档创建者:4028b88163953a1b01639563f09c0005
  • 最近更新:2022-04-15
  • 
    • 1.移动端设计器
    • 2.构建移动分析驾驶舱
    • 2.1移动分析布局
    • 2.2调整参数
    • 2.3绑定模型
    • 2.3.1文本控件
    • 2.3.2面积图
    • 2.3.3圆环图
    • 2.3.4条形图
    • 2.4添加过滤条件

    1.  移动端设计器

    首先登录产品,在上方导航栏右边打开控制台;

    点击数据建模与分析模块中→移动端设计器,如下所示:

    现在打开的是移动端设计器界面:

    ①此处是移动端图形化组件区域;

    ②此处是移动端可视化控件区域;

    ③此处分别有预览、保存和发布操作,可以对移动驾驶舱进行相应的操作;

    ④此处是选择模型区域;

    ⑤此处是移动驾驶舱设计区域。

    2.  构建移动分析驾驶舱

    2.1  移动分析布局

    我们即将要构建的移动驾驶舱样式,包含一个日历控件、四个文本、面积图、环形图、条形图和堆积柱图,下面我们依次将图形组件和可视化控件拖拽到设计区并调整一下大小如下所示;

    2.2  调整参数

    选中日历控件,打开属性配置,将垂直对齐方式选择“居中”,日期格式选择“年月”,默认值输入“2021-07”;

    2.3  绑定模型

    2.3.1  文本控件

    1)绑定数据:选中文本控件,点击左上角选择模型,没有模型的请参照【模型管理】进行设计,搜索我们用到的模型,点击即可选中如下所示;

    然后打开文本右上角的数据绑定按钮,将所需度量“库存余额”拖拽到相应的位置如下所示;

    2)属性配置:打开文本的属性配置,在内边距设置中,上边距和左边距分别为5px和10px,标题内容输入“库存余额”,字号设置为16px,,公示内容输入“{{VALUE}}万吨”,文本字体设置18px,水平和垂直对齐方式均为“居中”;

    其余三个文本以同样的方式进行设置,绑定度量分别是“库存天数”、“平均库存余额”、“周转次数”。

    2.3.2  面积图

    1)绑定数据:选中面积图,点击左上角选择模型,没有模型的请参照【模型管理】进行设计,搜索我们用到的模型,点击即可选中如下所示;

    然后打开面积图右上角的数据绑定按钮,将所需维度“类型”和度量“库存余额”拖拽到相应的位置如下所示;

    2)属性配置

    基础:这可以调整面积图的基础属性,在这里我们把平滑曲线修改为折现形式;

    标题:修改为“库存金额趋势”,选中样式,将主标题字号修改为16px;

    视区:为了美观协调,将图形位置按需求进行上下左右边距的调整;

    图例:色块高度和色块宽度均调整为12px;

    2.3.3  圆环图

    1)绑定数据:选中圆环图,点击左上角选择模型,没有模型的请参照【模型管理】进行设计,搜索我们用到的模型,点击即可选中如下所示;

    然后打开圆环图右上角的数据绑定按钮,将所需维度“类型”和度量“库存余额”拖拽到相应的位置如下所示;

    2)属性配置

    基础:在这里可以调整圆环图的基础属性,在这里我们把主题属性切换到左侧第四个;

    点击系列0,将圆环图的内外半径分别调整为32%和50%大小,也可以按自己的需求进行调整;

    将引导线和数据标签选择“是”,显示位置调整“居上”,标签内容设置“{d}%”让它显示占比;

    标题:修改为“库存金额占比分析”,选中样式,将主标题字号修改为16px;

    图例:色块高度和色块宽度均调整为12px;

    2.3.4  条形图

    1)绑定数据:选中条形图,点击左上角选择模型,没有模型的请参照【模型管理】进行设计,搜索我们用到的模型,点击即可选中如下所示;

    然后打开条形右上角的数据绑定按钮,将所需维度“类型”和度量“库存余额”拖拽到相应的位置如下所示;

    2)属性配置

    基础:在这里可以调整条形图的基础属性,点击系列0,把柱条宽度调整为12px;

    标题:修改为“商品库存金额TOP5”,选中样式,将主标题字号修改为16px;

    视区:为了美观协调,将图形位置按需求进行上下左右边距的调整;

    图例:色块高度和色块宽度均调整为12px;

    2.4  添加过滤条件

    想要通过日历控件进行传参,我们需要给控件添加超链接从而链接到每一个图形,并且每一个图形添加参数过滤条件。

    1)添加超链接:打开日历控件的属性配置,在最下方找到超链接并打开,出现超级链接弹窗,需要添加两个超链接分别连接到以下的每一个图形,点击确定如下所示;

    2)添加过滤条件:打开文本1的数据绑定,将“日期”拖入筛选区,在下拉箭头中选择打开过滤条件出现以下弹窗,条件选“等于”,类型选“过滤组件”,值就是日历控件,然后添加到条件区点击确定;

    然后以同样的方式给其他的文本和图形添加同样的过滤条件;注意条形图取的是top5的数据,筛选条件处需要添加序号,按以下条件添加;

    上述步骤都完成之后移动分析驾驶舱就已经完成了,最后保存和发布到目标资源即可。下面来预览驾驶舱。

    上一篇: 构建驾驶舱的穿透
    下一篇: 构建数字大屏
    