ECharts 常见的问题总结

　　以前也用过ECharts(不得不说，这真的是百度的良心产品)，但是都是一些简单的示例。这次因为工作的需要，做了很多图表，对ECharts有了更加深刻的理解，现在来总结一下。首先是ECharts的基础知识（本次是基于Echats的4.8.0版本）

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. 当图例超出内容区域宽度的时候，默认的情况下，图例会自动折行。但是折行的话，可能会出现内容重叠，超出显示内容区域的问题。这时候最简单的办法是设置图例的滚动。请看下面的代码

   1 legend: {2     type:"scroll"3 },

   效果如图：（不过有一个问题，就是在移动端的时候，确实这个不是很容易点到）

    

    

6. 最后一个其实就是网上提问很多的问题，就是，我们需要旋转屏幕。最常见的就是在移动端，当我们的数据比较多的时候，就需要横屏展示。网上很多答案因为是比较老的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永远在图表内显示了，也就不会超出可视区域了