检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
时间轴 时间轴是文本组件的一种,用于按时间顺序来展示了一系列事件。 在大屏设计页面,从“全部组件 > 文本”中,拖拽“时间轴”组件至画布空白区域,如图1。
{widget}.js 文件介绍 {widget}.js为组件逻辑文件,整个Widget的渲染核心JS,在组件编辑状态和页面最终的发布运行态都会被加载执行。一个推荐的组件架构,应包含表1中API。
{widget}.editor.js 文件介绍及示例 eventConfig classfication propertiesConfig 父主题: 目录文件详解
在组件的“global_SelectWidget.js”文件中,注册名称为“sendSelect”的事件。
X轴坐标轴类型:设置X轴坐标轴类型,支持连续数据、类目轴和时间轴。 坐标轴分割段数:设置X轴坐标轴段数。 最大值:X轴标签能显示的最大值。 最小值:X轴标签能显示的最小值。 坐标轴名称:设置X轴坐标轴显示名称。 坐标轴名称字体:坐标轴字体、颜色、大小等设置。
注册自定义事件 自定义事件在{widget}.editor.js文件中的eventConfig配置项中注册,以global_SelectWidget组件为例: 在文件global_SelectWidget.editor.js中定义事件 eventConfig: { sendSelect
}.editor.js
图1 响应动作 /** * 文件global_SelectWidget.js中, 在init钩子中注册响应动作 * @params thisObj: 组件实例 */ Studio.registerAction( thisObj, 'confirmLocationWidgetCbk
{widget}.js:组件逻辑文件,整个Widget的渲染核心JS,在组件编辑状态和页面最终的发布运行态都会被加载执行。 父主题: 代码结构介绍
目录文件详解 i18n.json packageinfo.json {widget}.css {widget}.editor.js {widget}.ftl {widget}.js 父主题: 代码结构介绍
X轴坐标轴类型:设置X轴坐标轴类型,支持连续数据、类目轴和时间轴。 坐标轴分割段数:设置X轴坐标轴段数。 最大值:X轴线标签数据的最大值。 最小值:X轴线标签数据的最小值。 坐标轴名称:设置X轴坐标轴显示名称。 坐标轴名称字体:坐标轴字体、颜色、大小设置。
文本 词云 时间轴 通用表格 基础表格 趋势 搜索框 下拉选择框 日历组件 翻牌器 时间展示 时间翻牌器 里程碑 排行榜 天气 文本编辑 复选框 日期选择器 指标 标题 树状下拉框 多趋势 树状表格 高级表格 时间选择器 父主题: 组件介绍
父主题: {widget}.editor.js
", "The widget template showing how to use the Vue library", params); registerConnector 必须在connector.js中注册connector,使用方式参考如下: /* @param {string
name: 'configuration' }, { name: 'tooltip' } ] ], 图1 classfication配置设置后效果 父主题: {widget}.editor.js
EchartsWidgetTemplate.js修改为BarGraph.js。
父主题: {widget}.editor.js
组件数据接入 组件对接数据配置开关 组件的数据可来自于静态数据或通过数据集获取,以EchartsWidgetTemplate组件为例,在“{Widget}”.editor.js文件中,可配置组件接入的数据。
例如,MintUI库需要引入的文件有“js/index.js”和“css/index.css”文件,请在packageinfo.json中添加这两个文件的描述,如下所示。其中,“js”和“css”定义文件类型,“name”定义文件路径及名称。
配置项总览 本章节介绍华为云Astro大屏应用支持的组件配置项,您可以通过{widget}.editor.js文件中定义的type字段,来定义组件的类型和配置。