检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
创建项目 (可选)新建分组 创建大屏&PC端项目 创建移动端项目
图层管理 视图切换 组件图层位置移动 筛选组件
图表 实心圆饼图 轮播饼图 满月饼图 基本饼图 贪吃蛇饼图 玫瑰花饼图 渐变色饼图 基本折线图 多折线图 区域图 多区域折线图 水位图 箭头水位图 水滴水位图 钻石水位图 三角形水位图 圆角矩形水位图 矩形水位图 进度条 图标进度条 热力图 基本漏斗图 双向柱图 折柱图 水平基本柱图
组件管理 添加组件 拖拽组件 组件对齐 锁定/解锁组件 隐藏组件 重命名组件 将组件保存为卡片 复制并粘贴组件 跨页面复制组件 删除组件 创建分组 自定义组件说明 echarts组件自定义事件交互设置 echarts组件自定义动作交互设置 如何使用高级表格的后台分页功能 如何使用高级表格的后台排序功能
交互设置 组件间交互 页面间交互 通过参数控制响应动作 如何自定义动作
数据中心 转换器管理 连接器管理 数据源管理 数据集管理
转换器管理 新建转换器 删除转换器 关注转换器 父主题: 数据中心
连接器管理 新建连接器 复制连接器 删除连接器 父主题: 数据中心
代码结构介绍 了解代码目录结构 目录文件详解 父主题: 自定义组件开发规范
{widget}.editor.js 文件介绍及示例 eventConfig classfication propertiesConfig 父主题: 目录文件详解
地图 高德地图 地图 OpenLayers地图 父主题: 组件介绍
packageinfo.json 文件介绍 packageinfo.json是组件的元数据描述文件,用于配置组件的基本信息。 文件示例 { "widgetApi": [{ "name": "EchartsWidgetTemplate" }], "widgetDescription": "Echarts组件模板"
轻应用API接口和ROMA API接口等。 数据源管理:新增并管理关系型数据库、DWS、DLI和华为云Astro轻应用等数据源。 数据集管理:新增并管理数据集,配置数据集后,在组件“数据”页签中可选择具体的数据集。 连接器管理:通过新建HTTP连接器,可引入第三方的API作为组件的数据来源。
messages-zh/messages-en.json 组件的国际化资源文件,用于配置多语言(本例模板中未体现)。 表3 组件名.js中预置API说明 分类 API及说明 组件实例预置API init方法:主要包含组件渲染需要初始化数据的入口函数。 render方法:负责整个组件渲染的业务逻辑方法。 ge
器等)。选中组件,单击组件上方的,即可配置组件在页面呈现数据的来源。 图1 为组件配置数据 非数据源 桥接器预置 通过桥接器动态调用后台的接口,来获取后台数据展示在页面上,相关配置请参见桥接器预置。 静态数据 选择该方式时,页面会获取“输入数据”中的静态数据展示在页面上,详情请参见静态数据。
一个推荐的组件架构,应包含表1中API。其中,init、render和beforeDestory为组件的通用生命周期函数,其余为推荐模板实现。 表1 组件架构组成 API名称 API解释 是否必须 init(生命周期函数) 组件初始化入口API,初始化组件通用能力,负责注册组件事件和组件动作。
required Boolean 否 required: true 是否必须配置。 组件使用数据集 数据集实例获取。 组件代码中可使用如下API,来获取对应的数据集实例。 ConnectorIns: thisObj.getConnectorInstanceByName('Echar
将鼠标悬浮在日期选择器上,组件名称即为组件ID。 图11 获取组件ID 操作组件。 获取到组件ID后,可以通过AstroCanvas提供的API来操作组件,如显示/隐藏组件。关于API的详细介绍,请参见内置API一览表。 // 显示组件 {widget2}.showWidget(); // 隐藏组件 {widget2}
我的凭证”。 在“我的凭证 > API凭证 > 项目列表”中,获取“项目”的值。 项目ID:DLI服务所在的区域的项目ID,获取方法如下。 登录华为云管理控制台。 将鼠标移动到右上角用户名上,在下拉列表中单击“我的凭证”。 在“我的凭证 > API凭证 > 项目列表”中,获取“项目ID”的值。
在自定义动作中,单击“新增自定义动作”,修改动作名称为“设置数据高亮”。 图1 新建自定义动作 在动作实现中,输入如下代码,调用echarts提供的动作API。 echartsInst.dispatchAction({ type: 'highlight', dataIndex: