最简单的柱状图

柱状图的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)",
      },
    },
  ],
};