欢迎光临
我的个人博客网站

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 }

下面是截图:

ECharts 常见的问题总结ECharts 常见的问题总结

赞(0) 打赏
未经允许不得转载:张拓的天空 » ECharts 常见的问题总结
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏