华为云用户手册

配置示例 input配置示例如下，配置后效果如图1所示。 { type: 'text', name: 'commProps.myText', value: '我是text的类型', label: { zh_CN: 'text的类型', en_US: 'text Type Example' }, placeholder: { zh_CN: '请输入标题内容', en_US: 'Enter the title content.' }, prefix: '↑', suffix: '%' } 图1 设置后效果

savePropertiesForWidget() 该API用于在开发态中，保存当前组件的高级设置属性信息。 /* * @param {*} props {} */ magno.savePropertiesForWidget({ // 属性应该与editor.js中的属性对应 barChartProps: JSON.stringify(_this.barPropList), barCommProps: JSON.stringify(_this.barCommProps) }); 属性值需要是String，如果为对象形式则需要做String转换。

指标 指标是指可视化组件中，对除可视化图形之外的具体补充，即主要以文字和数字的表现形式，为可视化组件提供具体数值的参考。 图15 指标 显示指标：图表中是否显示指标。 标题内容：自定义指标的文字内容。 标题字体：设置指标标题的字体、大小和颜色等。 自动求和：指标是否自动求和。 数值内容：“自动求和”设置为“否”时，可自定义指标数值。如果为自动求和，此处的值为工程管理value和环境管理value的数据之和。 数值字体：设置指标数值的字体、大小和颜色。

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

图例 图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。 图8 图例 统一配置 图例：是否显示图例，如工程管理、环境管理。图例文字内容来源于数据模型下“s”的取值。 图9 图例文字来源 水平对齐方式：设置图例的水平对齐方式，支持左对齐、居中、右对齐和按照百分比设置。 垂直对齐方式：设置图例的垂直对齐方式，支持左对齐、居中、右对齐和按照百分比设置。 排列方向：设置图例的排列方向，支持水平和垂直两种方式。 类型：存在很多图例，导致图表中无法全部显示，此时可设置图例类型，即通过滚动翻页还是普通换行来查看图例。设置为“滚动翻页”时，支持设置翻页箭头的宽高、图标默认颜色、图标选中颜色和页码字体。 图10 滚动翻页效果 图11 普通换行效果 图例项宽度：设置图例的宽度，支持自动和自定义。 图例间隔：设置图例项之间的间隔。 图例标记 图例标记：设置图例前图标的形状。 标记高度：设置图例前图标的宽度和高度。 图例系列名 字体：设置图例的字体、颜色和大小。 图例字符：设置图例显示的字符数，支持全显和省略。设置为“省略”时，支持设置图例显示的文字数量。 图12 图例字符设置效果 数据值：图例中是否显示数值。设置为“显示”时，可设置如下参数。 字体：设置图例中数值的字体、大小和颜色等。 数值左间距：设置系列名和数据之间的间距。 前缀：数值前是否显示前缀。 前缀内容：设置前缀的显示内容。 前缀字体：设置前缀的字体、大小和颜色等。 前缀右间距：设置前缀和数值之间的间距。 后缀：数值后是否显示后缀。 后缀内容：设置后缀的显示内容。 后缀字体：设置后缀的字体、大小和颜色等。 后缀左间距：设置后缀和数值之间的间距。 百分比：是否显示百分比。设置为“显示”时，支持设置如下参数。 数字字体：设置百分比中数值的字体、大小和颜色等。 百分号字体：设置百分比中百分号的字体、大小和颜色等。 百分号左间距：设置数值和百分比之间的间距。

编辑库 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在主菜单中，选择“我的资产”。 在左侧导航栏中，单击“我的库”。 将鼠标放在对应的库上，单击。 图6 编辑库 在库编辑页面，单击右上角的，获取锁。 按需在线修改库文件，单击。 在弹出的提示框中，单击“确定”。 在库更新页面，按需设置库参数，单击“更新”。 返回我的库页面，在组件上单击，可查看到新版本的库。 图7 查看新版本的库

更新库 更新组件前，请先获取锁，否则更新按钮置灰不可用。 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在主菜单中，选择“我的资产”。 在左侧导航栏中，单击“我的库”。 将鼠标放在对应的库上，单击，获取锁。 将鼠标放在对应的库上，单击，进入更新库页面。 图4 进入更新库页面 在库更新页面，上传新的库、设置库参数，单击“更新”。 图5 设置库信息 将鼠标放在对应的库上，单击，可查看到新版本的库。 ：单击该图标，可下载当前版本库。 ：单击该图标，可在线编辑该版本库。

自定义动作交互设置 选中某个echarts组件，单击。 在自定义动作中，单击“新增自定义动作”，修改动作名称为“设置数据高亮”。 图1 新建自定义动作 在动作实现中，输入如下代码，调用echarts提供的动作API。 echartsInst.dispatchAction({ type: 'highlight', dataIndex: params.dataIndex, }); 单击“新增参数”，设置参数名称为“dataIndex”。 图2 新增dataIndex字段 选中echarts组件，单击，进入组件交互页面。 在作为触发器中，单击“交互事件”，选择“组件加载”。 在响应动作中，单击“响应动作”，选择“组件响应”。 在动作详情中，“响应组件”选择echarts组件，“响应动作”选择“设置数据高亮”，“dataIndex”设置为“0”。 图3 设置动作详情 保存交互设置，预览页面，echarts组件渲染首个数据获得高亮效果。 图4 查看渲染效果

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

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

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

坐标轴 坐标轴是指对图表组件，进行坐标系相关样式、颜色、位置和行为的设置。 图9 坐标轴 基本信息 半径：设置图表的半径。 横坐标(%)：设置图表的横坐标。 纵坐标(%)：设置图表的纵坐标。 绘制类型：设置图表绘制类型，支持多边形和圆形。 指示器名称 显示名称：是否显示名称。 文字风格：设置名称显示风格，支持正常、斜体和倾斜体。 字体：设置名称的字体、大小和颜色等。 指示器名称与指示器轴的距离：设置指示器名称与指示器轴之间的距离。 轴分割段数：设置轴分割段数。 分割线 显示分割线：是否显示分割线。 颜色设置：设置分割线颜色，单击“新增颜色设置”，可添加新的颜色。 分割区域 显示分割区域：是否显示分割区域。 颜色设置：设置分割区域颜色。 坐标轴轴线 显示轴线：是否显示轴线。 轴线颜色：设置轴线颜色。 数据系列 名称：系列的名称。 最大值：设置系列的最大值。 最小值：设置系列的最小值。 颜色：设置系列颜色。

图例 图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。 图6 图例 显示图例：是否展示图例。图例文字内容来源于数据模型下“s”的取值。 图例选择模式：设置图例选择模式，支持单个和多个。 小图标：设置图例小图标样式，如圆形、矩形、三角形等。 图列排列：设置图例的排列样式，如水平、垂直。 图例宽度：设置图例的宽度。 图例高度：设置图例的高度。 位置选择：设置图例的显示位置，支持左、右和居中显示。 图例间隔：设置图例之间的间隔。 字体：设置小图标的字体、颜色和大小等。图例文字内容来源于数据模型下“s”的取值。 文字风格：设置小图标文字的风格，支持设置为正常、斜体和倾斜体。 图例类型：存在很多图例，导致图表中无法全部显示，此时可设置图例类型，即通过滚动翻页还是普通换行来查看图例。 翻页按钮：翻页按钮的颜色。 翻页按钮不激活：翻页按钮不激活时的颜色。 自定义图例显示：开启后，可调整图例名称显示字符长度。默认关闭，即显示图例所有字符。

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图5 图形 颜色：设置图表中，图形的颜色。 统一配置 标记图形：设置标记的图形，如圆形、矩形等。 标记大小：设置标记的大小。 折线宽度：设置折线的宽度。 折线类型：设置折线类型，如实线、虚线等。 数据标签：是否显示数据标签，支持设置标签的字体、大小、颜色。 数据系列 系列名称：原始数据中默认的系列名称，可通过设置“显示名称”，进行修改。 显示名称：自定义图表中系列的显示名称。 标记图形：设置标记的图形，支持无、圆形、矩形和圆角矩形。 标记大小：设置标记的大小。 折线拐点标志颜色：设置折线拐点的标志颜色。 折线宽度：设置折线宽度。 折线类型：设置折线类型，支持实线、点线和虚线。 折线不透明度：设置折线的不透明度。 折线颜色：设置折线颜色。 区域填充不透明度：设置区域填充的不透明度。 区域填充颜色：设置区域填充颜色。 数据标签：是否显示标签。设置为显示时，支持设置标签的字体、颜色和大小等。

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

数据迁移 登录AstroZero中的业务大屏界面，导出项目数据。 使用华为账号，登录华为云网站，在顶部导航栏右侧单击“控制台”，进入华为云控制台。 在左侧导航栏上方，单击，选择服务实例所在的区域项目。 单击，在查找框中搜索“Astro轻应用”，单击查找到的结果，进入AstroZero服务控制台。 在主页中，单击“进入首页”，进入AstroZero应用开发页面。 单击主页中的“业务大屏”，或者左侧导航栏中的“业务大屏”，进入业务大屏界面。 图1 单击业务大屏 单击待导出项目上的，进入项目发布页面。 将鼠标放在对应的版本上，单击。 图2 单击下载图标 在前端运行包下载页面，运行容器选择“Astro Canvas”，单击“下载”，将项目下载到本地。 图3 导出项目 在已购买的AstroCanvas中，导入项目。 在AstroZero服务控制台的左侧导航栏中，单击“Astro大屏应用”。 在已购买的AstroCanvas实例中，单击“进入首页”，进入AstroCanvas界面。 在项目列表页面，单击“导入项目包”。 图4 导入项目包 选择1.h中导出的项目包，单击“打开”。 导入成功后，在项目列表中，可查看到已导入的项目。

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

配置示例 tab配置示例如下，配置后效果如图1所示。 { type: 'tab', name: 'commProps.myTab', value: true, label: { zh_CN: 'tab的类型', en_US: 'tab Type Example' }, options: [{ label: { zh_CN: '开启', en_US: 'Enable' }, value: true }, { label: { zh_CN: '关闭', en_US: 'Disable' }, value: false } ] } 图1 配置后效果

图例 图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。 图7 图例 显示图例：是否展示图例。图例文字内容来源于数据模型下“s”的取值。 图例标记：设置图例小图标形状。 图例宽高：设置图例的宽度和高度。 图例间隔：设置图例之间的间隔。 字体：设置图例的字体、颜色和大小等。 左间距：图例到柱图组件左侧距离占组件高度的百分比或图例位置的对齐方式设置。 上间距：图例到柱图组件顶部距离占组件高度。 翻页按钮：翻页按钮的颜色。 翻页按钮不激活：翻页按钮不激活时的颜色。 自定义图例显示：是否开启自定义图例显示设置。开启后，可调整图例名称显示字符长度。默认关闭，即显示图例所有字符。

坐标轴 坐标轴是指对图表组件，进行坐标系相关样式、颜色、位置和行为的设置。 图10 坐标轴 x轴 X轴：是否显示X轴。 轴标题：X轴标题。 字体：坐标轴字体、颜色、大小设置。 标题偏移：标题相对于轴线的偏移。 标题旋转：标题旋转角度。 轴线：是否显示轴线，支持设置轴线颜色。 刻度：是否显示刻度。 刻度标签：刻度标签样式，包括是否自动调节标签、显示所有标签。 刻度标签字体：刻度标签的字体、字体颜色、字体大小设置。 标签行为：标签字数过多时是否进行处理，包括字数过多是否换行、字数过多是否省略和字数过多不做处理。 标签旋转：标签旋转角度。 网格线：是否显示网格线。 反转：是否对轴数据进行反转。 y轴 Y轴：是否显示Y轴。 轴标题：Y轴标题。 字体：坐标轴字体、颜色、大小设置。 标题偏移：标题相对于轴线的偏移。 标题旋转：标题旋转角度。 轴线：是否显示轴线，支持设置轴线颜色。 刻度：是否显示刻度。 刻度标签字体：刻度标签的字体、字体颜色、字体大小设置。 最小间隔：坐标轴最小间隔大小。 标签旋转：标签旋转角度。 网格线：是否显示网格线。 轴起始值：设置Y轴的起始值。为方便数据展示，输入为接入数据最大值时，图表Y轴起始值为最大值的一半。 左Y轴单位：设置左侧Y轴的单位。 反转：是否对轴数据进行反转。 柱间阴影：柱间是否显示阴影，支持自定义阴影颜色。 标签展示：设置Y轴标签展示样式，如默认或计数单位。

指标 指标是指可视化组件中，对除可视化图形之外的具体补充，即主要以文字和数字的表现形式，为可视化组件提供具体数值的参考。 图11 指标 显示指标：是否显示指标。 指标内容：设置指标内容。 指标字体：设置指标内容的字体、大小、颜色等。 指标类型：设置指标类型，支持总和、平均值和自定义。 数值内容：“指标类型”设置为“自定义”时，支持自定义数值内容。 数值字体：设置数值字体、大小、颜色等。 数值位数：设置数值小数点后的位数。

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图6 图形 颜色：设置图表中，图形的颜色。 统一配置 光圈标记：是否开启光圈标记。 数据排序：是否开启数据排序。 阶梯瀑布：是否阶梯瀑布效果显示。 横向柱条：是否横向柱条效果显示。 柱条圆角：柱状条边框圆角设置，取值为“0”时为直角，“100”为圆角。 柱条宽度：柱状条相对于X轴单位间隔的宽度。 数据标签：是否显示数据标签，即柱状条旁是否显示数值。开启后，支持设置数值显示位置和数值颜色。 数据标签最大值/最小值：是否显示柱状条数值的最大值或者最小值。 数据系列 系列名称：原始数据中默认的系列名称，可通过设置“显示名称”，进行修改。 显示名称：自定义图表中系列的显示名称。 柱条宽度：柱状条相对于X轴单位间隔的宽度。 柱条颜色：设置柱条颜色，如单色或渐变色，支持自定义柱状条的颜色。 定制最大柱条：支持对最大的柱条自定义设置，包括颜色等。 柱条圆角：柱状条边框圆角设置，取值为“0”时为直角，“100”为圆角。 数据标签：是否显示数据标签，即柱状条旁是否显示数值。开启后，支持设置数值显示位置、数值颜色、前缀和后缀。

图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图4 图形 碑节点样式 里程碑样式：设置里程碑的样式，可以使用预置样式，也可以使用图片。 节点样式：选择系统预置的里程碑样式，“里程碑样式”选择“预置”时，才会显示该参数。 选择图片：选择本地上传的图片或连接器中的图片，作为里程碑的样式。“里程碑样式”选择“图片”时，才会显示该参数。 图片宽度：设置所选择图片的宽度。“里程碑样式”选择“图片”时，才会显示该参数。 图片高度：设置所选择图片的高度。“里程碑样式”选择“图片”时，才会显示该参数。 上下偏移量(px)：设置所选择图片的上下偏移量，单位px。“里程碑样式”选择“图片”时，才会显示该参数。 左右偏移量(px)：设置所选择图片的左右偏移量，单位px。“里程碑样式”选择“图片”时，才会显示该参数。 轴条 轴条样式：设置轴条的样式，如线状、点状。 轴条默认样式：设置轴条的默认样式。“显示尾”需要设置为“显示”。 图5 轴条默认样式 轴条选中样式：设置轴条选中时的样式。“显示头”需要设置为“显示”。 图6 轴条选中样式 轴条粗细：设置轴条的粗细。 显示头：设置轴条的选中样式时，该参数需要设置为“显示”。 头轴条样式：设置头轴条选中时的样式。“显示头”需要设置为“显示”。 图7 头轴条样式 显示尾：设置轴条的默认样式时，该参数需要设置为“显示”。 尾轴条样式：设置尾轴条选中时的样式。“显示尾”需要设置为“显示”。 详情 上下偏移量：设置详情的上下偏移位置，单位px。 左右偏移量：设置详情的左右偏移位置，单位px。 状态 上下偏移量：设置状态的上下偏移位置。 左右偏移量：设置状态的左右偏移位置。 时间 上下偏移量：设置时间的上下偏移位置。 左右偏移量：设置时间的左右偏移位置。 数据系列 显示碑节点样式：是否显示碑节点样式。 默认状态样式：设置碑节点的默认状态样式，支持图片改色和上传图片两种样式。 默认颜色：设置碑节点的默认样式的颜色。 选中状态样式：设置碑节点的选中状态。 选中颜色：设置碑节点选中时的颜色。 高亮状态样式：设置碑节点高亮状态的样式。 高亮颜色：设置碑节点高亮状态的颜色。 聚焦颜色：设置碑节点聚焦状态的颜色。 轴条默认颜色：设置碑节点轴条的默认颜色，数据系列1中无轴条设置选项。 轴条选中颜色：设置碑节点轴条的选中颜色，数据系列1中无轴条设置选项。 显示详情：是否显示详情。 默认详情字体：设置默认详情的字体、颜色和大小等。 选中详情字体：设置选中详情的字体、颜色和大小等。 高亮详情字体：设置高亮详情的字体、颜色和大小等。 显示时间：是否显示时间。设置为显示时，支持设置默认/选中/高亮时间字体的颜色、大小等。 显示状态：是否显示状态。设置为显示时，支持设置默认/选中/高亮状态字体的颜色、大小等。

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

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

配置项说明 表1 list配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "list" 配置项类型。 name String 是 name:"intervalColors" 双向绑定list名称。 label Object 否 label: { "zh_CN": "中文标签", "en_US": "English Label" } 配置项的标签，需要国际化。 listFixed Boolean 否 listFixed: true 列表个数固定，不展示新增、删除功能，默认为true展示。 labelOnce Boolean 否 labelOnce: true 仅在list首项展示一次label。 设置为true时，只有list中第一项展示list label。 设置为false时，每一项都展示label。 showIndex Boolean 否 showIndex: true label末尾显示计数。 设置为true时，label末尾进行计数(index+1)展示为label1，label2…。 设置false时，每一个label内容相同。 displayMode String 否 displayMode: “box”displayMode: “simple” 显示为下拉框中或平铺。 box：显示在下拉框中。 simple：直接显示。 events Object 是 events: { addItemFunc: function (vm, index) { return { size: 1, color: 'rgba(11,129,246,1)'} }, itemDelCallBack: function (values) { if (values && values.length) { values[values.length - 1].size = 1; } }, }, 增加和删除list中一项。默认有增加删除功能，所以需要添加addItemFunc和itemDelCallBack函数。 如果noAdd为true，不需要添加。 childItems Array 是 childItems: [ { type: "colorpicker", name: "color", value: "rgba(11,129,246,1)", width: 26, showInput: false, }, { type: "input-number", name: "number", prop: "number", label: "序列号" originFrom: "advanceEditvm", value: "123", width: 74, labelWidth: 20, }] list中每一项含有的基础配置项。 基础配置项中可以通过加入width调整一行中的占比，例如3个options的width是20,30,30，三个配置项就会出现在一行。如果width是20,30,70，前两个会在一行，第三个占第二行的70%。 如果不加入width或者width占比为100，就会单独占一行。 基础配置项中也增加了labelWidth，在有label的情况下可以通过输入数字控制label的宽度（单位为px）。 tip Object 否 tip: { zh_CN: "当前排行榜展示的数据行数", en_US: "Number of data rows displayed in the current ranking page.", } label后会显示info提示。 allowNone Boolean 否 allowNone: true, 是否允许删除到空。默认为false，不允许删除到空。 helpLink String 否 helpLink: "http://..." 使用helpIcon。

配置示例 配置后效果，如图1所示。 { type: "list", name: "commProps.rowCusBg", displayMode: "simple", labelOnce: true, allowNone: true, label: { zh_CN: "背景色", en_US: "Background Color" }, helpLink: "https://***.html", childItems: [ { type: "colorpicker", name: "color", originFrom: "advanceEditvm", value: "", width: 26, showInput: false, }, { type: "string", name: "row", originFrom: "advanceEditvm", label: { zh_CN: "序列号", en_US: "Serial Number" }, value: "", width: 74, }, ], }, 图1 配置后效果

图例 图例是指在多维度可视化图形表达中，用以区分不同维度可视化图形的提示标识。 图5 图例 统一配置 图例：是否显示图例，如工程管理、环境管理。图例文字内容来源于数据模型下“s”的取值。 水平对齐方式：设置图例的水平对齐方式，支持左对齐、居中、右对齐和按照百分比设置。 垂直对齐方式：设置图例的垂直对齐方式，支持左对齐、居中、右对齐和按照百分比设置。 排列方向：设置图例的排列方向，支持水平和垂直两种方式。 类型：存在很多图例，导致图表中无法全部显示，此时可设置图例类型，即通过滚动翻页还是普通换行来查看图例。设置为“滚动翻页”时，支持设置翻页箭头的宽高、图标默认颜色、图标选中颜色和页码字体。 图例总宽高：设置图例项的宽度和高度，单位为“%”。 图例项宽度：设置图例的宽度，支持自动和自定义。 图例间隔：设置图例项之间的间隔。 图例标记 图例标记：设置图例前图标的形状。 标记宽高：设置图例前图标的宽度和高度。 图例系列名 字体：设置图例的字体、颜色和大小。 图例字符：设置图例显示的字符数，支持全显和省略。设置为“省略”时，支持设置图例显示的文字数量。 数据值：图例中是否显示数值。设置为“显示”时，可设置如下参数。 字体：设置图例中数值的字体、大小和颜色等。 数值左间距：设置系列名和数据之间的间距。 前缀：数值前是否显示前缀。 前缀内容：设置前缀的显示内容。 前缀字体：设置前缀的字体、大小和颜色等。 前缀右间距：设置前缀和数值之间的间距。 后缀：数值后是否显示后缀。 后缀内容：设置后缀的显示内容。 后缀字体：设置后缀的字体、大小和颜色等。 后缀左间距：设置后缀和数值之间的间距。 百分比：是否显示百分比。设置为“显示”时，支持设置如下参数。 数字字体：设置百分比中数值的字体、大小和颜色等。 百分号字体：设置百分比中百分号的字体、大小和颜色等。 百分号左间距：设置数值和百分比之间的间距。

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

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