最简单的柱状图
柱状图的series typr 为 bar
option = { xAxis:{ data:['a','b','c','d','e'] }, yAxis:{ }, series:{ type: 'bar', data:[1,2,3,4,5] } }
xAxis：类目型
yAxis：数值型
series：系列（指定数值）
多系列的柱状图
如果要实现多系列，我们可以把原先的字典类型修改为数组类型即可
option:{ xAxis:{ data:['a','b','c','d','e'], }, yAxis:{ }, series:[ { type:'bar', data:[1,2,3,4,5] }, { type:'bar', data:[5,4,3,2,1] } ] }
柱状图样式设置
柱条样式
柱条的样式可以通过 series.itemStyle 设置
一些常用：
柱条的颜色（color）；
- 柱条的描边颜色（borderColor）、宽度（borderWidth）、样式（borderType）；
- 柱条圆角的半径（barBorderRadius）；
- 柱条透明度（opacity）；
- 阴影（shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY）。
我们可以设置stack属性来实现柱形叠加效果
stack自定义，相当于字典中的key
option = { xAxis: { data: ["a", "b", "c", "d", "e"], }, yAxis: {}, series: [ { type: "bar", data: [1, 2, 3, 4, 5], stack: "y", }, { type: "bar", data: [1, 2, 3, 4, 5], stack: "y", }, ], };
柱条宽度和高度
柱条宽度可以通过 barWidth 设置。比如在下面的例子中，将 barWidth 设为 '20%'，表示每个柱条的宽度就是类目宽度的 20%。
由于这个例子中，每个系列有 5 个数据，20% 的类目宽度也就是整个 x 轴宽度的 4%。
option = { xAxis: { data: ["a", "b", "c", "d", "e"], }, yAxis: {}, series: [ { type: "bar", data: [1, 2, 3, 4, 5], stack: "y", barWidth: "20%", } ], };
另外，还可以设置 barMaxWidth 限制柱条的最大宽度。
对于一些特别小的数据，我们也可以为柱条指定最小高度 barMinHeight，当数据对应的柱条高度小于该值时，柱条高度将采用这个最小高度。
这里的数值参考对象均为整个图表的宽高
在同一坐标系上，此属性会被多个柱状图系列共享。
此属性应设置于此坐标系中最后一个柱状图系列上才会生效，并且是对此坐标系中所有柱状图系列生效。
柱条间距
柱条间距分为两种：
一种是不同系列在同一类目下的距离 barWidth
另一种是类目与类目的距离 barCategoryGap
option = { xAxis: { data: ["a", "b", "c", "d", "e"], }, yAxis: {}, series: [ { type: "bar", data: [1, 2, 3, 4, 5], barGap: '20%', barCategoryGap: '40%', }, { type: "bar", data: [1, 2, 3, 4, 5], } ], }
;
在这个例子中，barGap 被设为 '20%'，这意味着每个类目（比如 A）下的两个柱子之间的距离，相对于柱条宽度的百分比。而 barCategoryGap 是 '40%'，意味着柱条每侧空余的距离，相对于柱条宽度的百分比。
通常而言，设置 barGap 及 barCategoryGap 后，就不需要设置 barWidth 了，这时候的宽度会自动调整。如果有需要的话，可以设置 barMaxWidth 作为柱条宽度的上限，当图表宽度很大的时候，柱条宽度也不会太宽。
柱条背景色
有时，我们希望能够为柱条添加背景色。从 ECharts 4.7.0 版本开始，这一功能可以简单地用 showBackground 开启，并且可以通过 backgroundStyle 配置。
option = { xAxis: { data: ["a", "b", "c", "d", "e"], }, yAxis: {}, series: [ { type: "bar", data: [1, 2, 3, 4, 5], showBackground: true, backgroundColor: { color: "rgba(220,220,220,0.8)", }, }, ], };
