1、堆叠柱形图
series-bar. stack
数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。 stack 定义相同名称即相互堆叠
series-bar
柱状图
柱状图（或称条形图）是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型。
所有属性
series-bar. coordinateSystem = 'cartesian2d'
该系列使用的坐标系，可选：
-
'cartesian2d'使用二维的直角坐标系（也称笛卡尔坐标系），通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。
-
'polar'使用极坐标系，通过 polarIndex 指定相应的极坐标组件
series-bar. backgroundStyle
从
v4.7.0开始支持
每一个柱条的背景样式。需要将 showBackground 设置为 true 时才有效。
series-bar.backgroundStyle. borderRadius 试一试
圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。 如:
borderRadius: 5, // 统一设置四个角的圆角大小
borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）
series-bar.backgroundStyle. shadowBlur 试一试
图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
示例：
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
series-bar. label
图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
series-bar.label. position = 'inside' 试一试
标签的位置。
-
可以通过内置的语义声明位置：
示例：
position: 'top'支持：
top/left/right/bottom/inside/insideLeft/insideRight/insideTop/insideBottom/insideTopLeft/insideBottomLeft/insideTopRight/insideBottomRight -
也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。
示例：
// 绝对的像素值 position: [10, 10], // 相对的百分比 position: ['50%', '50%']
参见：label position。
series-bar.label. distance = 5 试一试
series-bar.label. formatter
标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用
换行。
字符串模板 模板变量有：
{a}：系列名。{b}：数据名。{c}：数据值。{@xxx}：数据中名为'xxx'的维度的值，如{@product}表示名为'product'的维度的值。{@[n]}：数据中维度n的值，如{@[3]}表示维度 3 的值，从 0 开始计数。
示例：
formatter: '{b}: {@score}'
回调函数
回调函数格式：
(params: Object|Array) => string
参数 params 是 formatter 需要的单个数据集。格式如下：
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名，类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
value: number|Array|Object,
// 坐标轴 encode 映射信息，
// key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）
// value 必然为数组，不会为 null/undefied，表示 dimension index 。
// 其内容如：
// {
// x: [2] // dimension index 为 2 的数据映射到 x 轴
// y: [0] // dimension index 为 0 的数据映射到 y 轴
// }
encode: Object,
// 维度名列表
dimensionNames: Array<String>,
// 数据的维度 index，如 0 或 1 或 2 ...
// 仅在雷达图中使用。
dimensionIndex: number,
// 数据图形的颜色
color: string,
}
注：encode 和 dimensionNames 的使用方式，例如：
如果数据为：
dataset: {
source: [
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
}
则可这样得到 y 轴对应的 value：
params.value[params.encode.y[0]]
如果数据为：
dataset: {
dimensions: ['product', '2015', '2016', '2017'],
source: [
{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
{product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
{product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
}
则可这样得到 y 轴对应的 value：
params.value[params.dimensionNames[params.encode.y[0]]]
series-bar.label. fontWeight = normal 试一试
文字字体的粗细。
可选：
'normal''bold''bolder''lighter'- 100 | 200 | 300 | 400...
series-bar.label. fontFamily = 'sans-serif' 试一试
文字的字体系列。
还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
series-bar.label. align 试一试
文字水平对齐方式，默认自动。
可选：
'left''center''right'
rich 中如果没有设置 align，则会取父层级的 align。例如：
{
align: right,
rich: {
a: {
// 没有设置 `align`，则 `align` 为 right
}
}
}
series-bar.label. verticalAlign 试一试
文字垂直对齐方式，默认自动。
可选：
'top''middle''bottom'
rich 中如果没有设置 verticalAlign，则会取父层级的 verticalAlign。例如：
{
verticalAlign: bottom,
rich: {
a: {
// 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom
}
}
}
series-bar.label. lineHeight 试一试
行高。
rich 中如果没有设置 lineHeight，则会取父层级的 lineHeight。例如：
{
lineHeight: 56,
rich: {
a: {
// 没有设置 `lineHeight`，则 `lineHeight` 为 56
}
}
}
series-bar.label. backgroundColor = 'transparent' 试一试
文字块背景色。
可以使用颜色值，例如：'#123234', 'red', 'rgba(0,23,11,0.3)'。
也可以直接使用图片，例如：
backgroundColor: {
image: 'xxx/xxx.png'
// 这里可以是图片的 URL，
// 或者图片的 dataURI，
// 或者 HTMLImageElement 对象，
// 或者 HTMLCanvasElement 对象。
}
当使用图片的时候，可以使用 width 或 height 指定高宽，也可以不指定自适应。
如果设置为 'inherit'，则为视觉映射得到的颜色，如系列色。
series-bar.label. borderType = 'solid' 试一试
文字块边框描边类型。
可选：
'solid''dashed''dotted'
自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 borderDashOffset 可实现更灵活的虚线效果。
例如：
{
borderType: [5, 10],
borderDashOffset: 5
}
series-bar.label. borderDashOffset 试一试
series-bar.label. padding 试一试
文字块的内边距。例如：
padding: [3, 4, 5, 6]：表示[上, 右, 下, 左]的边距。padding: 4：表示padding: [4, 4, 4, 4]。padding: [3, 4]：表示padding: [3, 4, 3, 4]。
注意，文字块的 width 和 height 指定的是内容高宽，不包含 padding。
series-bar.label. textBorderType = 'solid' 试一试
文字本身的描边类型。
可选：
'solid''dashed''dotted'
自 v5.0.0 开始，也可以是 number 或者 number 数组，用以指定线条的 dash array，配合 textBorderDashOffset 可实现更灵活的虚线效果。
例如：
{
textBorderType: [5, 10],
textBorderDashOffset: 5
}
series-bar.label. textBorderDashOffset 试一试
series-bar.label. overflow = 'none' 试一试
文字超出宽度是否截断或者换行。配置width时有效
'truncate'截断，并在末尾显示ellipsis配置的文本，默认为...'break'换行'breakAll'换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行
series-bar.label. rich
在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。
例如：
label: {
// 在文本中，可以对部分文本采用 rich 中定义样式。
// 这里需要在文本中使用标记符号：
// `{styleName|text content text content}` 标记样式名。
// 注意，换行仍是使用 '
'。
formatter: [
'{a|这段文本采用样式a}',
'{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
].join('
'),
rich: {
a: {
color: 'red',
lineHeight: 10
},
b: {
backgroundColor: {
image: 'xxx/xxx.jpg'
},
height: 40
},
x: {
fontSize: 18,
fontFamily: 'Microsoft YaHei',
borderColor: '#449933',
borderRadius: 4
},
...
}
}
详情参见教程：富文本标签
所有属性
series-bar. labelLine
标签的视觉引导线配置。
series-bar.labelLine. smooth 试一试
是否平滑视觉引导线，默认不平滑，可以设置成 true 平滑显示，也可以设置为 0 到 1 的值，表示平滑程度。
series-bar.labelLine. minTurnAngle
通过调整第二段线的长度，限制引导线两端之间最小的夹角，以防止过小的夹角导致显示不美观。
可以设置为 0 - 180 度。
series-bar.labelLine. lineStyle
所有属性
series-bar. itemStyle
图形样式。
series-bar.itemStyle. borderRadius 试一试
圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。 如:
borderRadius: 5, // 统一设置四个角的圆角大小
borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）
series-bar.itemStyle. shadowBlur 试一试
图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
示例：
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
series-bar.itemStyle. decal
图形的贴花图案，在 aria.enabled 与 aria.decal.show 都是 true 的情况下才生效。
如果为 'none' 表示不使用贴花图案。
所有属性
series-bar. labelLayout
从
v5.0.0开始支持
标签的统一布局配置。
该配置项是在每个系列默认的标签布局基础上，统一调整标签的(x, y)位置，标签对齐等属性以实现想要的标签布局效果。
该配置项也可以是一个有如下参数的回调函数
// 标签对应数据的 dataIndex
dataIndex: number
// 标签对应的数据类型，只在关系图中会有 node 和 edge 数据类型的区分
dataType?: string
// 标签对应的系列的 index
seriesIndex: number
// 标签显示的文本
text: string
// 默认的标签的包围盒，由系列默认的标签布局决定
labelRect: {x: number, y: number, width: number, height: number}
// 默认的标签水平对齐
align: 'left' | 'center' | 'right'
// 默认的标签垂直对齐
verticalAlign: 'top' | 'middle' | 'bottom'
// 标签所对应的数据图形的包围盒，可用于定位标签位置
rect: {x: number, y: number, width: number, height: number}
// 默认引导线的位置，目前只有饼图(pie)和漏斗图(funnel)有默认标签位置
// 如果没有该值则为 null
labelLinePoints?: number[][]
示例：
将标签显示在图形右侧 10px 的位置，并且垂直居中：
labelLayout(params) {
return {
x: params.rect.x + 10,
y: params.rect.y + params.rect.height / 2,
verticalAlign: 'middle',
align: 'left'
}
}
根据图形的包围盒尺寸决定文本尺寸
labelLayout(params) {
return {
fontSize: Math.max(params.rect.width / 10, 5)
};
}
series-bar.labelLayout. moveOverlap
在标签重叠的时候是否挪动标签位置以防止重叠。
目前支持配置为：
'shiftX'水平方向依次位移，在水平方向对齐时使用'shiftY'垂直方向依次位移，在垂直方向对齐时使用
下面是标签右对齐并配置垂直方向依次位移以防止重叠的示例。
series-bar.labelLayout. labelLinePoints
标签引导线三个点的位置。格式为：
[[x, y], [x, y], [x, y]]
在饼图中常用来微调已经计算好的引导线，其它情况一般不建议设置。
series-bar. emphasis
高亮的图形样式和标签样式。
series-bar.emphasis. focus = 'none'
从
v5.0.0开始支持
在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。支持如下配置：
'none'不淡出其它图形，默认使用该配置。-
'self'只聚焦（不淡出）当前高亮的数据的图形。 -
'series'聚焦当前高亮的数据所在的系列的所有图形。
示例：
下面代码配置了柱状图在高亮一个图形的时候，淡出当前直角坐标系所有其它的系列。
emphasis: {
focus: 'series',
blurScope: 'coordinateSystem'
}
series-bar.emphasis. blurScope = 'coordinateSystem'
从
v5.0.0开始支持
在开启focus的时候，可以通过blurScope配置淡出的范围。支持如下配置
'coordinateSystem'淡出范围为坐标系，默认使用该配置。'series'淡出范围为系列。'global'淡出范围为全局。
series-bar.emphasis. label
图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
所有属性
series-bar.emphasis. itemStyle
图形样式。
所有属性
series-bar. blur
淡出时的图形样式和标签样式。开启 emphasis.focus 后有效。
series-bar.blur. label
图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
所有属性
series-bar.blur. itemStyle
图形样式。
所有属性
series-bar. select
数据选中时的图形样式和标签样式。开启 selectedMode 后有效。
series-bar.select. label
图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
所有属性
series-bar.select. itemStyle
图形样式。
所有属性
series-bar. selectedMode 试一试
从
v5.0.0开始支持
选中模式的配置，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'，'multiple'，分别表示单选还是多选。