以前也用过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. Ethical Hacking - GAINING ACCESS(13)

    CLIENT SIDE ATTACKS Backdoor delivery method2 - backdooring exe downloads Backdoor any exe the targe ...

  2. OSCP Learning Notes - Post Exploitation(2)

    Windows Post Exploitation Target Server: IE8-Win 7 VM 1. Download and upload the fgdump, PwDump7, wc ...

  3. 郭的手机出现提示:条码扫描器,抱歉,Android相机出现问题。您可能需要重启设备

    郭的手机出现提示:条码扫描器,抱歉,Android相机出现问题.您可能需要重启设备 ++++++++++++++++++ 原因是系统没有给应用使用摄像头的权限,我到楼下设置对方手机,选择“设置”-&g ...

  4. 风速风向 UV 相互转换

    这里以c#为例将风的uv分量转成风向风速(别的语言类似) 风向是以y轴正方向为零度顺时针转 UV转风速风向 1 double v ;//v分量 2 double u;//u分量 3 double fx ...

  5. 【Go语言学习】匿名函数与闭包

    前言 入坑 Go 语言已经大半年了,却没有写过一篇像样的技术文章,每次写一半就搁笔,然后就烂尾了. 几经思考,痛定思痛,决定金盆洗手,重新做人,哦不,重新开始写技术博文. 这段时间在研究Go语言闭包的 ...

  6. php实现导出数据分类合并单元格功能

    <?php $conn = mysql_connect("localhost","root","root"); $db = mysql ...

  7. Mac Sourcetree克隆项目提示无效的url

    之前用SoucreTree拉去过另一个账号的git项目,今天创建了一个新的码云账号,克隆里面的项目是一直报错误 > 错误如下: > 原因以及解决方案:

  8. MacOS下JDK8的安装与配置

    微信搜索"艺术行者",关注并回复关键词"jdk8"获取安装包和API文档资料! 一.安装环节 1.打开网页 https://www.oracle.com/jav ...

  9. excel文件双击打开空白

    excel文件双击打开之后进入软件,没有去读文件 一.现象描述 打开现象如下所示,只有excel模板,看不到excel中的表格模板. 二.想要打开文件 (1)在软件的文件--->打开--> ...

  10. Python异常及异常处理

    Python异常及异常处理: 当程序运行时,发生的错误称为异常 例: 0 不能作为除数:ZeroDivisionError 变量未定义:NameError 不同类型进行相加:TypeError 异常处 ...