13518219792
根据您的个性需求进行定制 先人一步 抢占小程序红利时代
您可以使用 series[i]-bar 来在 ECharts 中实现柱状（条形）图，ECharts 柱状（条形）图是通过柱形的高度（条形的宽度）来表现数据的大小的，柱状图可以应用在直角坐标系上，该直角坐标系需要至少有一个类目轴或时间轴。下文中介绍了 ECharts 柱状图的一些基本的属性设置，通过这些属性，您可以更好的了解柱状图。
十年专注成都网站制作，企业网站制作，个人网站制作服务，为大家分享网站制作知识、方案，网站设计流程、步骤,成功服务上千家企业。为您提供网站建设,网站制作,网页设计及定制高端网站建设服务,专注于企业网站制作,高端网页制作,对成都iso认证等多个行业，拥有多年的网站设计经验。
将 ECharts 系列的 type 值设置为 bar，从而实现柱形图；type 的取值类型为 string。
设置 ECharts 柱状图的名称，用于 tooltip 的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。name 的取值类型为 string。
使用柱状图时是否启用图例 hover 时的联动高亮；该属性是一个 boolean 类型的值，在 ECharts 中默认取值为 true。
设置该柱状图使用的坐标系，属于 string 类型的值，默认取值如下：
使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。该属性的值为 number 类型，默认值为 0。
使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。该属性的值为 number 类型，默认值为 0。
柱状图上的文本标签，这是一个 Object ，可用于说明图形的一些数据信息，比如值，名称等，label 选项在 ECharts 2.x 中放置于 itemStyle.normal 下，在 ECharts 3 中为了让整个配置项结构更扁平合理，label 被拿出来跟 itemStyle 平级，并且跟 itemStyle 一样拥有 normal, emphasis 两个状态。
柱状图的数据堆叠，同个类目轴上柱状图配置相同的 stack 值可以堆叠放置。stack 值的类型为 string，默认状态下为 null。
鼠标悬浮时在柱状图元素上时鼠标的样式是什么。该属性的值为 string 类型，默认取值为 pointer，同 CSS 的 cursor。
柱状图中柱条的宽度，不设置时自适应，其值为 number 或 string 类型，支持设置成相对于类目宽度的百分比。
在同一坐标系上，此属性会被多个 'bar' 系列共享。此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，并且是对此坐标系中所有 'bar' 系列生效。
柱状图中柱条的最大宽度，不设置时自适应，其值为 number 或 string 类型，支持设置成相对于类目宽度的百分比。
在同一坐标系上，此属性会被多个 'bar' 系列共享。此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，并且是对此坐标系中所有 'bar' 系列生效。
柱状图中柱条的最小高度，可用于防止某数据项的值过小而影响交互。取值为 number 类型，默认值为 0。
设置柱状图的柱间距离，可设固定值（如 20）或者百分比（如 '30%'（默认值），表示柱子宽度的 30%）。取值为 string 类型。
如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用。
在同一坐标系上，此属性会被多个 'bar' 系列共享。此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，并且是对此坐标系中所有 'bar' 系列生效。
例子：
点击编辑实例 》》
设置类目间柱形距离，默认为类目间距的20%，可设固定值。取值为 string 类型。
在同一坐标系上，此属性会被多个 'bar' 系列共享。此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，并且是对此坐标系中所有 'bar' 系列生效。
使用 dimensions 定义 data 每个维度的信息。取值为 Array 例如：
series: {
type: 'xxx',
// 定义了每个维度的名称。这个名称会被显示到默认的 tooltip 中。
dimensions: ['date', 'open', 'close', 'highest', 'lowest']
data: [
// 有了上面 dimensions 定义后，下面这五个维度的名称分别为：
// 'date', 'open', 'close', 'highest', 'lowest'
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
...
]
}series: {
type: 'xxx',
dimensions: [
null, // 如果此维度不想给出定义，则使用 null 即可
{type: 'ordinal'}, // 只定义此维度的类型。
// 'ordinal' 表示离散型，一般文本使用这种类型。
// 如果类型没有被定义，会自动猜测类型。
{name: 'good', type: 'number'},
'bad' // 等同于 {name: 'bad'}
]
}dimensions 数组中的每一项可以是：
值得一提的是，当定义了 dimensions 后，默认 tooltip 中对个维度的显示，会变为『竖排』，从而方便显示每个维度的名称。如果没有定义 dimensions，则默认 tooltip 会横排显示，且只显示数值没有维度名称可显示。
定义 data 的哪个维度被编码成什么。比如：
series: {
type: 'xxx',
encode: {
x: [3, 1, 5], // 表示维度 3、1、5 映射到 x 轴。
y: 2, // 表示维度 2 映射到 y 轴。
tooltip: [3, 2, 4] // 表示维度 3、2、4 会在 tooltip 中显示。
label: 3 // 表示 label 使用维度 3。
},
data: [
// 每一列称为一个『维度』。
// 这里分别是维度 0、1、2、3、4。
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
...
]
}encode 支持的属性，根据坐标系不同而不同。 对于 直角坐标系（cartesian2d），支持 x、y。 对于 极坐标系（polar），支持 radius、angle。 对于 地理坐标系（geo），支持 lng，lat。 此外，均支持 tooltip 和 label 和 itemName（用于指定 tooltip 中数据项名称）。
当使用 dimensions 给维度定义名称后，encode 中可直接引用名称，例如：
series: {
type: 'xxx',
dimensions: ['date', 'open', 'close', 'highest', 'lowest'],
encode: {
x: 'date',
y: ['open', 'close', 'highest', 'lowest']
},
data: [ ... ]
}柱状图中的数据内容数组，是一个 Object。数组项通常为具体的数据项。
通常来说，数据用一个二维数组表示。如下，每一列被称为一个『维度』。
series: [{
data: [
// 维度X 维度Y 其他维度 ...
[ 3.4, 4.5, 15, 43],
[ 4.2, 2.3, 20, 91],
[ 10.8, 9.5, 30, 18],
[ 7.2, 8.8, 18, 57]
]
}]特别地，当只有一个轴为类目轴（axis.type 为 'category'）的时候，数据可以简化用一个一维数组表示。例如：
xAxis: {
data: ['a', 'b', 'm', 'n']
},
series: [{
// 与 xAxis.data 一一对应。
data: [23, 44, 55, 19]
// 它其实是下面这种形式的简化：
// data: [[0, 23], [1, 44], [2, 55], [3, 19]]
}]『值』与 轴类型 的关系：
当需要对个别数据进行个性化定义时：
数组项可用对象，其中的 value 像表示具体的数值，如：
[
12,
34,
{
value : 56,
//自定义标签样式，仅对该数据项有效
label: {},
//自定义特殊 itemStyle，仅对该数据项有效
itemStyle:{}
},
10
]
// 或
[
[12, 33],
[34, 313],
{
value: [56, 44],
label: {},
itemStyle:{}
},
[10, 33]
]空值：
当某数据不存在时（ps：不存在不代表值为 0），可以用 '-' 或者 null 或者 undefined 或者 NaN 表示。
例如，无数据在折线图中可表现为该点是断开的，在其它图中可表示为图形不存在。
柱状图的标域，常用于标记图表中某个范围的数据，例如标出某段时间投放了广告。
柱状图所有图形的 zlevel 值，值类型为 number，默认值为 0。
zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。
zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
柱状图组件的所有图形的 z 值，值类型为 number，默认值为 2。控制图形的前后顺序。z 值小的图形会被 z 值大的图形覆盖。
z 相比 zlevel 优先级更低，而且不会创建新的 Canvas。
柱状图是否不响应和触发鼠标事件，值为 boolean 类型，默认为 false，即响应和触发鼠标事件。
柱状图是否开启动画，值为 boolean 类型，默认为 true。
柱状图是否开启动画的阈值，值为 number 类型，默认为 2000，当单个系列显示的图形数量大于这个阈值时会关闭动画。
初始动画的时长，支持回调函数，值为 number 类型，默认为 1000，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果：
animationDuration: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}柱状图初始动画的缓动效果，值为 string 类型，默认为 cubicOut。不同的缓动效果可以参考 缓动示例。
初始动画的延迟，支持回调函数，类型为 number 或 Function ，默认为 0。可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例：
animationDelay: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}也可以看该示例
柱状图数据更新动画的时长，类型为 number 或 Function ，默认为 300。
支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果：
animationDurationUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}柱状图数据更新动画的缓动效果，类型为 string，默认值为 cubicOut。
柱状图数据更新动画的延迟，支持回调函数，类型为 number 或 Function ，默认为 0，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例：
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}也可以看该示例
