华为云用户手册

卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3 卡片 卡片装饰：卡片装饰设置，可根据自身的业务需求选择不同的卡片样式。单击“清除样式”，可清除已设置的装饰样式。 标题： 标题：是否显示该组件标题。 内容：组件标题内容。 字体：设置组件标题的字体、大小和颜色等。 对齐：标题相对于组件的对齐方式。 标题背景色：设置组件标题的背景颜色。 内边距：标题与组件框上下左右四个边界之间的距离，单位默认px。 标题偏移：组件标题与实心圆饼图之间的偏移量。 背景 背景色：设置组件卡片的背景颜色。 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。 边距：组件中图表距离整个组件四边（上、下、左、右）的距离（参见图2），默认为0，即铺满整个组件。 上边距：图表到组件边框顶部的距离。 右边距：图表到组件边框右侧的距离。 下边距：图表到组件边框底部的距离。 左边距：图表到组件边框左侧的距离。 参考模板：系统预置的组件样式模板，支持默认和带标签两种。 图4 带标签模板 边框圆角：边框的圆角，四个角弧度取值范围为0~500，单位px。 图5 边框圆角 图表背景：图表的背景颜色。 图表标题：图表标题是否显示，支持自定义或者从系列中获取。 图6 显示图表标题

图形 图形是指组件中，实现 数据可视化 的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图7 图形 颜色：设置图表中，图形的颜色。 统一配置 数据系列：是否显示该系列数据。若不选中，会隐藏该组件中对应的系列数据。 南丁格尔图：是否使用南丁格尔图。 内半径：饼图内半径设置。 外半径：饼图外半径设置。 圆心横坐标：饼图圆心横坐标设置。 圆心纵坐标：饼图圆心纵坐标设置。 排布顺序：扇区可按顺时针或逆时针排布。 起始角度：扇区起始角度。 最小角度：扇区最小角度。 鼠标悬停：鼠标放在扇区时，该扇区是否放大显示。 所有标签设置：设置为显示后，图表中会显示标签。 图8 设置为显示后效果 所有标签悬浮设置：鼠标悬浮在对应数据系列上时，标签是否显示。 图9 隐藏 图10 显示 标签位置：标签显示位置，如内部、外部或中间。 标签视觉引导线是否展现：设置为“是”时，标签前会添加引导线。 图11 设置为是显示效果 引导线长度：设置标签引导线的长度。 标签内容：设置标签显示的内容，如图11显示的为数据值，也可以设置为百分比、系列名。 标签文字：设置标签内容的字体、大小和颜色等。 描边：实心圆饼图间系列和整体范围的描边样式。 图12 设置后效果 设置背景：设置饼图的背景。 图13 背景设置效果 数据系列 系列名称：原始数据中默认的系列名称，可通过设置“显示名称”，进行修改。 显示名称：自定义图表中系列的显示名称。 下标：数据系列所在的位置。 初始选中：数据项初始是否被选中。 图14 初始选中设置为是效果 颜色样式：数据系列的颜色样式，支持以下几种。 单色：可设置正常颜色和高亮下颜色。 渐变色：可设置渐变样式、渐变方向、起始颜色和结束颜色。 条件色：单击“新增条件格式”，可设置条件和响应数据列的样式。如图15中所示，该设置表示工程管理满足设置的条件（大于80）时，显示为红色，否则显示为正常颜色。 图15 设置条件格式 纹理：通过上传纹理图片，自定义数据系列的颜色格式。 普通标签：未选中数据系列时，标签的样式。 系列名是否展示：标签中系列名是否显示，如工程管理。 数据值是否展示：标签中数据值是否显示，如工程管理对应的数据值“635”。 百分比是否展示：标签中百分比是否显示，如工程管理对应的百分比“67.2”%。 普通标签字体：设置标签内容的字体、颜色和大小等。 高亮标签：选中数据系列时，标签的样式。 系列名是否展示：标签中系列名是否显示，如工程管理。 数据值是否展示：标签中数据值是否显示，如工程管理对应的数据值635。 百分比是否展示：标签中百分比是否显示，如工程管理对应的百分比67.2%。 高亮标签字体：设置标签内容的字体、颜色和大小等。

操作步骤 在大屏设计页面，从Echarts图表中拖拽一个折线图堆叠组件到画布中。 图1 拖拽折线图堆叠组件到画布中 选中折线图堆叠组件，单击。 在自定义事件中，单击“新增自定义事件”，修改事件名称为“echarts单击系列”。 图2 新建echarts单击系列事件 在事件实现中，输入如下代码，即echarts实例的“单击系列”动作将会发送此事件，携带参数为echarts传递的事件对象。 echartsInst.on('click', 'series', triggerCurrentEvent); 单击“新增字段”，设置字段名称为“seriesIndex”。 图3 seriesIndex字段 选中echarts组件，单击，进入组件交互页面。 单击“交互事件”，选择“echarts单击系列”。 为“echarts单击系列”事件设置响应动作，如赋值全局变量，将字段seriesIndex赋值给全局变量。 图4 将字段seriesIndex赋值给全局变量 单击“完成”，返回大屏设计页面。 在全部组件中，拖拽一个实心圆饼图到画布中。 为实心圆饼图设置数据。 选中实心圆饼图，单击。 “数据类型”选中“数据集”，并选择所需的数据集。 在全局变量配置中，绑定8中的全局变量，并给全局变量赋值。 图5 绑定全局变量 在组件预览中，从“表格字段”中拖拽对应的字段到“配置”中，并单击“保存”。 返回大屏设计页面，单击后，单击。 在预览页面，单击折线图堆叠图表中的系列，页面的全局变量将被设置为参数seriesIndex的值。

操作步骤 参考如何登录AstroCanvas中操作，登录AstroCanvas界面。 在项目列表中，单击页面所在的项目，进入项目。 将鼠标放在对应的页面上（如本示例中的“园区办公人员统计”），单击，选择“设为首页”。 返回项目列表页面，将鼠标放在页面所在的项目上，单击。 在项目发布中，单击“+ 新建版本”。 输入版本号（如2.0），在版本管理中，勾选“园区办公人员统计”页面，单击“确定”。 图1 新建版本 单击，将6中新建的版本设置为当前发布版本。 图2 设置发布版本 单击对应项目上的，即可查看到项目的首页变为了园区人员办公统计页面。

后续处理 发布为全局模板后，需要联系管理员进行审批，审批通过后，其他租户下的用户才可以使用该模板新建页面。 模板未审核 本租户下的用户登录AstroCanvas创建页面时，可在“未上线模板”中使用该模板新建页面。 图3 使用未上线模板新建页面 模板已审核 本租户下的用户或其他租户下的用户，可通过如下两种方式使用该模板创建页面。 方式一：在图3中的“预置模板”下，可查看到已审批的模板，并使用该模板新建页面。 方式二：参考如何登录Astro低代码平台中操作，登录Astro低代码平台。在“资产中心”中，可查看到该模板，并可使用该模板新建页面。如何使用资产中心的模板新建页面，请参见在资产中心使用模板安装大屏应用。

操作 参考如何登录AstroCanvas中操作，登录AstroCanvas界面。 在项目列表中，单击页面所在的项目，进入项目。 在所有页面中，单击待发布为全局模板的页面。 单击“编辑页面”，进入大屏开发页面。 在大屏开发页面，单击，选择“发布为全局模板”。 图1 选择发布为全局模板 填写模板名称、描述、发布方和封面，单击“确定”。 图2 填写全局模板信息 名称：输入生成模板的名称，名称长度为1~32个字符，可包括中文、字母、数字及下划线。 描述：生成模板的描述信息，可按需进行设置。 发布方：设置模板的发布方。 封面：为模板添加封面，可截图获取封面也可以自定义封面。

配置示例 input-number配置示例如下，配置后效果如图1所示。 { "type": "input-number", "name": "commProps.myInputNumber", "value": 88, "label": { "zh_CN": "input-number的类型", "en_US": "input-number Type Example" }, "step": 0.01, "stepStrictly": true, "precision": 2, "placeholder": { "zh_CN": "请输入标题内容", "en_US": "Enter the title content." }, "min": 20, "max": 100 } 图1 设置后效果

数据 在数据中，设置天气组件的数据来源，更多介绍请参见数据接入。 图6 设置组件数据源 图7 选择桥接器预置-静态数据 静态数据中，“dataNow”对应今日天气，“dataForecast”对应未来几天天气预报。 AstroCanvas预置了一套漂亮的天气图标，用于在天气组件上使用图标展示天气状况，并用字段“icon”表示今日天气图标，“iconDay”表示未来日期的天气图标。例如取值为“100”，表示晴天，界面会展示天气图标；取值为“307”，表示大雨，界面会展示天气图标。取值和天气的对应关系请参见表1。 表1 图标字段“icon”、“iconDay”的取值和天气对照表 icon/iconDay 取值 天气状况（中文） 天气状况（英文） 100 晴 Sunny 101 多云 Cloudy 102 少云 Few Clouds 103 晴间多云 Partly Cloudy 104 阴 Overcast 150 晴 Clear 153 晴间多云 Partly Cloudy 154 阴 Overcast 300 阵雨 Shower Rain 301 强阵雨 Heavy Shower Rain 302 雷阵雨 Thundershower 303 强雷阵雨 Heavy Thunderstorm 304 雷阵雨伴有冰雹 Thundershower with hail 305 小雨 Light Rain 306 中雨 Moderate Rain 307 大雨 Heavy Rain 308 极端降雨 Extreme Rain 309 毛毛雨/细雨 Drizzle Rain 310 暴雨 Storm 311 大暴雨 Heavy Storm 312 特大暴雨 Severe Storm 313 冻雨 Freezing Rain 314 小到中雨 Light to moderate rain 315 中到大雨 Moderate to heavy rain 316 大到暴雨 Heavy rain to storm 317 暴雨到大暴雨 Storm to heavy storm 318 大暴雨到特大暴雨 Heavy to severe storm 399 雨 Rain 350 阵雨 Shower Rain 351 强阵雨 Heavy Shower Rain 400 小雪 Light Snow 401 中雪 Moderate Snow 402 大雪 Heavy Snow 403 暴雪 Snowstorm 404 雨夹雪 Sleet 405 雨雪天气 Rain And Snow 406 阵雨夹雪 Shower Snow 407 阵雪 Snow Flurry 408 小到中雪 Light to moderate snow 409 中到大雪 Moderate to heavy snow 410 大到暴雪 Heavy snow to snowstorm 499 雪 Snow 456 阵雨夹雪 Shower Snow 457 阵雪 Snow Flurry 500 薄雾 Mist 501 雾 Foggy 502 霾 Haze 503 扬沙 Sand 504 浮尘 Dust 507 沙尘暴 Duststorm 508 强沙尘暴 Sandstorm 509 浓雾 Dense fog 510 强浓雾 Strong fog 511 中度霾 Moderate haze 512 重度霾 Heavy haze 513 严重霾 Severe haze 514 大雾 Heavy fog 515 特强浓雾 Extra heavy fog 900 热 Hot 901 冷 Cold 999 未知 Unknown

配置 在配置中，设置组件的年月日、背景颜色和时间条颜色等。 图5 配置 统一配置 是否显示未来天气预测：是否展示未来一周的天气预报。 背景颜色：天气预报的背景颜色。 今日温度 是否显示：是否显示今日温度。 字体：今日温度的字体、大小和颜色等设置。 天气图标 是否显示：是否显示天气图标。 图标大小：天气图标的大小。 图标颜色：天气图标的颜色。 城市名字 是否显示：是否显示城市名字。 字体：城市名字的字体、大小和颜色等设置。 今日天气 是否显示：是否显示今日天气。 字体：今日天气的字体、大小和颜色等设置。 当前星期 是否显示：是否显示当前星期。 字体：今日星期的字体、大小和颜色等设置。 当前日期 是否显示：是否显示当前日期。 字体：今日日期的字体、大小和颜色等设置。 当前时间 是否显示：是否显示当前时间。 字体：当前时间的字体、大小和颜色等设置。 今日其他指标 是否显示：是否显示今日其他天气指标。 字体：今日其他天气指标的字体、大小和颜色等设置。 未来天气图标 是否显示：是否显示未来天气图标。 图标大小：未来天气图标的大小。 图标颜色：未来天气图标的颜色。 未来最高温度 是否显示：是否显示未来几天的最高温度。 字体：未来几天最高温度的字体、大小和颜色等设置。 未来最低温度 是否显示：是否显示未来几天的最低温度。 字体：未来几天最低温度的字体、大小和颜色等设置。 未来星期展示 是否显示：是否显示未来几天星期。 字体：未来几天星期的字体、大小和颜色等设置。 未来日期展示 是否显示：是否显示未来几天的日期。 字体：未来几天日期的字体、大小和颜色等设置。

卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图4 卡片 背景 背景色：设置组件卡片的背景颜色。 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。 边距：组件中图表距离整个组件四边（上、下、左、右，如图3）的距离，默认为0，即铺满整个组件。 上边距：图表到组件边框顶部的距离。 右边距：图表到组件边框右侧的距离。 下边距：图表到组件边框底部的距离。 左边距：图表到组件边框左侧的距离。

配置 在配置中，设置多趋势组件的数值、同比和环比。 图5 配置 数值配置 显示数字：是否显示数字。 图6 显示数字 数字字体：设置数字的字体、大小和颜色等。 前缀：设置数字的前缀。 图7 设置数字前缀 字体大小：设置数字前缀的字体大小。 后缀：设置数字的后缀，如%。 字体大小：设置数字后缀的字体大小。 趋势图标：设置趋势的图标，可以自定义，也可以使用默认。 图标宽：设置趋势图标的宽度。 图标高：设置趋势图标的高度。 次要趋势排布：设置次要趋势的排布方式，如垂直、水平。 图8 垂直排布 趋势位置：次要趋势显示的位置。 趋势图标位置：次要趋势相对于数字的位置。 同比 是否显示：是否显示同比次要趋势。 趋势名称：设置趋势的名称。 趋势名称字体：设置趋势名称的字体、大小和颜色。 数字字体：设置趋势数字的字体、大小和颜色。 前缀：设置趋势数字的前缀。 字体大小：设置趋势数字前缀的字体大小。 后缀：设置趋势数字的后缀，如%。 字体大小：设置趋势数字后缀的字体大小。 环比 是否显示：是否显示环比次要趋势。 趋势名称：设置趋势的名称。 趋势名称字体：设置趋势名称的字体、大小和颜色。 数字字体：设置趋势数字的字体、大小和颜色。 前缀：设置趋势数字的前缀。 字体大小：设置趋势数字前缀的字体大小。 后缀：设置趋势数字的后缀，如%。 字体大小：设置趋势数字后缀的字体大小。

setLocalStorage 用于设置某个localStorage的值，使用方式参考如下： /* @param {string} key * @param {string/obj} value * @param {number} expires */ HttpUtils.setLocalStorage("key","value",1000) 内置API支持设置localstorage的失效时间，单位为s。

getCsrfToken 通过ajax的方式，调用平台的接口时使用，使用方式参考如下： /* * 如果使用平台桥接器的方式，平台会自动在请求header中添加csrf-token头。 */ HttpUtils.getCsrfToken(function(csrfToken) { $.ajax({ headers: { CS RF-Token: csrfToken }, }) });

getUrlParam 用于获取查询字符串中的参数，使用方式参考如下： /* * 例如某个页面的URL为“https://10.10.10.1:12900/magno/render/cool__app_0000000000NABzEjpNIH/page1?param=1”, 通过执行 * HttpUtils.getUrlParam("param")返回该参数的值“1”。 */ HttpUtils.getUrlParam("param")

refreshToken 用于手动刷新页面的accesstoken，通常用在执行退出逻辑时，执行该方法刷新页面的accesstoken。使用方式参考如下： /* @param {*} connector * @param {*} successCallBack * @param {*} errorCallback */ HttpUtils.refreshToken(connector,successCallBack,successCallBack)

卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3 卡片 背景 背景色：设置组件卡片的背景颜色。 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。 边距：组件中图表距离整个组件四边（上、下、左、右，如图2）的距离，默认为0，即铺满整个组件。 上边距：图表到组件边框顶部的距离。 右边距：图表到组件边框右侧的距离。 下边距：图表到组件边框底部的距离。 左边距：图表到组件边框左侧的距离。 参考模板：系统为您预置了单选和多选两种类型的模板，请根据实际业务场景进行选择。

配置 在配置中，设置下拉选择框和下拉弹出框。 图4 配置 下拉选择框设置 开启多选：是否开启多选。 默认选择：下拉框默认的选择项，单击“新增默认选项”，可新增多个选项。“开启多选”设置为“开启”时，才会显示该参数。 默认选择项：下拉框默认的选择项。“开启多选”设置为“关闭”时，才会显示该参数。 展开样式：设置下拉框选项的展开样式。 字体：下拉框中字体的大小、颜色等设置。 背景颜色：设置下拉框的背景颜色。 边框颜色：默认状态下，下拉框边框的颜色。 边框聚焦颜色：鼠标选中下拉框时，边框的颜色。 边框悬浮颜色：鼠标悬浮在下拉框上时，边框的颜色。 占位符：没有输入内容时，展示的文字内容。 是否禁用：是否禁用该下拉框，禁用后，用户不可选择内容。 是否可输入：禁用后，只能在下拉框中选择，无法输入查找。 下拉弹出框设置 最大高度：设置下拉弹出框的最大高度。 背景颜色：设置下拉弹出框的背景色。 字体颜色：设置下拉弹出框中字体的颜色。 选中态背景颜色：设置选中某项内容时，背景的颜色。 选中态字体颜色：设置选中某项内容时，字体的颜色。 鼠标悬浮时背景颜色：设置鼠标悬浮在某项内容上时，背景的颜色。 鼠标悬浮时字体颜色：设置鼠标悬浮在某项内容上时，字体的颜色。

页面开发流程 在AstroCanvas可视化开发页面，通过拖拽组件、设置页面布局、对接业务数据等，即可构建AstroCanvas大屏&PC端/移动端页面，具体流程如图4所示。 图4 页面开发流程 页面设置 配置页面屏幕大小、适应方式、背景颜色或背景图片。更多介绍，请参见如何进行设置页面。 构思布局 根据大屏高保真设计或构思，划分基本布局，并拖拽对应的组件到画布中。如何添加组件到画布中，请参见组件管理。 组件设置 为组件对接业务数据、根据大屏互动形式设置交互动作、根据UI设计设置组件的样式、颜色等。支持预览页面、查看整体效果，按需调整，优化布局细节。 各组件功能介绍，请参见组件介绍。 组件数据源设置，请参见数据接入。 如何设置组件交互动作，请参见交互设置。 保存发布页面 保存开发好的页面，并发布。更多介绍，请参见页面管理。

卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3 卡片 卡片装饰：卡片装饰设置，可根据自身的业务需求选择不同的卡片样式。单击“清除样式”，可清除已设置的装饰样式。 标题 标题：是否显示该组件标题。 内容：组件标题内容。 字体：文字的字体、大小、颜色设置。 对齐：标题相对于组件的对齐方式。 标题背景色：设置标题的背景颜色。 内边距：标题与组件框上下左右四个边界之间的距离，单位默认px。 标题偏移：组件标题与箭头水位图之间的偏移量。 背景 背景色：设置组件卡片的背景颜色。 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。 边距：组件中图表距离整个组件四边（上、下、左、右）的距离（参见图2），默认为0，即铺满整个组件。 上边距：图表到组件边框顶部的距离。 右边距：图表到组件边框右侧的距离。 下边距：图表到组件边框底部的距离。 左边距：图表到组件边框左侧的距离。 参考模板：系统预置的组件样式模板，支持默认模板和标签模板两种样式。 边框圆角：边框的圆角，四个角弧度取值范围为0~500，单位px。 图表背景：图表的背景颜色。 图表标题：图表标题是否显示，支持自定义或者从系列中获取。

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图4 图形 颜色：设置图表中，图形的颜色。 统一配置 是否展现：是否展示水位图开关。 横坐标：水位图整体在组件位置中的横坐标百分比。 纵坐标：水位图整体在组件位置中的纵坐标百分比。 直径：水位图整体大小宽度。 水波颜色：设置水波颜色。 水波背景色：设置水波背景色。 波纹振幅：水波动画波纹震动大小。 显示双波纹：水波动画是否显示双波纹。 次波纹颜色：显示双波纹时，第二波纹颜色。 标签是否展现：水位图中心标签字符展现开关。 标签位置左偏移：水位图中心标签字符在水位图中的左边偏移位置。 标签位置上偏移：水位图中心标签字符在水位图中的上边偏移位置。 标签字体：水位图中心标签字体设置（字体样式、粗细、大小、颜色）。 波浪上时文本颜色：当水位图淹没标签字体时显示的字体颜色。 轮廓样式是否展现：水位图外层轮廓展示开关。 边框宽度：水位图外层轮廓宽度。 颜色：轮廓颜色样式设置，可以设置为单色或渐变色。

卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3 卡片 背景 背景色：设置组件卡片的背景颜色。 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。 边距：组件中图表距离整个组件四边（上、下、左、右，如图2）的距离，默认为0，即铺满整个组件。 上边距：图表到组件边框顶部的距离。 右边距：图表到组件边框右侧的距离。 下边距：图表到组件边框底部的距离。 左边距：图表到组件边框左侧的距离。

配置 在配置中，设置组件的文本、段落和文本滚动方向。 图4 配置 文本设置 文本内容：请输入文本内容，您也可以从后台数据中获取文本内容，详情请参见从数据中获取文本内容。 字体：设置文本字体、大小和颜色等。 文本装饰：为文本添加下划线、删除线和上划线。 段落设置 内容对齐方式：文本内容为多行时，支持居中、左对齐、右对齐和两端对齐。 文本位置：文本内容为一行时，支持居中、左对齐和右对齐。 行高：设置行高。 文字间距：设置文字之间的间距。 首行缩进：文本首行是否缩进，设置为0，表示不缩进。 文本滚动 滚动显示：文本是否滚动显示。 滚动方式：设置文本滚动方式，支持向上滚动、向下滚动、向左滚动和向右滚动。 滚动速度：设置文本滚动速度。 问号提示 问号提示：是否显示问号提示。 提示文本：输入问号提示的文本内容。 问号大小：设置问号的大小。 问号颜色：设置问号的背景颜色。 气泡位置：设置提示气泡的显示位置，如右上方、正上方。 提示背景：设置提示气泡的背景颜色。 新增条件格式：单击“新增条件格式”，可设置条件和响应数据列的样式。如何新增条件格式，请参见新增条件格式。

操作步骤 参考如何登录AstroCanvas中操作，登录AstroCanvas界面。 在AstroCanvas界面的项目列表中，单击已创建的项目，进入项目。 在主菜单中，选择“项目设置”，进入项目设置页面。 参考设置项目锁中操作，获取项目锁。 在左侧导航栏中，选择“组件”。 单击“本地调试设置”，进行本地调试设置。 在本地开发组件后，频繁的打包组件包上传至公共环境再查看页面显示效果，是一件效率极低的事情。通过该配置，可打通本地环境与公共环境，实现实时在线调测组件。 单击“检查更新”，检查组件是否有版本更新，若有新版本组件，请单击“升级所有插件”。 您也可以单击待升级插件后的，对组件进行升级。 图1 升级组件 单击“启用模拟数据”，对项目中的组件数据来源进行统一控制。 在页面中，组件数据可来自模拟数据或访问业务接口获取。通过是否开启“启用模拟数据”，可对项目中的组件数据来源进行统一控制。 在进行前台页面开发时，经常要通过桥接器动态调用后台的接口来获取后台数据。在页面实际开发过程中，可能后台接口还未开发完成，这时可通过修改桥接器使用静态数据来进行调测。但是当组件较多时，用户逐个修改组件的桥接器配置会过于繁琐，可直接将桥接器配置为调用后台接口，在“项目设置”中打开“启用模拟数据”开关，一键开启当前项目中所有桥接器使用模拟数据，也可以在“组件”页签的组件前单独通过开关图标设置各组件的桥接器是否使用模拟数据，对个别组件进行个性化设置，有效减少手动修改操作。 该功能的实现原理是：系统在桥接器代码中已增加mockData属性来记录桥接器是否启用了模拟数据，同时在桥接器父类代码中预置了getMockData函数，开发人员只需在自定义桥接器中自己覆写getMockData函数，实现获取模拟数据的逻辑即可。当“启用模拟数据”开关打开时，mockData属性会记录启用了模拟数据，getMockData函数将界面实际配置的桥接器数据覆盖，从而使用模拟数据替换界面桥接器配置的后台接口。当调测结束时，须关闭“启用模拟数据”。 桥接器中getMockData函数示例代码如下： getMockData: function() { return new OverlaysDataViewModel(); },

init 组件初始化入口API，初始化组件通用能力，负责注册组件事件和组件动作。主逻辑建议如下： init() { this._super.apply(this, arguments); // 组件通用能力构建，调用父类constructor,必须要写 this.render(); // 渲染组件 this.registerWidgetActionAndEvent(); // 注册组件事件和动作 },

callFlowConn 监听必要的dom尺寸变化事件，使用方式参考如下： /** * 根据组件配置的数据类型（数据集、桥接器、数据源、静态数据）获取数据， 未配置默认调用getMockData * @param {*} connector Connector实例 * @param {*} param 参数, 没有特殊需求可以直接传入 {} ，如果传入 { test: 1 }, 发起请求时请求体会带上 test 的值 * @param {*} callbackFunc 将数据传入回调函数 */ this.callFlowConn(this.connectorIns, param, this.dealRespData.bind(this));

render 组件核心渲染API，负责组件的实例化、数据调用及事件、动作的实际实现。主逻辑建议如下： render() { var thisObj = this; var widgetProperties = thisObj.getProperties(); // 获取组件属性 var elem = thisObj.getContainer(); // 获取组件dom，对后续操作dom的逻辑备用 var items = thisObj.getItems(); var connectorProperties = thisObj.getConnectorProperties(); // 获取组件Connector数据 // 监听resize事件, 画布resize时需要重新绘制一下，如果有其他需要，参数可以传入函数，resize时会调用 this.registerResizeEvent(); },

getConnectorInstanceByName 通过Connector名称获取Connector实例，再通过process方法调用接口获得数据。使用方式参考如下： const connectorInst = thisObj.getConnectorInstanceByName('selectDataConnector'); /** * @param renderCbk 成功回调 * @param errCbk 失败回调 */ connectorInst.process(renderCbk, errCbk) 其中，“connectorInst”用来调用数据源数据接口。

getContainer 一般用于在初始化阶段，获取组件dom，无入参，使用方式参考如下： var elem = thisObj.getContainer(); var readerVm = new Vue({ el:$("#select", elem)[0], }), getContainer是页面上组件的父容器，具有唯一标识。组件内操作dom的场景必须都加上这个父容器，如上面的代码。

getMessages 一般用于在初始化阶段，获取该组件国际化配置文件中定义的国际化文件内容，推荐配置vue和vueI18n使用，无入参，使用方式参考如下： const i18n = HttpUtils.getI18n({ locale: HttpUtils.getLocale(), messages: thisObj.getMessages() }); getMessages()返回messages-en.json和messages-zh.json两个国际化文件中定义的国际化内容。

页面数据来源介绍 组件是大屏应用页面的组成元素，配置页面数据即为配置组件数据。AstroCanvas中，页面组件的数据来源包括非数据源（包括桥接器预置、静态数据和数据集等）和数据源（包括关系型数据库、Roma连接器、AstroZero和HTTP连接器等）。选中组件，单击组件上方的，即可配置组件在页面呈现数据的来源。 图1 配置组件数据 非数据源 桥接器预置 通过桥接器动态调用后台的接口，来获取后台数据展示在页面上，相关配置请参见桥接器预置。 静态数据 选择该方式时，页面会获取“输入数据”中的静态数据展示在页面上，详情请参见静态数据。 AstroCanvas已预置了静态数据，如果需要自定义静态数据，请重置数据。 数据集 选择在“数据中心”中配置的数据集，作为组件数据来源。选择此方式时，请确保数据集已在数据中心创建，详情请参见数据中心。 不是所有的组件都支持数据源设置，组件开发时的属性配置代码中添加“dataSetting”相关配置时，才支持数据源设置。例如“基本柱图”组件的“BarChart_Widget.editor.js”中定义代码如下： propertiesConfig: [ { config: [ { "type": "connectorV2", "name": "BarOrLineChartDataConnector", "label": "BarOrLineChartDataConnector", "model": "SingleRepireDataViewModel", "value": "" }, { "type": "dataSetting", "mapping": { "x": { "type": "category", "label": "x", "required": true }, "y": { "type": "value", "label": "y", "required": true }, "s": { "label": "s", "series": [ { "type": "", "label": "", "required": false } ] } }, "mock": {}, "model": "SingleRepireDataViewModel" } ] } ], 页面数据集：通过页面数据集，可实现多个组件对接同一个数据输入，从而减少重复的请求和配置。更多介绍，请参见页面数据集。 数据源 支持直接从数据源（关系型数据库、Roma连接器、 DLI 和DWS等），获取数据来展示在页面上。更多介绍，请参见其他数据源。 父主题： 数据接入