检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
以在自定义事件中设置。 自定义事件交互设置 在大屏设计页面，从Echarts图表中拖拽一个折线图堆叠组件到画布中。 图1 拖拽折线图堆叠组件到画布中 选中折线图堆叠组件，单击。 在自定义事件中，单击“新增自定义事件”，修改事件名称为“echarts单击系列”。 图2 新建echarts单击系列事件
和数值颜色。 图例 图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。 图7 基本柱图图例 显示图例：是否展示图例。图例文字内容来源于数据模型下“s”的取值。 图例标记：设置图例小图标形状。 图例宽高：设置图例的宽度和高度。 图例间隔：设置图例之间的间隔。 字体：设置图例的字体、颜色和大小等。
指标是一种文本组件，用于在可视化页面中显示指标数据。 在大屏设计页面，从“全部组件 > 文本”中，拖拽“指标”组件至画布空白区域，如图1。 图1 指标 图2 边距样式说明 卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3 指标卡片
图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图6 水位图图形 颜色：设置图表中，图形的颜色。 统一配置 是否展现：是否展示水位图开关。 横坐标(%)：水位图整体在组件位置中的横坐标百分比。 纵坐标(%)：水位图整体在组件位置中的纵坐标百分比。
要根据实际情况设置全局变量和数据源等信息，如图2、图3。 图1 输入项目名称和页面标题 图2 配置全局变量 图3 设置数据源信息 通过模板新建页面 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在项目列表中，单击已创建项目的名称，进入对应的项目页面。
图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图6 玫瑰花饼图图形 颜色：设置图表中，图形的颜色。 统一配置 数据系列：是否显示该系列数据。如果不选中，会隐藏该组件中对应的系列数据。 南丁格尔图：是否使用南丁格尔图。 圆心角：设置
图表标题：图表标题是否显示，支持自定义或者从系列中获取。 图8 显示图表标题 图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图9 实心圆饼图图形 颜色：设置图表中，图形的颜色。 统一配置 数据系列：是否显示该系列数据。如果不选中，会隐藏该组件中对应的系列数据。
取值。 图例标记：设置图例小图标形状。 图例宽高：设置图例的宽度和高度。 图例间隔：设置图例之间的间隔。 字体：设置图例的字体、颜色和大小。图例文字内容来源于数据模型下“s”的取值。 左间距：图例到饼图组件左侧距离占组件高度的百分比或图例位置的对齐方式设置。 上间距：图例到饼图组件顶部距离占组件高度。
和颜色等。 图7 图表标题设置 图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图8 基本饼图图形 颜色：设置图表中，图形的颜色。 统一配置：统一配置中设置的内容，对图表中所有数据系列均生效。 数据系列：图表是否显示数据系列。
或者最小值。 图例 图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。 图7 双向柱图图例 显示图例：是否展示图例。图例文字内容来源于数据模型下“s”的取值。 图例标记：设置图例小图标形状。 图例宽高：设置图例的宽度和高度。 图例间隔：设置图例之间的间隔。 字体：设置图例的字体、颜色和大小。
体大小。 图例 图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。 图5 热力图图例 显示图例：是否展示图例。 位置选择：图例的位置。 顶部间隔：图例到组件顶部的间隔。 底部间隔：图例到组件底部的间隔。 可拖拽手柄：图例上是否展示可拖拽手柄。 图例宽度：设置图例的宽度。
发网站中常用的柱状图（vue2+Echarts）组件为例，向您介绍如何开发自定义组件。 本节使用的示例组件开发过程中使用了前端开发框架Vue及Echarts，请提前了解。 图1 最终呈现效果 开发自定义组件 下载图表模板。 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。
据的最小值。 图表标注和标线平均值：显示对应数据系列数据的平均值。 图例 图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。 图6 气泡图图例 显示图例：是否显示图例，图例文字内容来源于数据模型下“s”的取值。 图例标记：设置图例小图标形状和图例列表布局朝向。
字体、颜色和大小等。 图例 图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。 图6 雷达图图例 显示图例：是否展示图例。图例文字内容来源于数据模型下“s”的取值。 图例选择模式：设置图例选择模式，支持单个和多个。 小图标：设置图例小图标样式，如圆形、矩形、三角形等。
X轴数据轮播。 图7 数据系列轮播效果 图8 X轴数据轮播效果 间隔时间：设置图表的轮播时间间隔，不能大于24秒。 图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图9 多折线图图形 颜色：设置图表中图形的颜色。 统一配置
了解更多常见问题、案例和解决方案 热门案例 如何基于页面级的全局变量实现组件交互？ 自定义组件时，如何设置交互事件的输出变量？ 如何在数据集或跳转事件动作中设置变量？ 如何通过全局变量，实现组件数据的动态变化？ 如何使用高级表格的后台分页功能？ 如何使用高级表格的后台排序功能？ 如何使用高级表格的后台筛选功能？
明哪种协议允许使用，缓解数据包嗅探攻击。如何设置内容安全策略，请参见如何设置内容安全策略。 图5 设置内容安全策略 开启“内容安全策略”时，如果在浏览器无痕模式下预览页面，请确保“阻止第三方Cookie”已关闭，否则无法正常预览页面。 图6 关闭阻止第三方Cookie 父主题： 页面管理
拖入组件，根据业务需求开发页面。 页面创建完成后，单击页面上方的保存图标，保存页面。 单击页面上方的预览图标，预览应用页面。 如果页面预览效果和预期效果不一致，可再次返回开发页面进行调整。 单击页面上方的发布图标，进行页面发布设置。 发布链接：单击发布链接后的图标，将显示页面地址，单击该地址进入发布页。
全局变量 项目级全局变量 如何基于页面级的全局变量实现组件交互 如何设置页面间参数传递 自定义组件时，如何设置交互事件的输出变量 如何在页面URL参数中给全局变量赋值 如何在数据集或跳转事件动作中设置变量 如何通过全局变量，实现组件数据的动态变化
预置桥接器 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在编辑页面状态下，选中组件，单击组件上方的。 图1 单击数据 在数据类型中，选择“桥接器预置”，并选中所需的桥接器。 设置桥接器预置数据。 图2 设置桥接器参数 桥接器数据类型：桥接器的数据
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
