echarts bar图那点事

charts 柱状图

上面的那个柱状图，它的数据结构如下：

解释一下：数据结构：data.chartData.data 中的数据：xAxis 是x轴，是个时间戳，绘图数据，是series中的数据，这个数组里面一共有4个对象，每个对象里面有两个属性，name 是级别，data 是对应的数据。从数据中，可以看出来，这是堆积图的数据结构。一个点上最多画一个柱子，一个柱子最多有4节。
柱子的颜色根据name 返回的值定。
基础知识：

1.chartOption里面，color的返回值是个数组，给上色值，线条就会按照上面的数组里面一次取值。没有给色值的话，就会按照echarts官网文档里面，渲染默认值。当然喽，series里面的itemstyle 的color属性也可以定义色值。
2.调整series里面的 barCategoryGap:属性，可以调整柱子之间的间距，
3.series里面的stack 属性，设置一个值，柱子会堆积，要是给他置空，就会变成一个平铺图。
4.chartoption里面，很多对象可以支持自定义，看官方文档吧，找到它的某个属性，文档上显示类型是“自适应”的，基本上就可以定义一个方法，去动态修改里面的值。
5.举个例子，下面的toolTip里面的formatter这个属性，它是一个function ,有两个参数，第一个常用。打印一下params，它其实是坐标轴上的某一个点，里面定义了很多相关的属性，需要的时候，可以进行修改。

还是这套数据，需求改为一个柱子上，只有一个色值，数量显示总数。色值根据最高级别来判断（series数组中4个对象，对应的数据一次是：紧急、重要、次要、一般），之前是可以画4个颜色的，现在合成一种了。那么，此时已经不是一个堆积图了，而是一个普通的柱状图，返回数据series只有1个。后台不改数据结构，那么前端就得重新组装理想的数据结构。
第一步：series里面的data的拼接，4合1，纵轴要显示总数，就得series当成一个二维数组，把data里面的数据按列求和。
第二步：显示最高级别，就得做一些判断，横轴上的每一个点，对应柱状图的每一个柱子，新建一个数组，数组的长度，为横轴坐标点的个数，把series里面name的值，进行比较，取出级别最高的那个，塞到那个数组里。
第三步：第一步和第二部改变了柱状图需要的数据结构，那么基于这些，可以进行样式的修改。

图一：数据封装

图二：样式修改

大功告成：