ECharts 常见的问题总结

　　以前也用过ECharts(不得不说，这真的是百度的良心产品)，但是都是一些简单的示例。这次因为工作的需要，做了很多表格，对ECharts有了更加深刻的理解，现在来总结一下。

1. 第一个肯定是新手经常遇到的问题，就是，我做的表格压根就没有显示。页面还是一片空白，这个时候，通常要检查元素。用来显示表格的div中，有没有canvas这个标签。如果没有的话，肯定是在初始化的时候，ECharts没有读取到要显示的位置。这个时候，可以做一个简单的检测，就是在渲染表格之前看看能不能活得要显示的区域的宽高。如果有这个canvas这个标签，但是没有显示的内容的话，肯定是option中就配置错误了，或者数据格式化错误了，需要自己另行检查了。
2. 第二个，图表显示的时候，可能有的时候会超出显示的区域，这个时候，最简单的办法就是调整要显示表格的DIV的大小，如果这样还是不行的话，EChats中有一个属性是能改变。就是grid属性。下面附上链接。可以简单的设置一下grid中的left，right，top，bootom等等，让表格能正确的显示到DIV中，不至于超出。
3. 第三个，就是我们想要格式化Y轴显示的数值，或者说，添加单位等一系列的操作。添加一个formatter操作。如果想格式化X轴的话，也是一样的。
4. 还有就是，我们想实现区域的缩放功能，也是需要在option中添加一个属性，dataZoom。他是能自动适配移动端和PC端鼠标滚轮的。
5. 最后一个其实就是网上提问很多的问题，就是，我们需要旋转屏幕。最常见的就是在移动端，当我们的数据比较多的时候，就需要横屏展示。网上很多答案因为是比较老的ECharts版本，导致了很多以外的问题，但是我自己用的是官网上的最新版本（4.8.0），是没有问题的。所以现在就比较简单了。大家直接引入最新的版本，然后旋转最外层的DIV，然后直接铺数据就可以了。不会有toolTip问题了。我放上一个我旋转的css代码。仅供参考

 1 #horizontalScreen{  2     transform: rotate(90deg);  3     transform-origin: bottom left;  4     position: absolute;  5     top: -100vw;  6     height: 100vw;  7     width: 100vh;  8     background-color:#FFF;  9     z-index: 100; 10 }

下面是截图：