以前也用过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代码。仅供参考
 #horizontalScreen{
transform: rotate(90deg);
transform-origin: bottom left;
position: absolute;
top: -100vw;
height: 100vw;
width: 100vh;
background-color:#FFF;
z-index:;
}

下面是截图:

ECharts 常见的问题总结的更多相关文章

  1. echarts常见配置项总结,legend、toolbox、tooltip等

    1.饼状图指示线改变颜色:series.labelLine.lineStyle series : [ { name: '默认文字', type: 'pie',//类型饼状图 hoverAnimatio ...

  2. 前端数据可视化echarts.js使用指南

    一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...

  3. 如何在vue中使用echart

    1.安装echarts依赖   npm install echarts --save 2.在main.js中全局中引用 import echarts from 'echarts' Vue.protot ...

  4. Echarts 学习系列(2)-常见的静态ECharts图

    目录 写在前面 折线(面积)图 1.折线图 2.堆叠折线图 3.堆积面积图 柱状(条形)图 1.柱状图 2.条形图 3.堆积条形图 饼(圆环)图 1.饼图 2.环形图 3.南丁格尔图 写在前面 上一小 ...

  5. echarts 使用时,常见配置

    1.隐藏x轴,y轴,网格线 "yAxis": [ { //就是一月份这个显示为一个线段,而不是数轴那种一个点点 "show" : true, "bou ...

  6. 5 分钟上手 ECharts

    获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整 ...

  7. 浅谈对ECharts的使用

    上个月的项目,其中有一个模块用的是ECharts来实现的,分别用了折线图,环形图,还有漏斗图,这几个都算比较常见的了,尤其是折线图,环形图,用的最多的就是它们了.之前也没怎么接触过ECharts,实际 ...

  8. Jquery + echarts 使用

    常规用法,就不细说了,按照官网一步步来. 本文主要解决问题(已参考网上其他文章): 1.把echarts给扩展到JQuery上,做到更方便调用. 2.多图共存 3.常见的X轴格式化,钻取时传业务实体I ...

  9. 封装Echarts

    项目中需要对数据进行图形展示,例如展示柱状图.饼状图等.这类的前端展示脚本很多,常见的是HighCharts和Echarts.HighCharts是基于svg技术的,而echarts基于Echarts ...

随机推荐

  1. ClickHouse源码笔记2:聚合流程的实现

    上篇笔记讲到了聚合函数的实现并且带大家看了聚合函数是如何注册到ClickHouse之中的并被调用使用的.这篇笔记,笔者会续上上篇的内容,将剖析一把ClickHouse聚合流程的整体实现. 第二篇文章, ...

  2. SmartMS如何使用二次验证码/虚拟MFA/两步验证/谷歌身份验证器?

    一般点账户名——设置——安全设置中开通虚拟MFA两步验证 具体步骤见链接 SmartMS如何使用二次验证码/虚拟MFA/两步验证/谷歌身份验证器? 二次验证码小程序于谷歌身份验证器APP的优势 1.无 ...

  3. centos7+jexus5.8.3部署ASP.NET的MVC项目

    1.在centos7终端以root权限安装jexus5.8.3的独立版 命令:curl https://jexus.org/release/x64/install.sh|sh 2.跳转到目录/usr/ ...

  4. git问题解决

    1.如果系统中有一些配置文件在服务器上做了配置修改,然后后续开发又新添加一些配置项的时候, 在发布这个配置文件的时候,会发生代码冲突: error: Your local changes to the ...

  5. SAS X option

    1. SAS X选项就是调用DOS命令. 例子: option noxwait;/*黑窗口执行完命令后自动关闭*/ %let path =.; %let filter=*.lst; X “ dir & ...

  6. 【Nginx】如何实现Nginx的高可用负载均衡?看完我也会了!!

    写在前面 不得不说,最近小伙伴们的学习热情是越来越高,不断向冰河提出新的想学习的技术.这不,又有小伙伴问我:冰河,你在[Nginx专题]写的文章基本上都是Nginx单机版的,能不能写一篇关于Nginx ...

  7. C++的vector的使用方法

    vector c++的vector的使用方法,创建,初始化,插入,删除等. #include "ex_vector.h" #include <iostream> #in ...

  8. VMware虚拟机黑屏解决

    1.管理员身份运行cmd(右键->以管理员身份运行) 2.修复LSP,输入以下命令然后回车 netsh winsock reset 3.重启电脑即可

  9. seaborn分类数据可视化:散点图|箱型图|小提琴图|lv图|柱状图|折线图

    一.散点图stripplot( ) 与swarmplot() 1.分类散点图stripplot( ) 用法stripplot(x=None, y=None, hue=None, data=None, ...

  10. Nginx与Apache简单对比

    Nginx 1.轻量级,采用C进行编写,同样的 web 服务,会占用更少的内存及资源 2.抗并发,处理请求是异步非阻塞的,负载能力比apache高很多,而 apache 则是阻塞型的.在高并发下 ng ...