echarts柱状图

图表实例

option = {xAxis: {name: '横坐标',type: 'category',  // 设置为类目轴data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']  // 横坐标的刻度标签},yAxis: {name: '纵坐标',type: 'value'  // 设置为数值轴，该值有series的data传入},series: [{data: [120, 200, 150, 80, 70, 110, 130],  // 设置y轴的数值type: 'bar'  // 指定图表的类型}]};

图表主要属性

echarts直角坐标系下的柱状图最主要的属性是xAxis、 yAxis、 series，分别代表x轴、y轴、系列。

柱状图的基本框架：

option = {xAxis: {},yAxis: {},series: [{type:'bar',}]};

只要设置好这三个属性，并且将系列中的type设值为**‘bar’**，一个最简单的柱状图就可以完成。

其他需要对图表细节方面进行设置的，可以查看《echarts常用图表属性》

柱状图series属性

type：

根据图表类型设值，柱状图的type则设置为bar

data：

接收一个数组数据，用于填充图表数值轴上的数据，也就是前面Axis的type属性设置为value或者log和time的坐标轴

stack：

接收一个给定的值，如果图表中有多个系列，且有多个系列的stack的值相同，则会形成堆叠柱状图。如：

series: [{type: 'bar',stack: 'stack1',data: data,},{type: 'bar',stack: 'stack1',data: data}]

barWidth:

用于设置柱条的宽度。不设时自适应。支持设置成百分比和数值。

barMaxWidth：

用于设置柱条的最大宽度，不设时自适应。支持设置成相对于类目宽度的百分比。

这个属性一般用于一些柱条宽度随数值变化的图表，防止过宽。

barMinHeight：

用于设置柱条最小高度，可用于防止某数据项的值过小而影响交互。

barGap：

设置柱间的距离。

实例练习

下面通过实际案例来看一下echarts柱状图的基本应用

现在我们几个搜索引擎一周中每天的使用量：

var all = [862, 1018, 964, 1026, 1679, 1600, 1570];
var baidu = [620, 732, 701, 734, 1090, 1130, 1120];
var Google = [120, 132, 101, 134, 290, 230, 220];
var biying = [60, 72, 71, 74, 190, 130, 110];
var other = [62, 82, 91, 84, 109, 110, 120]

根据这些数据我们绘制一个堆叠柱状图

option = {tooltip: {},legend: {},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']}],yAxis: [{type: 'value'}],series: [{name: '搜索引擎',type: 'bar',data: all,},{name: '百度',type: 'bar',barWidth: 12,stack: '搜索引擎',data: baidu},{name: '谷歌',type: 'bar',stack: '搜索引擎',data: Google},{name: '必应',type: 'bar',stack: '搜索引擎',data: biying},{name: '其他',type: 'bar',stack: '搜索引擎',data: other}]
};

运行结果：