# 3D 柱状图
3D 柱状图是一种 3D 图形，以长方体的长度为变量的表达图形的统计报告图，由一系列高度不等的长方体表示数据分布的情况。
# 属性
# 基础
组件标题： 用于在图层中显示组件的名称。1.1+
组件尺寸： 组件的宽度和高度，单位为
px。组件位置： 组件在大屏中的位置，通过横纵坐标来定义，单位为
px。背景颜色： 组件的背景颜色。
系列颜色： 柱子的颜色。支持颜色填充，默认情况下柱子的颜色为主题的颜色。
基础样式 同 饼图属性 -> 基础样式 3.0+
# 系列
系列 1：
堆叠命名（同名系列将会堆叠）： 系列中堆叠名称相同者堆叠在一起。
着色效果： 纯色/光照。
柱设置： 3D 柱状图柱子的设置。
倒角尺寸： 柱子的倒角尺寸。
光滑度： 柱子的光滑度。
柱子颜色： 柱子的颜色。
高亮颜色： 高亮柱子的颜色。
文本标签： 指 3D 柱状图图形上的文本标签，可用于说明图形的一些数据信息，例如值、名称等。
显示文本： 是否显示文本。
内容格式器： 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用
\n换行。字符串模板变量
{a}: 系列名。{b}: 数据名。{c}: 数据值。例如：
{b}: {c}
回调函数
可用参数为
data。示例：
return data.name;参数
data是 内容格式器需要的单个数据资源。格式如下：{ // 数据名，类目名 "name": string, // 传入的原始数据项 "data": Object, // 传入的数据值 "value": number | Array, // 百分比 "percent": number }位置： 标签的位置。
字体颜色： 文本标签字体颜色。
字体大小： 文本标签字体大小。
字体粗细： 文本标签字体粗细。
字体： 文本标签字体样式。
边框宽度： 文本标签边框的宽度。
边框颜色： 文本标签边框的颜色。
背景颜色： 文本标签边框的背景颜色。
高亮文本标签： 指 3D 柱状图图形上的高亮文本标签，可用于说明图形的一些数据信息，例如值、名称等。
显示文本： 是否显示高亮文本。
内容格式器： 高亮文本标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用
\n换行。字符串模板变量
{a}: 系列名。{b}: 数据名。{c}: 数据值。例如：
{b}: {c}
回调函数
可用参数为
data。示例：
return data.name;参数
data是 内容格式器需要的单个数据资源。格式如下：{ // 数据名，类目名 "name": string, // 传入的原始数据项 "data": Object, // 传入的数据值 "value": number | Array, // 百分比 "percent": number }位置： 高亮文本标签的位置。
字体颜色： 高亮文本标签字体颜色。
字体大小： 高亮文本标签字体大小。
字体粗细： 高亮文本标签字体粗细。
字体： 高亮文本标签字体样式。
边框宽度： 高亮文本标签边框的宽度。
边框颜色： 高亮文本标签边框的颜色。
背景颜色： 高亮文本标签边框的背景颜色。
初始动画： 对 3D 柱状图的初始动画的设置。
开启动画： 是否开启动画。
动画时长（ms）： 初始动画的时长。
缓动效果： 初始动画的缓动效果。
数据映射： 同 饼图属性 -> 系列 -> 数据映射 。3.0+
# 视觉映射组件
显示： 是否显示映射。
类型： 连续型/分段型
最小值： 最小值。
最大值： 最大值。
视觉颜色： 柱状图图层视觉颜色。
显示组件： 是否显示组件。
是否拖动： 是否开启拖动。
两端文本： 两端文本内容。
自动分段： 是否自动分段。
分段信息： 每一段的信息。
分段区间： 每一段的区间。
分段标签： 每一段的标签。
水平对齐：
- 左
- 中
- 右
垂直对齐：
- 上
- 中
- 下
字体颜色： 组件字体颜色。
字体大小： 组件字体大小。
字体粗细： 组件字体粗细。
字体： 组件字体样式。
# 视区
显示： 是否显示 X 轴，Y 轴，Z 轴。
宽度： 组件的宽度。
高度： 组件的高度。
深度： 组件的深度。
左边距： 组件距左侧的距离。
上边距： 组件距离上侧的距离。
指示线： 是否显示指示线。
视角设置： 对视角的设置。
开启平移旋转： 是否开启平移旋转。
视线距离： 视线距离组件的距离。
绕 X 轴： 组件绕 X 轴旋转角度。
绕 Y 轴： 组件绕 Y 轴旋转角度。
自动旋转： 是否自动旋转。
自转方向： 顺时针/逆时针。
自转速度： 组件的自转速度。
恢复自转时间： 组件恢复自转的时间。
主光源效果： 设置主光源的投影效果，着色效果为光照时可选。
投影阴影： 是否显示投影阴影。
光源颜色： 主光源的颜色。
光源强度： 主光源的强度。
阴影质量： 阴影的质量。
- 低
- 中
- 高
绕 x 轴： 主光源绕 x 轴的旋转角度。
绕 y 轴： 主光源绕 y 轴的旋转角度
环境光效果： 设置环境光的效果，着色效果为光照时可选。
环境光颜色： 环境光的颜色。
环境光强度： 环境光的强度。
# X 轴
名称： X 轴的坐标名称。
坐标轴与名称间距： 坐标轴与名称之间的距离。
名称文本样式： 坐标轴名称的字体样式设置。
字体颜色： 坐标轴名称字体颜色。
字体大小： 坐标轴名称字体大小。
字体粗细： 坐标轴名称字体粗细。
字体： 坐标轴名称字体样式。
标签： 坐标轴刻度标签的相关设置
显示： 是否显示刻度标签。
内容格式器： 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
字符串模板：模板变量为
{value}。{value}kg回调函数
可用参数：
- data： 刻度默认文本。
- index： 刻度索引。
return data;
字体颜色： 标签字体颜色。
字体大小： 标签字体大小。
字体粗细： 标签字体粗细。
字体： 标签字体样式。
轴线： 坐标轴轴线相关设置
显示： 是否显示轴线。
颜色： 轴线颜色。
宽度： 轴线宽度。
类型： 轴线类型。
刻度： 坐标轴刻度相关设置
显示： 是否显示坐标轴刻度。
刻度线与标签对齐： 刻度线是否与标签对齐显示。
分割线：
显示： 是否显示分割线。
颜色： 分割线颜色。
宽度： 分割线宽度。
类型： 分割线类型。
分隔区域：
显示： 是否显示分隔区域。
奇数颜色： 奇数区域颜色选择填充。
偶数颜色： 偶数区域颜色选择填充。
# Y 轴
名称： Y 轴的坐标名称。
坐标轴与名称间距： 坐标轴与名称之间的距离。
名称文本样式： 坐标轴名称的字体样式设置。
字体颜色： 坐标轴名称字体颜色。
字体大小： 坐标轴名称字体大小。
字体粗细： 坐标轴名称字体粗细。
字体： 坐标轴名称字体样式。
标签： 坐标轴刻度标签的相关设置
显示： 是否显示刻度标签。
内容格式器： 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
字符串模板：模板变量为
{value}。{value}kg回调函数
可用参数：
- data： 刻度默认文本。
- index： 刻度索引。
return data;
字体颜色： 标签字体颜色。
字体大小： 标签字体大小。
字体粗细： 标签字体粗细。
字体： 标签字体样式。
轴线： 坐标轴轴线相关设置
显示： 是否显示轴线。
颜色： 轴线颜色。
宽度： 轴线宽度。
类型： 轴线类型。
刻度： 坐标轴刻度相关设置
显示： 是否显示坐标轴刻度。
刻度线与标签对齐： 刻度线是否与标签对齐显示。
分割线：
显示： 是否显示分割线。
颜色： 分割线颜色。
宽度： 分割线宽度。
类型： 分割线类型。
分隔区域：
显示： 是否显示分隔区域。
奇数颜色： 奇数区域颜色选择填充。
偶数颜色： 偶数区域颜色选择填充。
# Z 轴
名称： Z 轴的坐标名称。
坐标轴与名称间距： 坐标轴与名称之间的距离。
坐标区间： 坐标轴的区间。
名称文本样式： 坐标轴名称的字体样式设置。
字体颜色： 坐标轴名称字体颜色。
字体大小： 坐标轴名称字体大小。
字体粗细： 坐标轴名称字体粗细。
字体： 坐标轴名称字体样式。
标签： 坐标轴刻度标签的相关设置
显示： 是否显示刻度标签。
内容格式器： 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
字符串模板：模板变量为
{value}。{value}kg回调函数
可用参数：
- data： 刻度默认文本。
- index： 刻度索引。
return data;
字体颜色： 标签字体颜色。
字体大小： 标签字体大小。
字体粗细： 标签字体粗细。
字体： 标签字体样式。
轴线： 坐标轴轴线相关设置
显示： 是否显示轴线。
颜色： 轴线颜色。
宽度： 轴线宽度。
类型： 轴线类型。
刻度： 坐标轴刻度相关设置
显示： 是否显示坐标轴刻度。
刻度线与标签对齐： 刻度线是否与标签对齐显示。
分割线：
显示： 是否显示分割线。
颜色： 分割线颜色。
宽度： 分割线宽度。
类型： 分割线类型。
分隔区域：
显示： 是否显示分隔区域。
奇数颜色： 奇数区域颜色选择填充。
偶数颜色： 偶数区域颜色选择填充。
# 标题
显示： 是否显示标题
内容：
标题
- 主： 主标题内容。
- 副： 副标题内容。
超链接
- 主： 主标题超链接。
- 副： 副标题超链接。
位置
- 水平对齐
- 垂直对齐
外观
内边距
主副间隔
主标题文本样式
字体颜色： 主标题字体颜色。
字体大小： 主标题字体大小。
字体粗细： 主标题字体粗细。
字体： 主标题字体样式。
副标题文本样式
字体颜色： 副标题字体颜色。
字体大小： 副标题字体大小。
字体粗细： 副标题字体粗细。
字体： 副标题字体样式。
# 图例 3.0+
- 属性同 柱状图属性 -> 图例。
# 提示框
显示： 是否显示提示框。
提示模板 ：提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
字符串模板
模板变量有
{a},{b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在触发点为坐标轴的时候，会有多个系列的数据，此时可以通过{a0},{a1},{a2}这种后面加索引的方式表示系列的索引。 不同图表类型下的{a}，{b}，{c}，{d}含义不一样。 其中变量{a},{b},{c},{d}在不同图表类型下代表数据含义为：- 折线（区域）图、柱状（条形）图、K 线图 :
{a}（系列名称），{b}（类目值），{c}（数值）,{d}（无） - 散点图（气泡）图 :
{a}（系列名称），{b}（数据名称），{c}（数值数组）,{d}（无） - 地图 :
{a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无） - 饼图、仪表盘、漏斗图:
{a}（系列名称），{b}（数据项名称），{c}（数值）,{d}（百分比）
- 折线（区域）图、柱状（条形）图、K 线图 :
回调函数
return data;
触发点：
坐标轴： 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
数据项： 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
提示外观
背景颜色： 提示框浮层的背景颜色。
边框颜色： 提示框浮层的边框颜色。
边框宽度： 提示框浮层的边框宽度。
内边距： 提示框浮层内边距。
文本样式
字体颜色： 提示框字体颜色。
字体大小： 提示框字体大小。
字体粗细： 提示框字体粗细。
字体： 提示框字体样式。
# 工具栏
显示： 是否显示工具栏。
功能按钮
保存为图片按钮
还原按钮
数据视图按钮
位置朝向
排列方式： 功能按钮的布局朝向。
水平位置： 水平排列。
垂直位置： 垂直排列。
图表尺寸
- 图标大小
- 间隔
# 时间轴 3.0+
- 属性同 饼图属性 -> 时间轴 。
# 数据
# 静态数据
上图中的示例JSON代码如下：
[
{
"x": "一月",
"y": "ten",
"z": 25
},
{
"x": "一月",
"y": "nine",
"z": 64
},
{
"x": "一月",
"y": "eight",
"z": 95
},
{
"x": "一月",
"y": "seven",
"z": 8
},
{
"x": "一月",
"y": "six",
"z": 85
},
{
"x": "一月",
"y": "five",
"z": 88
},
{
"x": "二月",
"y": "ten",
"z": 6
},
{
"x": "二月",
"y": "nine",
"z": 33
},
{
"x": "二月",
"y": "eight",
"z": 78
},
{
"x": "二月",
"y": "seven",
"z": 10
},
{
"x": "二月",
"y": "six",
"z": 89
},
{
"x": "二月",
"y": "five",
"z": 11
},
{
"x": "三月",
"y": "ten",
"z": 2
},
{
"x": "三月",
"y": "nine",
"z": 5
},
{
"x": "三月",
"y": "eight",
"z": 11
},
{
"x": "三月",
"y": "seven",
"z": 25
},
{
"x": "三月",
"y": "six",
"z": 88
},
{
"x": "三月",
"y": "five",
"z": 33
},
{
"x": "四月",
"y": "ten",
"z": 4
},
{
"x": "四月",
"y": "nine",
"z": 68
},
{
"x": "四月",
"y": "eight",
"z": 94
},
{
"x": "四月",
"y": "seven",
"z": 51
},
{
"x": "四月",
"y": "six",
"z": 56
},
{
"x": "四月",
"y": "five",
"z": 45
},
{
"x": "五月",
"y": "ten",
"z": 93
},
{
"x": "五月",
"y": "nine",
"z": 19
},
{
"x": "五月",
"y": "eight",
"z": 4
},
{
"x": "五月",
"y": "seven",
"z": 76
},
{
"x": "五月",
"y": "six",
"z": 12
},
{
"x": "五月",
"y": "five",
"z": 77
},
{
"x": "六月",
"y": "ten",
"z": 40
},
{
"x": "六月",
"y": "nine",
"z": 34
},
{
"x": "六月",
"y": "eight",
"z": 45
},
{
"x": "六月",
"y": "seven",
"z": 41
},
{
"x": "六月",
"y": "six",
"z": 30
},
{
"x": "六月",
"y": "five",
"z": 93
}
]
x： 维度，X 轴的值。
y： 量度，Y 轴的值。
z： 量度，Z 轴的值。
3D 柱状图中需要单维度、多量度的数据，所以 X 轴中只解析拖入的第一个字段、Y 轴中解析拖入的第一个字段，Z 轴中解析拖入的第一个字段多余字段在图表中不解析。
# 数据资源
# 交互
# 柱图单击交互事件
勾选启用，开启组件交互功能。当单击 3D 柱状图柱子时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。
# 数据响应
3D 柱状图支持数据响应配置。
# 节点编程
# 事件
柱图点击事件： 柱子单击触发事件。
- 抛出的参数： 柱子所携带的数据。
图表配置转换完成后： 图表 Option 配置转换完成后事件。
- 抛出的参数： 配置完成后的 Option 。
图例切换事件： 图表图例切换时触发。3.0+
- 抛出的参数： 切换的图例名称及选中状态。
时间轴切换事件： 时间轴节点切换时触发。3.0+
- 抛出的参数： 时间轴节点名称。
# 动作
导入图表配置： 可导入 Echarts 图表 Option 配置。
- 接收的参数： 修改后的 Option 。
设置图例： 设置图例的选中状态。3.0+
{ "类型一": true, "类型二": false, "类型三": false }设置时间轴： 设置活动的时间轴节点。 3.0+
- 接受参数： 时间轴节点名称。例如：
{ "value": "2021" }