轮播列表柱状图

配置

• 搜索配置：单击配置面板右上角的搜索配置，可在搜索配置弹出框中输入您需要搜索的配置项名称，快速定位到该配置项，系统支持模糊匹配。详情请参见搜索组件配置。
• 图表尺寸：包括组件的宽度和高度，单位为px。可单击锁定组件的宽高比，等比例修改组件的宽高。再次单击进行解锁，解锁后宽高比不受限制。
• 图表位置：包括组件的横坐标和纵坐标，单位为px。横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。
• 旋转角度：以组件的中心为中心点，进行旋转，单位为度（°）。
  • 手动输入角度值，控制组件的旋转角度。
  • 拖动图标内的黑点，控制组件的旋转角度。
  • 单击图标，控制组件左右翻转样式。
  • 单击图标，控制组件上下翻转样式。
• 透明度：取值范围为[0,1]。为0时，图表隐藏；为1时，图表全部显示。默认为1。
• 全局样式
  • 字体：组件中所有文本的字体系列，默认为微软雅黑。
  • 动画时间：轮播时文字翻转和柱状图闪光效果的总用时，单位为ms。
  • 行间距：各柱子之间的距离。
  • 数量：每页显示的文本行数。
  • 自动轮播：打开后，柱状图播完一次数据后自动重复播放。关闭后，柱状图播完一次数据后不再播放。
    说明 开启自动轮播后，配置不会立即生效，将会在下一次轮播后生效。
  • 轮播时间：列表从前一页切换到下一页所间隔的时间，单位为ms。
• 序列号 ：列表的序列号样式，可单击眼睛图标控制显隐。
  • 文本
    • 字号：序列号文本的大小。
    • 颜色：序列号文本的颜色，可参考颜色选择器说明进行修改。
    • 字体粗细：序列号文本的字体粗细。
  • 宽度：序列号的宽度，单位为px或%，输入需要带单位。
  • 间隔：序列号和轮播内容之间的间隔距离，单位为px。
• 内容
  • 文本
    • 字号：内容文本的大小。
    • 颜色：内容文本的颜色。
    • 字体粗细：内容文本的字体粗细。
  • 跑马灯：对溢出文本使用跑马灯动画效果，可单击眼睛图标控制动画效果的开启或关闭。

    动画时间：溢出文本的跑马灯动画时间，单位为ms。

• 数值：数据中的value值的显示样式，可单击眼睛图标控制显隐。
  • 字号：数值文本的大小。
  • 颜色：数值文本的颜色。
  • 字体粗细：数值文本的字体粗细。
  • 间隔：数值文本与内容文本之间的距离。
• 柱状图：列表中柱状图的样式，可单击眼睛图标控制显隐。
  • 颜色：柱状图的颜色。
  • 高度：柱状图的粗细。
• 流光：柱状图上的流光特效样式，可单击眼睛图标控制特效的开启或关闭。
  • 颜色：流光的颜色。
  • 长度：流光的长度。
  • 高度：流光的粗细，超过柱状图部分不会显示。
  • 动画间隔：间隔多久进行展示一次流光特效，单位为ms。
• 分割线：各行之间的分割线样式，可单击眼睛图标控制分割线的显隐。
  • 颜色：多行之间分割线的颜色。
  • 高度：分割线的粗细。

数据

上图中的示例数据为：

[
  {
    "value": "314529403.31",
    "content": "柱状图(bar chart)，是一种以长方形的长度为变量的表达图形的统计报告图"
  },
  {
    "value": "293711093.03",
    "content": "饼图英文学名为Sector Graph, 有名Pie Graph。"
  },
  {
    "value": "193691138.91",
    "content": "折线图"
  },
  {
    "value": "293711093.03",
    "content": "散点图（scatter diagram）"
  },
  {
    "value": "193120534.18",
    "content": "排行榜（同类事物客观反映）"
  }
]

• value：列表每行的值，对应柱状图的长度，数据会按照此value值的大小进行排序展示。可在数值配置项中配置value值的显示样式。
• content：对应轮播列表上每行的内容。

交互

此组件没有交互事件。