进度条表格

图表样式

进度条表格是由进度条和表格组成的组件，支持配置表格、表格列和翻页器的样式。

样式面板

• 搜索配置：单击样式面板右上角的搜索配置项图标，可在搜索配置面板中输入您需要搜索的配置项名称，快速定位到该配置项，系统支持模糊匹配。详情请参见搜索配置项。

• • 尺寸：包括组件的宽度和高度，单位为px。

  • 定位：包括组件的横坐标和纵坐标，单位为px。横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。

  • 旋转：以组件的中心为中心点，进行旋转，单位为度（°）。

    • 手动输入角度值，控制组件的旋转角度。

    • 单击图标，控制组件左右翻转样式。

    • 单击图标，控制组件上下翻转样式。

  • 不透明度：取值范围为0~1。为0时，图表隐藏；为1时，图表全部显示。默认为1。

• 表格

  • 轮播：打开是否轮播开关，设置轮播间隔和轮播方式。

  • 每页行数：设置表格每一页能展示的内容（行数）。

  • 文本样式：表格文本样式，包括文本字体样式、文字粗细、字号和颜色。

  • 基础样式：表格的基础样式。

    参数	说明
    开启斑马线	打开开关，开启斑马线样式；关闭开关，关闭斑马线样式。
    表格背景色	表格背景颜色。
    行高	表格每一行的高度。
    对齐方式	表格对齐方式，可选左对齐、居中对齐和右对齐。

  • 空数据样式：设置空数据下的缺省背景颜色和缺省的文案。

  • 斑马线色：设置基础样式开启斑马线开关后的斑马线颜色。

    说明

    当开启斑马线时，奇数行的背景色为表格背景色。

  • 表格边框：表格边框样式，包括边框宽度和颜色。

  • 内边距：表格内边界与顶部、底部、左侧和右侧的距离。

  • 溢出文本：设置溢出文本的样式

    参数	说明
    是否滚动	打开开关，当单元格文本溢出时可以滚动显示。
    匀速滚动	设置溢出文本的滚动模式。
    速率	设置溢出文本的滚动速率，单位为px/s。当打开匀速滚动时可配置。
    滚动时间	设置溢出文本的整体滚动时间，单位为s。

  • 表头：设置表格的表头样式，可单击控制表头的显隐。

    参数	说明
    对齐方式	表头对齐方式，可选左对齐、居中对齐和右对齐。
    文本样式	表头文本样式，包括文本字体样式、文字粗细、字号和颜色。
    排序选中样式	在预览和发布时，表头部分某一列的排序按钮被单击选中时显示的颜色。 说明 仅在列配置中某一列开启了是否可排序后，才可配置排序选中样式。
    边框样式	表头部分的边框样式，包括边框宽度和边框颜色。
    背景色	表头部分背景色。
    行高	表头的行高值。

  • 悬浮高亮：设置表格的悬浮高亮样式，可单击控制高亮的显隐。

    参数	说明
    文本样式	悬浮高亮的文本样式，包括文本字体、文字粗细、字号和颜色。
    高亮样式	悬浮高亮的高亮样式，包括行背景颜色、圆角、阴影X轴偏移、阴影Y轴偏移、阴影厚度和阴影颜色。

  • 序号列：设置表格的序号列样式，可单击控制序号列的显隐。

    参数	说明
    列显示名	序号列的字段名称，需要与数据面板中的字段相匹配，默认匹配imgSrc字段。
    列宽	序号列的列宽占比值，数值越大宽度越大。
    文本样式	序号列的文本样式，包括文本字体样式、文字粗细、字号和颜色。
    	序号列文字背景样式，包括背景的宽度、背景高度、圆角大小和背景颜色。
    特色项	序号列特色项展示样式。 特殊数量：设置前 N 项为特殊项，单独设置其样式。 选项：设置序号列的展示样式，包括图片和文字。 图片样式：设置序号列的图片样式，包括图片的宽度、高度和圆角大小。设置选项为图片时展示当前字段。 默认图片：设置序列号的默认展示图片，设置选项为图片时展示当前字段。 自定义字段：此配置只在数据中增加自定义图片字段时生效。例如：imgSrc: 'https://xxxx.png'，数据中设置自定义图片字段优先级高于配置项中默认图片和自定义图片设置。 自定义图片：单击右侧的或图标，添加或删除一个图片数据。 单击或图标配置多个图片数据的排列样式。单击图标，即可复制当前选中图片数据并新增一个同样配置的图片数据。设置选项为图片时展示当前字段。 说明 序列号可以设置为图片，动态图片在数据中增加图片字段即可。 文本样式：设置序号列的文本样式，包括文本颜色和背景颜色。设置选项为文字时展示当前字段。

• 翻页器

  参数	说明
  翻页器隐藏	打开开关，隐藏翻页器样式，翻页器所有参数都无法配置；关闭开关，翻页器样式显示，可配置以下参数。
  单页隐藏	打开开关，表格只有一页内容时隐藏翻页器样式；关闭开关，翻页器样式一直显示。
  通用设置	翻页器样式通用设置，包括翻页器的尺寸选择、对齐方式和前进后退样式选择。
  页码数量	翻页器页码数量值。当页数过多时，页面上页码显示的数量，更多的使用省略号（...）代替。
  省略号颜色	页码过多时使用的省略号颜色。
  输入框	打开开关，开启翻页器输入框。当页数过多时，显示跳转至输入框内写的页码及单击确定按钮进行跳转，总页数大于页码数量时生效；关闭开关，关闭输入框页码跳转效果。
  当前页样式	翻页器当前页样式，包括当前页内文字颜色和背景色。
  普通页样式	翻页器普通页样式，包括普通其他页内文字颜色和背景色。
  不可用样式	翻页器不可用处的样式，包括不可用样式的文字颜色和背景色。
  边距	翻页器边界与表格顶部、底部、左侧和右侧的距离。
  自定义文字	设置翻页器中上一页和下一页中的文字内容。

• 表格列

  单击右侧的或图标，添加或删除一个列配置。 单击或图标配置多个列配置的排列样式。单击图标，即可复制当前选中列配置内容并新增一个同样配置的列。

  • 列字段名：列字段名，需要与数据中的字段匹配。

  • 列显示名：表头显示列名称，需要与数据中的字段匹配。

  • 列宽：列宽的值，当值为0时，列宽为自适应列宽，当内容宽度超出列宽设置时为保证内容准确展示使用内容宽度。

  • 排序：打开开关，当前列的表头处显示排序按钮，单击表头排序按钮即可选择表格内数据的排序样式；关闭开关，当前列表头无排序按钮，无法单击当前列排序表格数据。

    说明

    当表格内的值为进度条时，无论是否打开排序开关表格数据都不可排序。

  • 文本样式：表格列的文本样式，包括文本字体样式、文字粗细、字号和颜色。

  • 对齐方式：打开开关，可以单独调整每一列的对齐方式，包括左对齐、居中对齐和右对齐；关闭开关，无法调整每一列的对齐方式。

  • 数据类型：设置表格列的数据类型，包括但不限于数值型、类目型、时间型、图片、趋势图和进度图。

  • 显示格式：表格列显示格式的样式，可选默认、11（整数）、11.1（浮点数）、11.11（浮点数）、11%（百分比）、11.1%（百分比）、1,111（千分位）和1,111.1（千分位）。更多数据显示格式请参见数据显示格式说明。当数据类型选择为数值型和时间型时展示当前字段，仅默认内容不同。

  • 图片：设置表格列的图片宽度、图片高度和圆角大小，当数据类型选择为图片时展示当前字段。

  • 指标趋势：单击可开启指标趋势样式。

    说明

    当数据类型选择为趋势图时展示当前字段。

    参数	说明
    图标	指标趋势图标样式，可选五种图标样式和设置图标大小。单击可开启图标样式。
    趋势颜色	上升、持平和下降三种趋势的颜色。
    是否同步文字颜色	打开开关，开启图标颜色与数值文字颜色同步；关闭开关，颜色不同步。
    指标设置	设置指标基础值和数字后缀样式。
    千分位	千分位分隔符符号。单击可开启千分位样式。 说明 当输入多个千分位符号时，默认只取第一位符号作为数据的千分位分隔符号，数字不可作为千分位分隔符号使用。
    显示	打开开关，在指标趋势样式中不合法的数据可以显示；关闭开关，在指标趋势样式中出现的不合法数据无法显示。 说明 如果所有数据均为合法数据则忽略此项配置。

  • 进度图：单击可开启进度图样式。进度图的值应该设置为number数据类型。

    说明

    当数据类型选择为进度图时展示当前字段。

    参数	说明
    进度图形态	进度图形态样式，可选环形和条形。
    样式	进度图的进度颜色、背景色和进度条尺寸。
    数值信息	数值的精度位数、后缀样式、字体、文字粗细、字号和颜色。单击可开启数值信息样式。

• 高级配置

  • 选择列：单击控制表格最左侧选择列样式的显隐。

    参数	说明
    默认选中	选择列默认选中的行数，可自定义输入行数内容并使用英文逗号,分隔。
    按钮尺寸	选择列按钮的宽度和高度值。
    选中钩子	选择列选中钩子的颜色和钩子大小。
    按钮背景色	选择列按钮的背景颜色。

  • 操作列：单击控制表格最右侧操作列样式的显隐。

    参数	说明
    列显示名	操作列的表头显示名。
    列宽占比	操作列列宽的占比值，单位为px。
    文本样式	操作列的文本样式，包括文本字体样式、文字粗细、字号和颜色。
    悬停样式	鼠标悬停在操作列字体上时的文本样式，包括文本字体样式、文字粗细、字号和颜色。
    间隔	操作列内多个选项按钮之间的间隔值和操作列每一行的上下间隔值。
    按钮	操作列内按钮的宽度值、高度值、背景色和圆角角度值。
    按钮悬停	操作列内按钮在鼠标悬停时的背景色和按钮文本颜色。
    列配置	操作列内多个列操作配置内容。 单击右侧的或图标，添加或删除一个列配置。 单击或图标配置多个列配置的排列样式。单击图标，即可复制当前选中列配置内容并新增一个同样配置的列。 内容类型：操作内容的类型，可选按钮或文本。 操作名称：可自定义操作名称内容。 操作类型：可自定义操作类型内容，默认为edit。

  • 超链接配置：设置表格的超链接配置样式，可单击控制超链接配置的显隐。

    参数	说明
    超链接字段名	超链接字段名称，需要在数据源面板中设置超链接link字段。对表格某一行设置超链接后，单击这一行内任意位置即可跳转到超链接。 { "link": "https://xxxx.com" }
    新窗口中打开	打开开关，跳转超链接时会新开一个网页窗口；关闭开关，超链接在原先网页跳转。

  • 虚拟滚动：设置表格的滚动配置样式，可单击控制滚动配置的显隐。

    参数	说明
    内容区域高度	设置虚拟滚动的内容区域高度，单位为px。
    边框样式	设置虚拟滚动区域的边框样式，包括边框宽度和边框颜色。

• 条件：条件样式说明。

  条件样式：单击右侧的或图标，添加或删除一个条件样式。 单击或图标配置多个条件样式的排列样式。单击图标，即可复制当前选中条件样式配置内容并新增一个同样配置的条件样式。具体的条件样式配置说明，请参见条件树使用说明。

  • 选定范围：选择单元格或整行进行范围选择。

  • 自定义显示列：此配置项用于填写渲染表格的哪一列，单击右侧的或图标，添加或删除一个显示列。 单击或图标配置多个显示列的排列样式。单击图标，即可复制当前选中显示列配置内容并新增一个同样配置的显示列。可以自定义设置显示列名称。

  • 文本：设置条件样式文本字体、文字粗细、字号和颜色。

  • 背景色：设置单元格背景色。

  • 数据类型：通过选择不同的数据类型，设置进度图或趋势图的条件样式。

  • 进度图：设置进度图的条形颜色、背景色、字体、文字粗细、字号和颜色。

  • 趋势图：设置趋势图的图标大小、字体、文字粗细和字号。

  • 行高：设置整行行高，当选定服务为整行时展示当前字段。

数据源面板

高级面板

蓝图交互

1. 单击页面左上角的图标，进入蓝图页面。

2. 在图层节点页签下，添加当前组件至主画布中。

3. 查看蓝图配置参数。

   • 事件

     事件	说明
     当数据接口请求完成时	数据接口请求返回并经过过滤器处理后抛出的事件，同时抛出处理后的JSON格式的数据。具体数据示例请参见画布编辑器中组件右侧配置面板数据源页签的数据响应结果区域。
     当点击单行时	当单击进度条表格的某一行时抛出当前行的数据，内容根据数据响应结果变化而变化，参考数据示例。 { "id": 1, "value": 1, "sales": 1, "proportion": 1, "city": "北京" }
     当点击分页时	当单击进度条表格的某个分页时抛出当前页的数据。 { "current": 1 //翻页器中显示的分页数字。 }
     当点击排序时	当在进度条表格的某一个字段上单击排序图标时抛出当前排序的数据。 { "columnName": "id", //排序的字段。 "order": "desc" //排序的顺序，desc:降序，asc：升序。 }
     当点击多选时	当选中进度条表格的多条数据时，内容根据数据响应结果变化而变化，参考数据示例。 { "id": 1, "value": 1, "sales": 1, "proportion": 1, "city": "北京" }
     当点击操作项时	当单击进度条表格操作列的某一个操作项时抛出当前操作项的数据，operateType字段值与样式>高级配置>操作列>列配置里的内容相对应，参考数据示例。 { "operateType": "edit", "dataItem": { "id": 1, "value": 1, "sales": 1, "proportion": 1, "city": "北京" } }

   • 动作

     动作	说明
     导入数据接口	按组件绘制格式处理数据后，导入组件，重新绘制。不需要重新请求服务端数据。具体数据示例请参见画布编辑器中组件右侧配置面板数据源页签的数据响应结果区域。
     请求数据接口	重新请求服务端数据，上游数据处理节点或图层节点抛出的数据将作为参数。例如进度条表格配置了API数据源为https://api.test，传到请求数据接口动作的数据为{ id: '1'}，则最终请求接口为https://api.test?id=1。
     跳转至	将组件页面跳转至某一页，默认从0开始跳转，参考数据示例。 { "current":1 //如跳转至第四页，{current：3} }
     高亮表格行	设置表格行高亮对应的元素，参考数据示例。 { "data": { //需要高亮的数据。 id:3, name:'张三' }, "style": { //高亮数据的样式。 color:'#ff0', background:'#f00' } }
     取消行高亮	取消表格行高亮对应的元素。
     清空高亮	清空组件所有高亮效果，不需要参数。
     打开选择列	打开进度条表格的选择列对应的数据内容，不需要参数。
     关闭选择列	关闭进度条表格的选择列对应的数据内容，不需要参数。
     打开操作列	打开进度条表格的操作列对应数据内容，不需要参数。
     关闭操作列	关闭进度条表格的操作列对应数据内容，不需要参数。
     设置选中值	设置选中列的参数内容，使用数据源中id字段对应的value值去触发选中，参考数据示例。 { "value": 3 //如选中id=3的行，{value：3}。 }
     移动	将组件移动到指定位置，参考数据示例。 { // 移动方式。绝对定位：to，相对定位：by。默认值：to。 "positionType": "to", // 指定位置。x坐标，y坐标。 "attr": { "x": 0, "y": 0 }, // 动画方式。 "animation": { "enable": false, // 动画延时，单位ms。 "animationDuration": 1000, // 动画曲线。可选值为：linear|easeInOutQuad|easeInOutExpo。 "animationEasing": "linear" } }
     切换显隐	切换组件显示或者隐藏，不需要参数。
     显示	显示组件，参考数据示例。 { "animationType": "",//动画方式，可选值：fade，不填无动画。 "animationDuration": 1000,//动画延迟，单位ms。 "animationEasing": ""//动画曲线 }
     隐藏	隐藏组件，参考数据示例。 { "animationType": "",//动画方式，可选值：fade，不填无动画。 "animationDuration": 1000,//动画延迟，单位ms。 "animationEasing": ""//动画曲线 }
     更新组件配置	动态更新组件的样式配置。需要先在组件的样式面板中，单击复制配置到剪贴板，获取组件配置数据。再根据需要在蓝图编辑器配置页面的数据处理节点中更改对应样式的字段值。