随着科技的不断发展，前端页面也在不断的加入新的元素，不再是单一的文字和简单的表格展示，页面的展示也开始多样化丰富化了，出现了许多各式各样的图表，代替了以前枯燥的页面数据布局。其中，Echarts是当前市面上使用的比较多的图表框架。

Echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。它能够流畅的在PC端(电脑端)和移动端中运行，并且兼容当前绝大多数的浏览器，拥有折线图、柱状图、散点图、K线图、饼图、雷达图、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等交互组件。

Echarts可以在多个框架中使用，在这里我们介绍的是其在原生JS中的用法。

步骤一：首先在https://www.jsdelivr.com/package/npm/echarts选择 dist/echarts.js，点击并保存为 echarts.js 文件。通过静态引入的方式引入到html文件中。在引入时，有个特别需要注意的地方是，引入一定要在<heard>标签内部引用。引用在线资源可以在上述地址中复制需要的URL地址，比如：<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.js"></script>。

步骤二：创建一个容器，并且具有宽高，例如div标签。

步骤三：用echarts中init方法来实例化一个echarts对象并用一个变量承载。

步骤四：配置参数，echarts对象中有一个setOption属性，setOption属性里有多个参数。

1、xAxis为X轴配置项，在本例中是类目项。

2、yAxis为Y轴配置项，在本例中是数值项。

3、series为系列配置项，一个系列至少要包含：一组数值、图表类型(series.type)以及其他的配置参数。

4、多系列的柱状图，则只需要在series里面添加多一项。

5、柱状图样式配置可以通过series.itemStyle设置，包括柱条颜色(color)；柱条的描边颜色(borderColor)、宽度(borderWidth)、样式(borderType)；柱条圆角半径(barBorderRadius)；柱条透明度(opacity)；阴影(shadowBlur、shadowColor、shadowOffsetx、shadowOffsetY)。

6、柱条宽高设置barWidth、设置最大宽度barMaxWidth、最小高度barMinHeight

7、柱条间距分两种，一种是不同系列在同一类目下的距离barGap，另一种是类目与类目之间的距离barCategoryGap

8、柱条添加背景色，showBackground开启，并且可以通过backgroundStyle配置。

以上是创建普通柱状图的简单步骤。

代码 + 效果展示：