水平柱状图

水平柱状图是柱状图的一种，它是由基本柱状图通过配置项转变而来，因此它的配置项与基本柱状图相同。它支持自定义y轴区间和多个系列的数据配置，能够更加智能地展示多维的数据差异，但在大屏中占的空间较大。本文档为您介绍基本柱图各配置项的含义，帮助您快速准确地使用基本柱图组件

配置

• 基础设置

  • width：组件在编辑器中的宽度

  • height：组件在编辑器中的高度

  • top：组件与编辑器顶部的距离

  • left：组件与编辑器左侧的距离

• 全局

  • 坐标轴反转：勾选后可将纵向柱状图切换成横向柱状图

    

  • 类目轴字段名: 类目轴是每组数据的唯一标识，需要与数据项中的类目字段保持一致

    

  • 背景柱条

    • 开启/关闭：开启背景柱条后，会以坐标轴最大值生成背景阴影

      

    • 颜色：背景柱条的颜色，支持hex、rgb以及rgba格式的色值

    • 边框颜色：边框的颜色，支持hex、rgb以及rgba格式的色值

    • 边框宽度：边框的宽度，单位px

    • 透明度：控制背景阴影透明度，你也可以使用rgba格式色值来控制

• 画布间距

  • 顶间距：该图表与组件边界顶部的距离，单位为px

  • 右间距：该图表与组件边界右侧的距离，单位为px

  • 底间距：该图表与组件边界底部的距离，单位为px

  • 左间距：该图表与组件边界左侧的距离，单位为px

• 标题

  • 显示/隐藏：是否展示该图表的标题

  • 标题名称：该图表的标题的名称

  • 左边距：标题离容器左侧的距离

  • 上边距：标题离容器上侧的距离

  • 文本样式

    • 字号：标题的字体大小

    • 颜色：标题的颜色，支持hex、rgb以及rgba格式的色值

    • 字体：标题的字体

    • 字体粗细：标题字体的粗细

• 提示框

  • 显示/隐藏：当鼠标悬浮到图表上的点时，是否展示其提示的信息

  • 触发类型：如何触发提示框的展示

  • 格式：提示框的展示内容可支持自定义配置，其中{a}表示系列名称，{b}表示类目轴的值，{c}表示数值

    

  • 背景颜色：提示框的背景颜色，支持hex、rgb以及rgba格式的色值

  • 边框颜色：提示框边框的颜色，支持hex、rgb以及rgba格式的色值

  • 边框宽度：提示框边框的宽度，单位px

  • 内边距：提示框的内边距，例如："5,5,5,5"，代表上右下左边距分别为5px、5px、5px、5px

• 图例

  • 显示/隐藏：是否展示该表图的图例

  • 左间距：图例与容器左侧的距离

  • 顶间距：图例与容器上侧的距离

  • 排列方向：图例的排列方向，可选择水平 or 垂直进行展示

  • 图例图标：图例的图标，可选圆形、方形、三角形、菱形图标进行展示

  • 文本样式

    • 字号：图例的字体大小

    • 颜色：图例的颜色，支持hex、rgb以及rgba格式的色值

    • 字体：图例的字体

    • 字体粗细：图例的字体粗细

• X轴

  • 显示/隐藏：是否展示该图表的x轴

  • 位置：改变X轴的位置，可选上方 or 下方

    

  • 坐标轴名称

    • x轴名称：x轴的名称

    • x轴名称位置：x轴的名称位置，可选起点处、居中、终点处

    • 轴线间距：x轴的名称与轴线的距离

    • 样式

      • 颜色：坐标轴名称的颜色，支持hex、rgb以及rgba格式的色值

      • 字体大小：坐标轴名称的字体大小

      • 字体粗细：坐标轴名称的字体粗细

      • 字体：坐标轴名称的字体

    

  • 轴线

    • 显示/隐藏：是否展示x轴的轴线

    • 轴线样式

      • 颜色：轴线的颜色，支持hex、rgb以及rgba格式的色值

      • 样式：轴线可选实线 or 虚线进行展示

      • 宽度：控制轴线的粗细，单位px

    

  • 刻度值

    • 显示/隐藏：是否展示x轴的刻度值

    • 字号：刻度值的字体大小

    • 颜色：刻度值的颜色，支持hex、rgb以及rgba格式的色值

    • 字体：刻度值的字体

    • 字体粗细：刻度值字体的粗细

    

  • 刻度线

    • 显示/隐藏：是否展示x轴上的刻度线

    • 向内朝向：控制刻度线的朝向

    • 对齐标签：坐标轴刻度是否和标签对齐

    • 刻度线样式

      • 颜色：刻度线的颜色，支持hex、rgb以及rgba格式的色值

      • 线宽：刻度线的线宽，单位px

      

  • 网格线

    • 显示/隐藏：是否展示图表区域中的网格线

    • 网格线样式

      • 颜色：网格线的颜色，支持hex、rgb以及rgba格式的色值

      • 样式：网格线的样式，可选实线、虚线、点进行展示

      • 线宽：网格线的线宽，单位px

    

• Y轴

  y轴的配置与x轴基本类似，具体配置应用可参照x轴

  • 显示/隐藏：是否展示该图表的y轴

  • 位置：改变y轴的位置，可选左侧 or 右侧

    

  • 坐标轴名称

    • y轴名称：y轴的名称

    • y轴名称位置：y轴的名称位置，可选起点处、居中、终点处

    • 轴线间距：y轴的名称与轴线的距离

    • 样式

      • 颜色：坐标轴名称的颜色，支持hex、rgb以及rgba格式的色值

      • 字体大小：坐标轴名称的字体大小

      • 字体粗细：坐标轴名称的字体粗细

      • 字体：坐标轴名称的字体

  • 轴线

    • 显示/隐藏：是否展示y轴的轴线

    • 轴线样式

      • 颜色：轴线的颜色，支持hex、rgb以及rgba格式的色值

      • 样式：轴线可选实线 or 虚线进行展示

      • 宽度：控制轴线的粗细，单位px

  • 刻度值

    • 显示/隐藏：是否展示y轴的刻度值

    • 字号：刻度值的字体大小

    • 颜色：刻度值的颜色，支持hex、rgb以及rgba格式的色值

    • 字体：刻度值的字体

    • 字体粗细：刻度值字体的粗细

  • 刻度线

    • 显示/隐藏：是否展示x轴上的刻度线

    • 向内朝向：控制刻度线的朝向

    • 对齐标签：坐标轴刻度是否和标签对齐

    • 刻度线样式

      • 颜色：刻度线的颜色，支持hex、rgb以及rgba格式的色值

      • 线宽：刻度线的线宽，单位px

  • 网格线

    • 显示/隐藏：是否展示图表区域中的网格线(按照x轴的刻度进行划分)

    • 网格线样式

      • 颜色：网格线的颜色，支持hex、rgb以及rgba格式的色值

      • 样式：网格线的样式，可选实线、虚线、点进行展示

      • 线宽：网格线的线宽，单位px

• 数据轴缩放

  • 开启/关闭：开启数据轴缩放后，可自由控制所展示的数据项，一般适用于数据项较为密集的场景

    

  • 缩放类型：提供滚动缩放和手动缩放两种缩放方式

    • 缩放类型：通过鼠标滚动对数据项进行缩放，通过鼠标点击移动切换数据项的展示

    • 手动缩放：在组件底部提供一个缩放轴进行缩放控制

    

  • 手动缩放轴设置：如果你选择了手动缩放这种方式，则可以对底部的缩放轴样式进行配置

    • 显示/隐藏：是否展示缩放轴，不建议对其隐藏，如果将其隐藏，将无法控制数据项的切换

    • 高度：缩放轴的高度

    • 底部距离：缩放轴与底部的距离，单位px

    • 开始位置：数据范围的起始位置，单位百分比

    • 结束位置：数据范围的结束位置，单位百分比

    • 背景颜色：缩放轴的背景颜色，支持hex、rgb以及rgba格式的色值

    • 边框颜色：缩放轴的边框颜色，支持hex、rgb以及rgba格式的色值

    • 滑块填充颜色：缩放轴中间滑块的颜色，支持hex、rgb以及rgba格式的色值

• 数据系列

  该配置项为一个数组，可配置多个系列，编辑器将遍历数据，使数据通过一个或多个系列配置循环渲染。若需要自定义某些数据为特定样式则需要手动对数据进行排序

  • 列字段名：与数据配置中的字段一致，控制图表一组数据的展示

  • 系列名：通过系列名，可自定义图例的名称

    

  • 标签

    • 显示/隐藏：是否展示此系列下图表的标签

    • 位置：控制标签展示的位置，提供外置顶部、内置居中、内置顶部三种位置展示

    • 字号：标签的字体大小

    • 颜色：标签的颜色，支持hex、rgb以及rgba格式的色值

    • 字体：标签的字体

    • 字体粗细：标签字体的粗细

    

  • 柱条样式

    • 柱条颜色：柱条的颜色，支持hex、rgb以及rgba格式的色值

    • 柱条边框颜色：柱条的颜色，支持hex、rgb以及rgba格式的色值

    • 柱条边框线宽：柱条边框的宽度，单位px

    • 圆角半径：用圆弧替换四个角，数值越大，圆弧越明显

    

数据

return [{
    x: '指标1',
    y1: 220,
    max: 300
}, ......]

• x：类目轴自定义字段，需要与全局配置项中的类目轴字段名一致

• y：数据轴自定义字段，需要与每个序列配置项中的列字段名一致

• max：背景柱条最大值，默认取数据中的最大值，也可自行设置