ECharts 常见的问题总结
以前也用过ECharts(不得不说，这真的是百度的良心产品)，但是都是一些简单的示例。这次因为工作的需要，做了很多图表，对ECharts有了更加深刻的理解，现在来总结一下。首先是ECharts的基础知识（本次是基于Echats的4.8.0版本）
- 第一个肯定是新手经常遇到的问题，就是，我做的图表压根就没有显示。页面还是一片空白，这个时候，通常要检查元素。用来显示表格的div中，有没有canvas这个标签。如果没有的话，肯定是在初始化的时候，ECharts没有读取到要显示的位置。这个时候，可以做一个简单的检测，就是在渲染表格之前看看能不能活得要显示的区域的宽高。如果有这个canvas这个标签，但是没有显示的内容的话，肯定是option中就配置错误了，或者数据格式化错误了，需要自己另行检查了。
- 第二个，图表显示的时候，可能有的时候会超出显示的区域，这个时候，最简单的办法就是调整要显示表格的DIV的大小，如果这样还是不行的话，EChats中有一个属性是能改变。就是grid属性。下面附上链接。可以简单的设置一下grid中的left，right，top，bootom等等，让表格能正确的显示到DIV中，不至于超出可视区域。
- 第三个，就是我们想要格式化Y轴显示的数值，或者说，添加单位等一系列的操作。添加一个formatter操作。如果想格式化X轴的话，也是一样的。
- 还有就是，我们想实现区域的缩放功能，也是需要在option中添加一个属性，dataZoom。他是能自动适配移动端和PC端鼠标滚轮的。
- 当图例超出内容区域宽度的时候，默认的情况下，图例会自动折行。但是折行的话，可能会出现内容重叠，超出显示内容区域的问题。这时候最简单的办法是设置图例的滚动。请看下面的代码
1 legend: { 2 type:"scroll" 3 },
效果如图：
（不过有一个问题，就是在移动端的时候，确实这个不是很容易点到） - 最后一个其实就是网上提问很多的问题，就是，我们需要旋转屏幕。最常见的就是在移动端，当我们的数据比较多的时候，就需要横屏展示。网上很多答案因为是比较老的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 }
下面是截图：
7.添加一个新的功能，就是，当我们的数据整体偏大的时候，如果显示折线图的话，会发现，整体的数据都在图表的上方，折线图显示不明显。这个时候需要设置，Y轴不是从0显示，而是按照比例显示。只需要添加以下代码就行了：
1 yAxis: { 2 type: 'value', 3 scale:true,/*按比例显示*/ 4 },
8.还遇到了一个问题，就是tooltip在移动端显示的时候，会有显示不全，超出屏幕宽度，造成了显示不完全，这个时候需要添加另一个属性，confine。请看下面的代码
1 tooltip: { 2 confine:true, // 是否将 tooltip 框限制在图表的区域内 3 }
这样的话，就能控制，tooltip永远在图表内显示了，也就不会超出可视区域了
