需求

通过Echarts画一个自定义的图，类似于Echarts官方示例中的机场航班甘特图，不同的是，我画的每个矩形中不同颜色的子矩形数量是不一定的，要根据后台推送的数据来定。

问题

有的时候会出现第一个子矩形绘制出来，但是后面的矩形都绘制不出来的情况，通过查看api.value()输出的值，发现后面子矩形对应的值是空的，但是data中对应的位置是有值的。

原因

因为没有指定dimension，所以Echarts会按照data中第一项的情况推断后面的数据维度，如果你的第一项中x轴对应的值位于第2，3维度，那么Echarts在绘制data中后面的数据项的时候，也会去找第2，3维度数据作为x值，就算你有后面更多维度的值，Echarts的api.value()函数依然会认为是个空值。反过来说，如果你的第一项中x轴对应的值位于的维度比较多，也就是说第一项矩形包含的子矩形就比较多，那么你后面的矩形大概率是不会出错的，除非后面出现一个子矩形数量大于第一个的子矩形数量，这个时候这个矩形的绘图就会获得空值，就会出错。这就是为什么自己试验的时候，有的时候没问题，有的时候有问题的原因。

思考

其实记录这个并不是为了写这个问题本身，而是要记录下问题怎么解决的一个思路。

首先，我把问题理解为后台推送的数据有问题而导致的前端显示不正常，这个思路就局限住了，并且当后来打印出data数据时发现其实是有值，并且就算是字符串依然可以绘图，这个时候就应该好好观察问题出现的规律，而不是还在纠结后端数据。

第二，在观察问题的时候，如果找不到问题出现的规律，不如可以找找问题不出现的规律，比如我偶然间想到，有问题的矩形从来不会出现在前三行，然后就以为是增加y轴导致的问题，但通过试验发现问题可以复现，并且就算是第二行和第三行也可能出问题，就是第一行不会出问题，这样也是一种规律。还有一小点就是：注意第一项，没准你在第一项上的某些设置或者数据引起的设置会影响到后面。

第三，学会去查github和好好阅读官方文档。如果你觉得你做的事情并非前无古人后无来者，你遇到的问题说不定别人早就遇到过，在github的issue里可能早就有人提过了，果然被我找到类似的问题，而回答者已经把解决思路开始往dimension上引。在官方文档中，有这么一段： api.value()传入的参数也说了，dimension指定的维度，这个dimension可不是乱写的，当初根本没在意，所以也没把问题往这方面想，反而在纠结encode。

综上，出现问题的时候还是应该好好观察现象，总结规律，要么就是出现的规律，要么就是不出现的规律。