ECharts从零开始（三）—— Bar

本篇博文主要介绍bar中的一些参数以及如何绘制叠式柱形图。

首先legend、datazoom、toolbox等配置上篇博文已经介绍，本篇就不再继续描述。
bar的seires中有以下参数：

• barWidth&barMaxWidth
  barWidth：柱条的宽度，不设时是自适应的，值不仅仅可以是数字，还可以为百分比。
  barMaxWidth：柱条的最大宽度，同样是自适应且支持百分比的。barMaxWidth在有缩放功能时会表现出其作用——在放大时可以控制柱条的宽度，提高用户体验。

• barMinHeight
  barMinHeight是柱条的最小高度，用于防止某数据项的值过小而影响交互。但使用时一定要慎重，
  设置了barMinHeight后，若两个bar的值均小于这个设定的值，表现出的高度是一样的，会造成误判。

• barGab
  barGab是不同系列的柱间距离，默认为30%。可以用于两个系列的柱条部分重叠或者完全重叠，设置妥当会有奇效。后续会有一个专门的示例。

• barCategoryGab
  barCategoryGab是同一系列的柱间距离，默认为20%。

接下来绘制几个勉勉强强可以算是博人眼球的柱形图：

一、

这个柱形图原型采用的是官网中的实例。可能会觉得这种不同柱条设置为不同颜色很简单，只要在color里面设置不同颜色就行了。但是在进行了想象中的操作之后，效果并不是理想中的那样。

就算我设置了两个颜色，还是只有一个颜色。

那要怎么实现这种“彩虹”效果呢？
我们通常设置color是直接通过颜色代码或者颜色名，其实我们还可以通过函数来设置颜色。

在这个函数中，color的值是根据其索引来改变，这样就可以实现每个柱条一种颜色的效果，相比原来的单色调，还是要好看很多的。

二、

这个也是官网中的实例，当时看到这个图觉得很厉害，但是看代码又不知道这种是怎么实现的，在研究了一会后发现了其中的奥秘。

series中有这样一个辅助数据集，这种梯形的体现就依赖于此。如果把辅助数据集中color的最后一个参数改为1


就发现其中的奥秘了。这个辅助集其实就是总费用减去每个类目的数值后组成的数据集，通过在color
中设置为无色。就有了上述的效果。

三、

这个对原来的实例进行了些许修改。

首先把条形图改成了柱形图，其实这一步操作非常简单，只用把xAxis、yAxis分别改成yAxis、xAxis就行。

同时为了使重叠后效果更明显，将总人口一列全部去掉。

可能已经有人发现xAxis中有两项。
把show改成true：

再把barCategoryGap改回默认的，把xAxisIndex取消掉：


从上述操作基本就可以看出是怎么实现重叠的：
设置两个xAxis，并将第二个show改为false，通过xAxisIndex将第二个数据集赋给第二个xAxis，这样两个柱形图就重叠了，然后将color设置为不同的透明色，再把barCategoryGap设置为不同的数值增强重叠效果，就实现了最终的重叠。

除了这些操作，还可以在itemStyle中修改柱形边缘的平滑度，给柱条的边框换色等等等等。。。这些都可以根据每个人的审美慢慢的摸索修改。