ECharts 常见的问题总结
以前也用过ECharts(不得不说,这真的是百度的良心产品),但是都是一些简单的示例。这次因为工作的需要,做了很多表格,对ECharts有了更加深刻的理解,现在来总结一下。
- 第一个肯定是新手经常遇到的问题,就是,我做的表格压根就没有显示。页面还是一片空白,这个时候,通常要检查元素。用来显示表格的div中,有没有canvas这个标签。如果没有的话,肯定是在初始化的时候,ECharts没有读取到要显示的位置。这个时候,可以做一个简单的检测,就是在渲染表格之前看看能不能活得要显示的区域的宽高。如果有这个canvas这个标签,但是没有显示的内容的话,肯定是option中就配置错误了,或者数据格式化错误了,需要自己另行检查了。
- 第二个,图表显示的时候,可能有的时候会超出显示的区域,这个时候,最简单的办法就是调整要显示表格的DIV的大小,如果这样还是不行的话,EChats中有一个属性是能改变。就是grid属性。下面附上链接。可以简单的设置一下grid中的left,right,top,bootom等等,让表格能正确的显示到DIV中,不至于超出。
- 第三个,就是我们想要格式化Y轴显示的数值,或者说,添加单位等一系列的操作。添加一个formatter操作。如果想格式化X轴的话,也是一样的。
- 还有就是,我们想实现区域的缩放功能,也是需要在option中添加一个属性,dataZoom。他是能自动适配移动端和PC端鼠标滚轮的。
- 最后一个其实就是网上提问很多的问题,就是,我们需要旋转屏幕。最常见的就是在移动端,当我们的数据比较多的时候,就需要横屏展示。网上很多答案因为是比较老的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 常见的问题总结的更多相关文章
- echarts常见配置项总结,legend、toolbox、tooltip等
1.饼状图指示线改变颜色:series.labelLine.lineStyle series : [ { name: '默认文字', type: 'pie',//类型饼状图 hoverAnimatio ...
- 前端数据可视化echarts.js使用指南
一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...
- 如何在vue中使用echart
1.安装echarts依赖 npm install echarts --save 2.在main.js中全局中引用 import echarts from 'echarts' Vue.protot ...
- Echarts 学习系列(2)-常见的静态ECharts图
目录 写在前面 折线(面积)图 1.折线图 2.堆叠折线图 3.堆积面积图 柱状(条形)图 1.柱状图 2.条形图 3.堆积条形图 饼(圆环)图 1.饼图 2.环形图 3.南丁格尔图 写在前面 上一小 ...
- echarts 使用时,常见配置
1.隐藏x轴,y轴,网格线 "yAxis": [ { //就是一月份这个显示为一个线段,而不是数轴那种一个点点 "show" : true, "bou ...
- 5 分钟上手 ECharts
获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整 ...
- 浅谈对ECharts的使用
上个月的项目,其中有一个模块用的是ECharts来实现的,分别用了折线图,环形图,还有漏斗图,这几个都算比较常见的了,尤其是折线图,环形图,用的最多的就是它们了.之前也没怎么接触过ECharts,实际 ...
- Jquery + echarts 使用
常规用法,就不细说了,按照官网一步步来. 本文主要解决问题(已参考网上其他文章): 1.把echarts给扩展到JQuery上,做到更方便调用. 2.多图共存 3.常见的X轴格式化,钻取时传业务实体I ...
- 封装Echarts
项目中需要对数据进行图形展示,例如展示柱状图.饼状图等.这类的前端展示脚本很多,常见的是HighCharts和Echarts.HighCharts是基于svg技术的,而echarts基于Echarts ...
随机推荐
- Security and Risk Management(5)
Ethics: ISC Code of Ethics You agree to this before the exam, and the code of ethics is very testabl ...
- Ethical Hacking - NETWORK PENETRATION TESTING(18)
Session Hijacking What if the user uses the "remember me" feature? If the user uses this f ...
- koa中是如何封装获取客户端IP的?
案例 var koa = require('koa') var app = new koa() app.use(function (ctx,next) { ctx.body = ctx.ip }) a ...
- ATX 学习 (二)-Atx Weditor
1.Atx的安装 安装adb使用以下命令安装atx最新版pip install --pre -U uiautomator2 手机接到电脑上之后,需要先运行一下命令:python -m uiautoma ...
- 我把JVM的类加载器整理了一下
前言 之前去面试的时候面试官问了我关于关于JVM性能调优的问题,由于自己之前公司的项目里自己没有接触到JVM性能调优的相关问题(感觉这些都是公司架构师考虑的问题),所有面试官问的时候自己一脸懵逼, ...
- Presto 函数开发
0. 写在前面 Presto Functions 并不能像 Hive UDF 一样动态加载,需要根据 Function 的类型,实现 Presto 内部定义的不同接口,在 Presto 服务启动时进行 ...
- DJANGO-天天生鲜项目从0到1-009-购物车-Ajax实现添加至购物车功能
本项目基于B站UP主‘神奇的老黄’的教学视频‘天天生鲜Django项目’,视频讲的非常好,推荐新手观看学习 https://www.bilibili.com/video/BV1vt41147K8?p= ...
- 【Unity3D】简单常用的功能实现2——视角的跟随、旋转、缩放
[视角的跟随.旋转.缩放实现] 首先,在实现这些功能之前,我们给Hierarchy面板中的主摄像机额外包装几层Empty Object,形成一个新的摄像机结构,如下图(当然这些空物体的命名大家按自己方 ...
- Redis网络模型的源码分析
Redis的网络模型是基于I/O多路复用程序来实现的.源码中包含四种多路复用函数库epoll.select.evport.kqueue.在程序编译时会根据系统自动选择这四种库其中之一.下面以epoll ...
- Java开发环境配置之安装JDK
一:序言摘要 学习过Java的人都知道,如果想要开发一套java程序,首先需要做的准备工作就是配置JDK.JDK是 Java 语言的软件开发工具包,它主要用于移动设备.嵌入式设备上的java应用程序. ...