检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
名、函数或者直接输入函数,如图5。 图5 表达式设置 单击“保存”,完成数据集的创建。 在组件中使用数据集 返回AstroCanvas项目列表页面。 进入开发页面,拖拽所需组件(如基本柱图)到画布中。 图6 从图表中拖拽基本柱图到画布中 选中该组件,单击组件上方的,进入组件数据页面。
图形的提示标识。 图6 气泡图图例 显示图例:是否显示图例,图例文字内容来源于数据模型下“s”的取值。 图例标记:设置图例小图标形状和图例列表布局朝向。 图例宽高:设置图例的宽度和高度。 图例间隔:设置图例之间的间隔。 字体:设置图例的字体、颜色和大小。 文字风格:设置图例文字的风格,支持正常、斜体和倾斜体。
图形的提示标识。 图6 散点图图例 显示图例:是否显示图例。图例文字内容来源于数据模型下“s”的取值。 图例标记:设置图例小图标形状和图例列表布局朝向。 图例宽高:设置图例的宽度和高度。 图例间隔:设置图例之间的间隔。 字体:设置图例的字体、颜色和大小。 文字风格:设置图例文字的风格,支持正常、斜体和倾斜体。
提示标识。 图7 水平堆叠柱图图例 显示图例:是否展示图例。图例文字内容来源于数据模型下“s”的取值。 图例标记:设置图例小图标形状和图例列表布局朝向。 图例宽高:设置图例的宽度和高度。 图例间隔:设置图例之间的间隔。 字体:设置图例的字体、颜色和大小等。 左间距:图例到柱图组件
图形的提示标识。 图9 折柱图图例 显示图例:是否展示图例。图例文字内容来源于数据模型下“s”的取值。 图例标记:设置图例小图标形状和图例列表布局朝向。 图例宽高:设置图例的宽度和高度。 图例间隔:设置图例之间的间隔。 字体:设置图例的字体、颜色和大小。图例文字内容来源于数据模型下“s”的取值。
Prometheus数据源 普罗米修斯(Prometheus)是一个开源系统监控和告警工具包,主要用于收集和存储时间序列数据,并提供了强大的查询和告警功能。AstroCanvas支持对接Prometheus数据源,将普罗中的数据作为组件的数据展示。 新建Prometheus数据源
上传自定义组件 将自定义组件上传到AstroCanvas中,并在页面中使用。 上传自定义组件 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在主菜单中,选择“我的资产”,进入我的资产页面。 在左侧导航栏中,选择“我的组件”,单击“添加组件”,进入添加组件页面。
FLV视频播放 FLV视频播放是媒体组件的一种,用于播放FLV(Flash Video)格式的视频。 在大屏设计页面,从“全部组件 > 媒体”中,拖拽“FLV视频播放”组件至画布空白区域,如图1。 图1 FLV视频播放 图2 边距样式说明 卡片 卡片是指包裹媒体组件的外层架构,可
如何在数据集或跳转事件动作中设置变量 在组件的数据集或组件的跳转事件动作中,是支持设置变量的。 在数据集或事件动作中设置变量 在大屏编辑页面上方,单击,新建并设置页面级全局变量。 例如,新增全局变量“url”,设置变量说明为“数据详情页面URL”。 图1 新增全局变量 从“全部组件
音频 音频组件用于在可视化大屏中添加音频播放器来播放您的音频,仅支持MP3、OGG和WAV格式的音频。 在大屏设计页面,从“全部组件 > 媒体”中,拖拽“音频”组件至画布空白区域,如图1。 图1 音频 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构,可以理解为组件由卡片
页面数据集 操作场景 通过页面数据集,实现多个组件对接同一个数据输入,减少重复的请求和配置。同时,在新建页面数据集时,还支持配置多数据输入(最多10个),来实现组件同时对接多个数据流。 本章节以将两个静态数据集(多数据流1、多数据流2)中的数据汇合后,作为组件的数据来源为例,向您介绍如何创建并使用页面数据集。
排行榜 排行榜是文本组件的一种,用于根据一定的条件,描述数据的先后关系。 在大屏设计页面,从“全部组件 > 文本”中,拖拽“排行榜”组件至画布空白区域,如图1。 图1 排行榜 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构,可以理解为组件由卡片中基础元素(卡片标题、图表、卡片背景、卡片边框)和图表元素构成。
雷达图 雷达图是指通过极坐标的展现形式,使用围合的区域,来表示数据在不同维度的具体表现。 在大屏设计页面,从“全部组件 > 图表”中,拖拽“雷达图”组件至画布空白区域,如图1。 图1 雷达图 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构,可以理解为组件由卡片中基础元素
地图 AstroCanvas中的地图组件为二维地图,支持高德、百度、天地图和自定义地图。 在大屏设计页面,从“地图”中,拖拽“地图”组件至画布空白区域,如图1。 图1 地图组件 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构,可以理解为组件由卡片中基础元素(卡片标题、图
echarts组件自定义事件交互设置 echarts组件作为触发器的事件时,可以在自定义事件中设置。 自定义事件交互设置 在大屏设计页面,从Echarts图表中拖拽一个折线图堆叠组件到画布中。 图1 拖拽折线图堆叠组件到画布中 选中折线图堆叠组件,单击。 在自定义事件中,单击“新
配置项总览 本章节介绍AstroCanvas支持的组件配置项,您可以通过{widget}.editor.js文件中定义的type字段,来定义组件的类型和配置。 表1 配置项总览 类别 类型 说明 输入框 input 单行文本输入框 textarea 多行文本输入框 数字类型 input-number
classfication 字段介绍 classfication字段代表的是当前组件需要展示哪些大的配置项分类。AstroCanvas在设计前期对分类也进行了分组,因此这个字段被扩展为双数组形式。一般默认情况下,直接在数组对象的第一个数组中配置即可。如果无配置,则所有属性展示在一个大的分类下。
里程碑 里程碑组件可以区分过去(选中)、现在(高亮、点击)和未来(默认)三种状态,来改变不同时间态的样式。 在大屏设计页面,从“全部组件 > 文本”中,拖拽“里程碑”组件至画布空白区域,如图1。 图1 里程碑 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构,可以理解为组
如何通过全局变量,实现组件数据的动态变化 在AstroCanvas中,支持通过全局变量,来控制组件数据的动态显示。本章节以全局变量,控制地图组件中数据的动态显示为例进行介绍。 通过全局变量实现组件数据动态变化 参考关系型数据库数据源中操作,新建关系型数据库数据源。 图1 新建关系型数据库数据源
ECharts图表 为了拓展预置组件的能力,AstroCanvas集成了Echarts图表库。ECharts是当前使用最为广泛的开源图表库之一。 当前仅“Astro大屏应用专业版”实例,才提供Echarts图表组件。 以基础折线图为例,在大屏设计页面,从“全部组件 > EChar