# 胶囊柱状图

胶囊柱状图是用圆柱的长短来比较数据多少的图形。

# 属性

# 基础

组件标题： 用于在图层中显示组件的名称。1.1+
组件尺寸： 组件的宽度和高度，单位为px。
组件位置： 组件在大屏中的位置，通过横纵坐标来定义，单位为px。
背景颜色： 组件的背景颜色。
系列颜色： 圆柱的颜色。支持颜色填充，默认情况下柱子的颜色为主题的颜色。

# 系列

条形图为单维度，多量度的图表，因此需要分别设置每个系列下的条形柱子属性。

系列 1：
类型： 柱状和折线的转换。
堆叠名： 系列中堆叠名称相同者堆叠在一起。
顺序： 控制图形的层级顺序。值小的图形会被值大的图形覆盖。
数据标注： 是否显示最大值、最小值的数据标注。

警告：

数据标注只有在柱状图或折线图上可用，堆叠柱状图和折线堆叠图上不可用。
平均线： 是否显示同一系列的平均线。
柱设置 该系列下柱子的颜色、边框设置，支持颜色填充和渐变填充两种方式。
- 宽度： 柱子的宽度，左右滑动或者输入值改变宽度，可为px 和%。
- 最小高度： 柱子的最小高度。
- 不同类目柱间距离： 不同类目柱间距离，此属性应设置于坐标系中最后一个 bar 系列上才会生效，并且是对此坐标系中所有 bar 系列生效。
- 同类目柱间距离： 同类目柱间距离，此属性应设置于坐标系中最后一个 bar 系列上才会生效，并且是对此坐标系中所有 bar 系列生效。
- 渐变色： 柱的颜色是否渐变。
- 是：
  - 渐变色方向： 渐变色的方向，可为正下到正上，左下到右上，右上到左下。
  - 渐变色范围设置： 设置渐变色的颜色范围。
- 否：
  - 颜色： 控制柱的颜色。
- 描边颜色： 选择描边的颜色。
- 描边线宽： 选择描边线的宽度。
- 描边类型： 选择描边线的类型，可为实线，虚线，点线。
- 左上圆角： 左上圆角的弧度。
- 右上圆角： 右上圆角的弧度。
- 右下圆角： 右下圆角的弧度。
- 左下圆角： 左下圆角的弧度。
柱背景
- 显示柱背景： 是否显示柱背景。
- 渐变色： 柱背景的颜色是否渐变。
- 是：
  - 渐变色方向： 渐变色的方向，可为正下到正上，左下到右上，右上到左下。
  - 渐变色范围设置： 设置渐变色的颜色范围。
- 否：
  - 颜色： 控制柱背景的颜色。
- 描边颜色： 柱背景描边的颜色。
- 描边线宽： 柱背景描边线的宽度。
- 描边类型： 柱背景描边线的类型，可为实线，虚线，点线。
文本标签： 指胶囊柱状图图形上的文本标签，可用于说明图形的一些数据信息，例如值、名称等。
- 显示： 是否显示文本。
- 内容格式器： 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
  
  字符串模板变量
  - {a} : 系列名。
  - {b} : 数据名。
  - {c} : 数据值。
    
    例如：
```
{b}: {c}
```
  回调函数
  
  可用参数为data。
  
  示例：
```
return data.name;
```
  参数 data是内容格式器需要的单个数据集。格式如下：
```
{
  // 数据名，类目名
  "name": string,
  // 传入的原始数据项
  "data": Object,
  // 传入的数据值
  "value": number | Array,
  // 百分比
  "percent": number
}
```
- 位置： 文本标签上值的位置。
- 字体颜色： 修改字体的颜色。
- 字体大小： 修改字体的大小。
- 字体粗细： 修改字体的粗细，可为普通和加粗和更细，默认为普通。
- 字体： 修改字体的样式。
初始动画： 对组件动画的配置。
- 开启动画： 组件是否启用动画。
- 动画时长(ms)： 动画的时长。
- 缓动效果： 动画的缓动效果。
折线设置： 该系列下折线的设置。
- 平滑曲线： 折线是否为平滑曲线。
- 线颜色： 折线的颜色。
- 宽度： 折线的宽度。
- 类型： 折线的类型。
折线样式： 该系列下折线样式的设置。
- 渐变色： 是否添加渐变色。
- 是：
  - 渐变色方向： 渐变色的方向，可为正下到正上，左下到右上，右上到左下。
  - 渐变色范围设置： 设置渐变色的颜色范围。
- 否：
  - 颜色： 控制柱的颜色。
- 拐点图形： 折线拐点处的图形。
- 拐点大小： 折线拐点的大小。
- 拐点描边： 折线拐点的描边颜色。
- 描边线宽： 折线拐点的描边线宽。
- 描边类型： 折线拐点的描边类型。
文本标签： 指折线拐点处上的文本标签，可用于说明图形的一些数据信息，例如值、名称等。
- 显示： 是否显示文本。
- 内容格式器： 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
  
  字符串模板变量
  - {a} : 系列名。
  - {b} : 数据名。
  - {c} : 数据值。
    
    例如：
```
{b}: {c}
```
  回调函数
  
  可用参数为data。
  
  示例：
```
return data.name;
```
  参数 data是内容格式器需要的单个数据集。格式如下：
```
{
  // 数据名，类目名
  "name": string,
  // 传入的原始数据项
  "data": Object,
  // 传入的数据值
  "value": number | Array,
  // 百分比
  "percent": number
}
```
- 位置： 文本标签上值的位置。
- 字体颜色： 修改字体的颜色。
- 字体大小： 修改字体的大小。
- 字体粗细： 修改字体的粗细，可为普通和加粗和更细，默认为普通。
- 字体： 修改字体的样式。
初始动画： 对组件动画的配置。
- 开启动画： 组件是否启用动画。
- 动画时长(ms)： 动画的时长。
- 缓动效果： 动画的缓动效果。
底系列： 胶囊柱状图底柱子系列的设置。
柱设置 该系列下柱子的颜色、边框设置，支持颜色填充和渐变填充两种方式。
- 宽度： 柱子的宽度，左右滑动或者输入值改变宽度，可为px 和%。
- 最小高度： 柱子的最小高度。
- 不同类目柱间距离： 不同类目柱间距离，此属性应设置于坐标系中最后一个 bar 系列上才会生效，并且是对此坐标系中所有 bar 系列生效。
- 同类目柱间距离： 同类目柱间距离，此属性应设置于坐标系中最后一个 bar 系列上才会生效，并且是对此坐标系中所有 bar 系列生效。
- 渐变色： 柱的颜色是否渐变。
- 是：
  - 渐变色方向： 渐变色的方向，可为正下到正上，左下到右上，右上到左下。
  - 渐变色范围设置： 设置渐变色的颜色范围。
- 否：
  - 颜色： 控制柱的颜色。
- 描边颜色： 选择描边的颜色。
- 描边线宽： 选择描边线的宽度。
- 描边类型： 选择描边线的类型，可为实线，虚线，点线。
- 左上圆角： 左上圆角的弧度。
- 右上圆角： 右上圆角的弧度。
- 右下圆角： 右下圆角的弧度。
- 左下圆角： 左下圆角的弧度。
柱背景
- 显示柱背景： 是否显示柱背景。
- 渐变色： 柱背景的颜色是否渐变。
- 是：
  - 渐变色方向： 渐变色的方向，可为正下到正上，左下到右上，右上到左下。
  - 渐变色范围设置： 设置渐变色的颜色范围。
- 否：
  - 颜色： 控制柱背景的颜色。
- 描边颜色： 柱背景描边的颜色。
- 描边线宽： 柱背景描边线的宽度。
- 描边类型： 柱背景描边线的类型，可为实线，虚线，点线。
文本标签： 指胶囊柱状图图形上的文本标签，可用于说明图形的一些数据信息，例如值、名称等。
- 显示： 是否显示文本。
- 内容格式器： 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
  
  字符串模板变量
  - {a} : 系列名。
  - {b} : 数据名。
  - {c} : 数据值。
    
    例如：
```
{b}: {c}
```
  回调函数
  
  可用参数为data。
  
  示例：
```
return data.name;
```
  参数 data是内容格式器需要的单个数据集。格式如下：
```
{
  // 数据名，类目名
  "name": string,
  // 传入的原始数据项
  "data": Object,
  // 传入的数据值
  "value": number | Array,
  // 百分比
  "percent": number
}
```
- 位置： 文本标签上值的位置。
- 字体颜色： 修改字体的颜色。
- 字体大小： 修改字体的大小。
- 字体粗细： 修改字体的粗细，可为普通和加粗和更细，默认为普通。
- 字体： 修改字体的样式。
初始动画： 对组件动画的配置。
- 开启动画： 组件是否启用动画。
- 动画时长(ms)： 动画的时长。
- 缓动效果： 动画的缓动效果。

# 视区

显示： 是否显示直角坐标系网格。
左边距： 离容器左侧的距离。
右边距： 离容器上侧的距离。
上边距： 离容器右侧的距离。
下边距： 离容器下侧的距离。

# X 轴

显示坐标： 是否显示 x 轴坐标。
坐标轴位置： 选择坐标轴的位置，可为上和下，默认为上。
坐标轴名称： 为坐标轴起一个名称。
- 坐标轴名称位置： 选择坐标轴的位置，可为开端和中端和末端，默认为开端。
- 坐标轴与名称间隔： 坐标轴与坐标轴名称之间间隔，最小为0最大为50。
反向坐标轴系： 将坐标轴反向。

名称文本样式： 对坐标轴名称样式的修改。
- 字体颜色： 修改字体的颜色。
- 字体大小： 修改字体的大小。
- 字体粗细： 修改字体的粗细，可为普通和加粗和更细，默认为普通。
- 字体： 修改字体的样式。
标签： 对坐标轴标签的修改。
- 显示： 是否显示标签。
- 内容格式器： 对标签内容的格式化，默认为{value}。
- 字体旋转： 对标签内容的旋转，最大为90最小为-90，默认为0。
- 对齐方式： 标签字体对齐的方式，分为左对齐 居中对齐 右对齐，默认为左对齐。
- 距离轴线： 距离轴线的距离，最大为200最小为0，默认为0。
- 字体颜色： 修改字体的颜色。
- 字体大小： 修改字体的大小。
- 字体粗细： 修改字体的粗细，可为普通和加粗和更细，默认为普通。
- 字体： 修改字体的样式。

轴线： 坐标轴的轴线。
- 显示： 是否显示轴线。
- 颜色： 修改轴线的颜色。
- 宽度： 修改轴线的宽度。
- 类型： 修改轴线的类型，可为实线和虚线和点状线，默认为实线。
刻度： 坐标轴的刻度线。
- 显示： 是否显示刻度。
- 刻度线与标签对齐： 选择刻度线是否与标签对齐。
- 刻度线颜色： 修改刻度线的颜色。
- 刻度线宽度： 修改刻度线的宽度。
分割线： 坐标轴的分割线。
- 显示： 是否显示分割度。
- 颜色： 修改分割线的颜色。
- 宽度： 修改分割线的宽度。
- 类型： 修改分割线的类型，可为实线和虚线和点状线，默认为实线。。
分隔区域： 由分割线分割出来的区域。
- 显示： 是否显示分隔区域。
- 奇数颜色： 修改奇数区域的颜色。
- 偶数颜色： 修改偶数区域的颜色。
缩放区域：
- 区域缩放： 是否区域缩放。
- 鼠标缩放： 是否鼠标缩放。
- 滑块缩放： 是否滑块缩放。
- 数据窗口百分比： 滑块所占数据窗口的百分比。
- 滑块组件高度： 滑块组件高度。
- 水平位置： 滑块水平位置。
- 垂直位置： 滑块垂直位置。
- 滑块区域背景： 滑块区域背景颜色。
- 滑动显示文本： 是否滑动显示文本。
- 锁定滑块： 是否锁定滑块。
- 线条颜色： 线条颜色。
- 线条宽度： 线条宽度。
- 线条类型：
  - 实线
  - 虚线
  - 点线

# Y 轴

显示坐标： 是否显示 y 轴坐标。
坐标轴位置： 选择坐标轴的位置，可为左和右，默认为左。
坐标轴名称： 为坐标轴的名称。
- 坐标轴名称位置： 选择坐标轴的位置，可为开端和中端和末端，默认为开端。
- 坐标轴与名称间隔： 坐标轴与坐标轴名称之间间隔，最小为0最大为50。
反向坐标轴系： 将坐标轴反向。

名称文本样式： 对坐标轴名称样式的修改。
- 字体颜色： 修改字体的颜色。
- 字体大小： 修改字体的大小。
- 字体粗细： 修改字体的粗细，可为普通和加粗和更细，默认为普通。
- 字体： 修改字体的样式。
标签： 对坐标轴标签的修改。
- 显示： 是否显示标签。
- 内容格式器： 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
- 字符串模板：模板变量为{value}。
```
{value}kg
```
- 回调函数
  
  可用参数：
  - data： 刻度默认文本。
  - index： 刻度索引。
```
return data;
```
- 字体旋转： 对标签内容的旋转，最大为90最小为-90，默认为0。
- 对齐方式： 标签字体对齐的方式，分为左对齐 居中对齐 右对齐，默认为左对齐。
- 距离轴线： 距离轴线的距离，最大为200最小为0，默认为0。
- 字体颜色： 修改字体的颜色。
- 字体大小： 修改字体的大小。
- 字体粗细： 修改字体的粗细，可为普通和加粗和更细，默认为普通。
- 字体： 修改字体的样式。

轴线： 坐标轴的轴线。
- 显示： 是否显示轴线。
- 颜色： 修改轴线的颜色。
- 宽度： 修改轴线的宽度。
- 类型： 修改轴线的类型，可为实线和虚线和点状线，默认为实线。
刻度： 坐标轴的刻度线。
- 显示： 是否显示刻度。
- 刻度线与标签对齐： 选择刻度线是否与标签对齐。
- 刻度线颜色： 修改刻度线的颜色。
- 刻度线宽度： 修改刻度线的宽度。
分割线： 坐标轴的分割线。
- 显示： 是否显示分割度。
- 颜色： 修改分割线的颜色。
- 宽度： 修改分割线的宽度。
- 类型： 修改分割线的类型，可为实线和虚线和点状线，默认为实线。。
分隔区域： 由分割线分隔出来的区域。
- 显示： 是否显示分隔区域。
- 奇数颜色： 修改奇数区域的颜色。
- 偶数颜色： 修改偶数区域的颜色。
缩放区域：
- 区域缩放： 是否区域缩放。
- 鼠标缩放： 是否鼠标缩放。
- 滑块缩放： 是否滑块缩放。
- 数据窗口百分比： 滑块所占数据窗口的百分比。
- 滑块组件高度： 滑块组件高度。
- 水平位置： 滑块水平位置。
- 垂直位置： 滑块垂直位置。
- 滑块区域背景： 滑块区域背景颜色。
- 滑动显示文本： 是否滑动显示文本。
- 锁定滑块： 是否锁定滑块。
- 线条颜色： 线条颜色。
- 线条宽度： 线条宽度。
- 线条类型：
  - 实线
  - 虚线
  - 点线

# 标题

胶囊柱状图的标题。

显示标题： 是否显示标题。
内容：
- 标题：
  - 主：内容的主标题。
  - 副：内容的副标题。
- 超链接：
  - 主：内容的主超链接。
  - 副：内容的副超链接。
位置：
- 水平对齐： 标题的水平方向的对齐位置，分为左对齐居中对齐右对齐，默认居中对齐。
- 垂直对齐： 标题的垂直方向的对齐位置，分为上对齐居中对齐下对齐，默认上对齐。
外观：
- 内边距： 调整主标题与边框的距离，单位为px。
- 主副间隔： 调整主标题与副标题的距离，单位为px。

主标题文本样式：
- 字体颜色： 调整主标题的字体颜色。
- 字体大小： 修改主标题字体的大小。
- 字体粗细： 修改主标题字体的粗细，可为普通和加粗和更细，默认为普通。
- 字体： 修改主标题字体的样式。
副标题文本样式：
- 字体颜色： 调整副标题的字体颜色。
- 字体大小： 修改副标题字体的大小。
- 字体粗细： 修改副标题字体的粗细，可为普通和加粗和更细，默认为普通。
- 字体： 修改副标题字体的样式。

# 图例

显示图例： 是否显示图例。
选择模式： 图例是否可选，可为可选 不可选 单选 多选，默认为可选。
内容格式器： 标签内容格式器，默认为{name}。
位置：
- 排列方式： 可为水平排列和垂直排列，默认为水平排列。
- 水平位置： 控制图例水平方向的位置，可为左，中，右，默认为左。
- 垂直位置： 控制图例垂直方向的位置，可为上，中，下，默认为上。
文字样式：
- 字体颜色： 调整图例的字体颜色。
- 字体大小： 修改图例字体的大小。
- 字体粗细： 修改图例字体的粗细，可为普通和加粗和更细，默认为普通。
- 字体： 修改图例字体的样式。

# 提示框

显示提示框： 是否显示提示框。
提示模板 ：提示框浮层内容格式器。
触发点：
- 坐标轴： 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
- 数据项： 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
提示外观
- 背景颜色： 提示框浮层的背景颜色。
- 边框颜色： 提示框浮层的边框颜色。
- 边框宽度： 提示框浮层的边框宽。
- 内边距： 提示框浮层内边距

文本样式
- 字体颜色： 提示框字体颜色。
- 字体大小： 提示框字体大小。
- 字体粗细： 提示框字体粗细。
- 字体： 提示框字体样式。

# 工具栏

工具栏

显示工具栏： 是否显示工具栏。
功能按钮
- 保存为图片按钮
- 还原按钮
- 数据视图按钮
位置朝向
- 排列方式： 功能按钮的布局朝向。
- 水平位置： 水平排列。
- 垂直位置： 垂直排列。
图表尺寸
- 图标大小
- 间隔

# 数据

# 静态数据

静态数据

上图中的示例JSON代码如下：

[
  {
    "x": "类型一",
    "y": 33
  },
  {
    "x": "类型二",
    "y": 12
  },
  {
    "x": "类型三",
    "y": 27
  },
  {
    "x": "类型四",
    "y": 23
  },
  {
    "x": "类型五",
    "y": 40
  }
]

x： y 轴的标签名称。
y：数据的大小。

# 数据资源

数据资源

# 交互

# 柱图单击交互事件

勾选启用，开启组件交互功能。当单击胶囊柱状图柱子时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。

# 数据响应

胶囊柱状图支持数据响应配置。

# 数据上卷，下钻

胶囊柱状图支持数据上卷，下钻配置。

# 节点编程

# 事件

柱图点击事件： 柱子单击触发事件。
- 抛出的参数： 柱子所携带的数据。
图表配置转换完成后： 图表 Option 配置转换完成后事件。
- 抛出的参数： 配置完成后的 Option 。

# 动作

导入图表配置： 可导入 Echarts 图表 Option 配置。
- 接收的参数： 修改后的 Option 。

← 堆叠柱状图风向玫瑰图 →