# 折线柱状图
折线柱状图是柱状图中的一种，主要用于显示一段时间内的数据变化或显示各项之间的比较情况。
# 属性
# 基础
组件标题： 用于在图层中显示组件的名称。1.1+
组件尺寸： 组件的宽度和高度，单位为
px。组件位置： 组件在大屏中的位置，通过横纵坐标来定义，单位为
px。旋转角度： 组件在大屏中旋转的角度。
透明度： 组件的透明度。
背景颜色： 组件的背景颜色。
系列颜色： 扇区的颜色。默认情况下图表扇区的颜色为主题的颜色。
# 系列
折线柱状图为单维度，多量度的图表，因此需要分别设置每个系列下的柱子属性。
系列 1：
类型： 柱状和折线的转换。
堆叠名： 系列中堆叠名称相同者堆叠在一起。
顺序： 控制图形的层级顺序。值小的图形会被值大的图形覆盖。
Y 轴索引： 绑定 Y 轴的图表显示。
数据标注： 是否显示最大值、最小值的数据标注。
警告：
数据标注只有在柱状图或折线图上可用，堆叠柱状图和折线堆叠图上不可用。
平均线： 是否显示同一系列的平均线。
柱设置： 该系列下柱子的颜色、边框设置，支持颜色填充和渐变填充两种方式。
宽度： 柱子宽度，左右滑动或者输入值改变宽度，可为
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)： 动画的时长。
缓动效果： 动画的缓动效果。
系列 2：
折线设置： 该系列下折线的设置。
平滑曲线： 折线是否为平滑曲线。
线颜色： 折线的颜色。
宽度： 折线的宽度。
类型： 折线的类型。
折线样式： 该系列下折线样式的设置。
渐变色： 是否添加渐变色。
是：
渐变色方向： 渐变色的方向，可为
正下到正上，左下到右上，右上到左下。渐变色范围设置： 设置渐变色的颜色范围。
否：
- 颜色： 控制柱的颜色。
拐点图形： 折线拐点处的图形。
拐点大小： 折线拐点的大小。
拐点描边： 折线拐点的描边颜色。
描边线宽： 折线拐点的描边线宽。
描边类型： 折线拐点的描边类型。
文本标签： 指折线拐点处上的文本标签，可用于说明图形的一些数据信息，例如值、名称等。
显示： 是否显示文本。
内容格式器： 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用
\n换行。字符串模板变量
{a}: 系列名。{b}: 数据名。{c}: 数据值。例如：
{b}: {c}
回调函数
可用参数为
data。示例：
return data.name;参数
data是 内容格式器需要的单个数据集。格式如下：{ // 数据名，类目名 "name": string, // 传入的原始数据项 "data": Object, // 传入的数据值 "value": number | Array, // 百分比 "percent": number }位置： 文本标签上值的位置。
字体颜色： 修改字体的颜色。
字体大小： 修改字体的大小。
字体粗细： 修改字体的粗细，可为
普通和加粗和更细，默认为普通。字体： 修改字体的样式。
初始动画： 对组件动画的配置。
开启动画： 组件是否启用动画。
动画时长(ms)： 动画的时长。
缓动效果： 动画的缓动效果。
# 视区
显示： 是否显示直角坐标系网格。
左边距： 离容器左侧的距离。
右边距： 离容器上侧的距离。
上边距： 离容器右侧的距离。
下边距： 离容器下侧的距离。
# X 轴
显示： 是否显示 x 轴坐标。
位置： x 轴的的坐标显示位置。
名称： x 轴的坐标名称。
名称位置： 坐标轴名称的显示位置。开端、中端、末端。
轴与名称间距： 坐标轴与名称之间的距离。
反向坐标轴系： 是否反向显示坐标轴数据。
两边留白： 坐标轴两边留白。
名称文本样式： 坐标轴名称的字体样式设置。
字体颜色： 坐标轴名称字体颜色。
字体大小： 坐标轴名称字体大小。
字体粗细： 坐标轴名称字体粗细。
字体： 坐标轴名称字体样式。
标签： 坐标轴刻度标签的相关设置
显示： 是否显示刻度标签。
内容格式器： 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
字符串模板：模板变量为
{value}。{value}kg回调函数
可用参数：
- data： 刻度默认文本。
- index： 刻度索引。
return data;
字体旋转： 坐标轴名字旋转，角度值。
对齐方式： 坐标轴标签对齐，可为
左，中，右。距离轴线： 坐标轴名称与轴线之间的距离。
字体颜色： 标签字体颜色。
字体大小： 标签字体大小。
字体粗细： 标签字体粗细，可为
普通，加粗，更细。字体： 标签字体样式。
轴线： 坐标轴轴线相关设置
显示： 是否显示轴线。
颜色： 轴线颜色。
宽度： 轴线宽度。
类型： 轴线类型。
刻度： 坐标轴刻度相关设置
显示： 是否显示坐标轴刻度。
与标签对齐： 刻度线是否与标签对齐显示。
颜色： 刻度颜色。
宽度： 刻度宽度。
分割线：
显示： 是否显示分割线。
颜色： 分割线颜色。
宽度： 分割线宽度。
类型： 分割线类型。
分隔区域：
显示： 是否显示分隔区域。
奇数颜色： 奇数区域颜色选择填充。
偶数颜色： 偶数区域颜色选择填充。
缩放区域：
区域缩放： 是否区域缩放。
鼠标缩放： 是否鼠标缩放。
滑块缩放： 是否滑块缩放。
数据窗口比例： 滑块所占数据窗口的百分比。
滑块高度： 滑块组件高度。
水平位置： 滑块水平位置。
垂直位置： 滑块垂直位置。
滑动显示文本： 是否滑动显示文本。
锁定滑块比例： 是否锁定滑块。
滑块区域背景： 滑块区域背景颜色。
线条颜色： 滑块区域内线条颜色。
阴影透明度： 滑块阴影的透明度。
线条宽度： 滑块区域内线条宽度。
线条类型： 滑块线条类型，可为
实线，虚线，点线。
# Y 轴
Y 轴 1
坐标： 是否显示 y 轴坐标。
位置： y 轴的坐标显示位置。
名称： y 轴的坐标名称。
名称位置： 坐标轴名称的显示位置。
轴与名称间距： 坐标轴与名称之间的距离。
反向坐标轴系： 是否反向显示坐标轴数据。
两边留白： 坐标轴两边留白。
坐标区间： y 轴坐标值的取值范围。
名称文本样式： 坐标轴名称的字体样式设置。
字体颜色： 坐标轴名称字体颜色。
字体大小： 坐标轴名称字体大小。
字体粗细： 坐标轴名称字体粗细。
字体： 坐标轴名称字体样式。
标签： 坐标轴刻度标签的相关设置
显示： 是否显示标签。
内容格式器： 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
字符串模板：模板变量为
{value}。{value}kg回调函数
可用参数：
data： 刻度默认文本。
index： 刻度索引。
return data;
字体旋转： 坐标轴名字旋转，角度值。
对齐方式： 坐标轴标签对齐，可为
左，中，右。距离轴线： 坐标轴名称与轴线之间的距离。
字体颜色： 标签字体颜色。
字体大小： 标签字体大小。
字体粗细： 标签字体粗细。
字体： 标签字体样式。
轴线： 坐标轴轴线相关设置
显示： 是否显示轴线。
颜色： 轴线颜色。
宽度： 轴线宽度。
类型： 轴线类型。
刻度： 坐标轴刻度相关设置
显示： 是否显示刻度。
与标签对齐： 刻度线是否与标签对齐显示。
分割线：
显示： 是否显示分割线。
颜色： 分割线颜色。
宽度： 分割线宽度。
类型： 分割线类型。
分隔区域：
显示： 是否显示分隔区域。
奇数颜色： 奇数区域颜色选择填充。
偶数颜色： 偶数区域颜色选择填充。
缩放区域：
区域缩放： 是否区域缩放。
鼠标缩放： 是否鼠标缩放。
滑块缩放： 是否滑块缩放。
数据窗口比例： 滑块所占数据窗口的百分比。
滑块高度： 滑块组件高度。
水平位置： 滑块水平位置。
垂直位置： 滑块垂直位置。
滑动显示文本： 是否滑动显示文本。
锁定滑块比例： 是否锁定滑块。
滑块区域背景： 滑块区域背景颜色。
线条颜色： 滑块区域内线条颜色。
阴影透明度： 滑块阴影的透明度。
线条宽度： 滑块区域内线条宽度。
线条类型： 滑块线条类型，可为
实线，虚线，点线。
Y 轴 2：
显示： 默认为关闭状态。
位置： 默认显示在坐标轴右侧。
其他属性配置与Y 轴 1属性配置相同。
提示：
Y 轴 2为显示状态，轴 1的分割线与轴 2的分割线同时显示时，界面可能会有些乱。 您可以自己调整坐标区间的值来使轴 1和轴 2的分割线重合。
# 标题
显示标题： 是否显示标题
内容：
标题
主： 主标题内容。
副： 副标题内容。
超链接
- 主： 主标题超链接。
- 副： 副标题超链接。
位置
- 水平对齐
- 垂直对齐
外观
内边距
主副间隔
主标题文本样式
字体颜色： 主标题字体颜色。
字体大小： 主标题字体大小。
字体粗细： 主标题字体粗细。
字体： 主标题字体样式。
副标题文本样式
字体颜色： 副标题字体颜色。
字体大小： 副标题字体大小。
字体粗细： 副标题字体粗细。
字体： 副标题字体样式。
# 图例
显示图例： 是否显示图例。
选中模式： 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。
内容格式器： 用来格式化图例文本，支持字符串模板和回调函数两种形式。
字符串模板：
{name}回调函数：
return data;
位置
排列方式： 图例列表的布局朝向。
水平位置： 水平排列。
垂直位置： 垂直排列。
文字样式
字体颜色： 图例字体颜色。
字体大小： 图例字体大小。
字体粗细： 图例字体粗细。
字体： 图例字体样式。
# 提示框
显示提示框： 是否显示提示框。
提示模板 ：提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
字符串模板
模板变量有
{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;
触发点：
坐标轴： 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
数据项： 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
提示外观
背景颜色： 提示框浮层的背景颜色。
边框颜色： 提示框浮层的边框颜色。
边框宽度： 提示框浮层的边框宽度。
内边距： 提示框浮层内边距。
文本样式
字体颜色： 提示框字体颜色。
字体大小： 提示框字体大小。
字体粗细： 提示框字体粗细。
字体： 提示框字体样式。
# 工具栏
显示工具栏： 是否显示工具栏。
功能按钮
保存为图片按钮
还原按钮
数据视图按钮
位置朝向
排列方式： 功能按钮的布局朝向。
水平位置： 水平排列。
垂直位置： 垂直排列。
图表尺寸
- 图标大小
- 间隔
# 数据
# 静态数据
上图中的示例JSON代码如下：
[
{
"x": "一月",
"y1": 12,
"y2": 53
},
{
"x": "二月",
"y1": 30,
"y2": 76
},
{
"x": "三月",
"y1": 23,
"y2": 81
},
{
"x": "四月",
"y1": 35,
"y2": 27
},
{
"x": "五月",
"y1": 26,
"y2": 40
}
]
x： 维度，各柱的类目。
y1： 量度，系列 1 柱的值。
y1： 量度，系列 2 柱的值。
折线柱状图中需要单维度、多量度的数据，所以横轴中只解析拖入的第一个字段、纵轴中解析拖入的前两个字段，多余字段在图表中不解析。
# 数据资源
# 交互
# 柱图单击交互事件
勾选启用，开启组件交互功能。当单击折线柱状图柱子时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。
# 数据响应
折线柱状图支持数据响应配置。
# 数据上卷，下钻
折线柱状图支持数据上卷，下钻配置。
# 节点编程
# 事件
柱图点击事件： 柱子单击触发事件。
- 抛出的参数： 柱子所携带的数据。
图表配置转换完成后： 图表 Option 配置转换完成后事件。
- 抛出的参数： 配置完成后的 Option 。
# 动作
导入图表配置： 可导入 Echarts 图表 Option 配置。
- 接收的参数： 修改后的 Option 。