检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
路由视图 路由视图是导航组件的一种,通过配置不同页面,在当前可视化页面呈现其它页面效果。该组件可降低对当前页面资源的占用,提升性能。 在大屏设计页面,从“全部组件 > 导航”中,拖拽“路由视图”组件至画布空白区域,如图1。 图1 路由视图 图2 边距样式说明 卡片 卡片是指包裹图
使用空白画布新建页面 从零开始,通过拖拽组件、设置页面布局、数据源等,构建华为云Astro大屏应用大屏页面&PC端页面。创建移动端页面操作和大屏&PC端页面相同,本章节以创建大屏&PC端页面为例进行介绍。 新建空白页面 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。
显示图表标题:是否显示图表标题。 标题内容:设置标题内容。 标题位置:标题显示位置,支持左、中和右。 标题字体:设置标题的字体、颜色和大小等。 图形 图形是指组件中,实现数据可视化的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图4 时间轴图形 时间轴 时间轴方向:时间轴的方向,支持水平方向和垂直方向。
背景框 背景框是装饰组件的一种,包括大标题背景、小标题背景、页面背景和内容背景。可根据不同的设计需求,选择不同的背景框,以增加视觉效果。 以自定义背景框为例,在大屏设计页面,从“全部组件 > 装饰”中,拖拽“自定义背景框”组件至画布空白区域,如图1。 图1 自定义背景框 卡片 卡
通用配置 配置项说明 表1 配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "input" 配置项类型。 value String 否 value: "defaultValue" 默认值。 name String 是 name: "commProps
使用华为云Astro大屏应用开发人员来访统计大屏页面 应用场景 人员来访统计大屏用于展示园区中人员相关信息,例如人员类型,人员流量及在园人数等。大屏页面构想,如图1所示。 图1 大屏页面效果 图1中大屏页面由下列组件拼装而成,组件介绍顺序为从上到下、从左到右。 表1 组件说明 组件
使用华为云Astro大屏应用预置模板搭建交通管理大屏 场景说明 交通管理大屏用于监控城市的交通状态,如进出城车辆、路况信息和交通指数等,效果如图1所示。本入门以使用华为云Astro大屏应用中预置模板构建一个交通管理大屏为例,向您介绍如何在华为云Astro大屏应用中快速构建可视化页面。
选中折线图堆叠组件,单击。 在自定义事件中,单击“新增自定义事件”,修改事件名称为“echarts单击系列”。 图2 新建echarts单击系列事件 在事件实现中,输入如下代码,即echarts实例的“单击系列”动作将会发送此事件,携带参数为echarts传递的事件对象。 echartsInst.on('click'
组件交互 组件自定义事件实现 组件响应动作实现 父主题: 自定义组件开发规范
轮播:是否开启轮播效果。 间隔时间:设置图表的轮播时间间隔,不能大于24秒。 轮播顺序:设置图表的轮播顺序,支持从下往下和从下往上两种。 图形 图形是指组件中,实现数据可视化的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图5 基本漏斗图图形 颜色:设置图表中,图形的颜色。 统一配置
如何进行设置页面 在大屏页面中,可以对页面进行一些基础的配置,例如屏幕大小、背景颜色及背景图片等效果的设置。 屏幕大小 页面的屏幕大小,可以使用默认的屏幕大小,也可以自定义页面的大小,以适配大屏尺寸,推荐常用尺寸1920*1080、1600*900及3840*2080等。 图1 屏幕大小
即铺满整个组件。 边框圆角:边框的圆角,四个角弧度取值范围为0~500,单位px。 图表背景:设置图表的背景颜色。 图形 图形是指组件中,实现数据可视化的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图4 热力图图形 颜色:设置图表中,图形的颜色。 热力颜色
树状表格的条件格式,只有在关联关系以及响应数据列是单行文本和数字类型时才会生效。 图6 树状表格中新增条件格式 图形 图形是指组件中,实现数据可视化的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图7 树状表格图形 统一配置 图标选中色:设置选中前台排序、前台筛选时,图标的显示颜色。
为正常颜色。 高级表格的条件格式,只有在关联关系以及响应数据列是单行文本和数字类型时才会生效。 图7 新增条件格式 图形 图形是指组件中,实现数据可视化的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图8 高级表格图形 统一配置 图标选中色:设置选中后台排序、后台筛选时,图标的显示颜色。
特效:组件是否高亮显示,支持默认展示和跳转到页面时展示。 边距:组件中图表距离整个组件四边(上、下、左、右,如图2)的距离,默认为0,即铺满整个组件。 图形 图形是指组件中,实现数据可视化的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图4 步骤条图形 步骤条方向:步骤条显示方向,可以设置为水平方向或垂直方向。
X轴数据轮播。 图7 数据系列轮播效果 图8 X轴数据轮播效果 间隔时间:设置图表的轮播时间间隔,不能大于24秒。 图形 图形是指组件中,实现数据可视化的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图9 多折线图图形 颜色:设置图表中图形的颜色。 统一配置
多区域折线图数据系列轮播效果 图8 多区域折线图X轴数据轮播效果 间隔时间:设置图表的轮播时间间隔,不能大于24秒。 图形 图形是指组件中,实现数据可视化的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图9 多区域折线图图形 颜色:设置组件中图表的图形颜色。
Astro Canvas:使用该运行容器下载的项目包,可在其他华为云Astro大屏应用环境的项目列表中,通过单击“导入项目包”进行安装使用,实现将环境A迁移项目到环境B。 OneMobile:使用该运行容器下载的项目包,可在华为OneMobile上安装运行。选择此方式时,还需配置应用ID、主页、环境类型等参数。
配置 在配置中,可以开启或关闭组件的轮播效果。开启轮播效果后,轮播时间间隔不能超过24秒。 图6 基本折线图配置 图形 图形是指组件中,实现数据可视化的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图7 基本折线图图形 颜色:设置组件中,图表的图形颜色。
圆角半径:四边圆角时的圆角半径(取值为“0”时为直角,“100”为圆角)。 位置:圆角位置。 内边距:图表与图表背景之间的距离。 图6 内边距设置后效果 图形 图形是指组件中,实现数据可视化的具体图形表达元素,例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图7 折柱图图形 颜色:设置图表中图形的颜色。 统一配置