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 ...
随机推荐
- 【Nginx】如何格式化日志并推送到远程服务器?看完原来很简单!!
写在前面 Nginx作为最常用的反向代理和负载均衡服务器,被广泛的应用在众多互联网项目的前置服务中,很多互联网项目直接将Nginx服务器作为整个项目的流量入口.这就使得我们可以通过对Nginx服务器日 ...
- Burp Suite Target Module - 目标模块
模块目的之一:获取网站分析 1.从Proxy - HTTP history界面选中需要加入Target Scope的Host 地址,右击,选中Add to Scope. 2.打开Target - Sc ...
- web自动化 -- ActionChains()的鼠标操作
webdriver模块下的ActionChains类 一.两个主要组件 1.实例化 ActionChains() 2.ActionChains(driver).perform() perform() ...
- 利用updatexml()报错注入mysql
基本介绍一下updatexml() updatexml(XML_document, XPath_string, new_value) XML_document是文档对象的名称 XPath_string ...
- java基础(11)--封装
一.java面向对象三大特别: 1.封装 2.继承 3.多态 二.封装的作用 1.属性私有化(private) 2.对外提供简单的入口 如公开的set()与get()方法,并且都不带static ...
- PHPSTORM Live-Templates变量速查表
camelCase(String) 返回字符串作为参数传递,转换为驼峰式大小写.例如, my-text-file/my text file/my_text_file将转化为 myTextFile. c ...
- LVS+Keepalived 实现高可用负载均衡
前言 在业务量达到一定量的时候,往往单机的服务是会出现瓶颈的.此时最常见的方式就是通过负载均衡来进行横向扩展.其中我们最常用的软件就是 Nginx.通过其反向代理的能力能够轻松实现负载均衡,当有服务出 ...
- html中input提示文字样式修改
在很多网站上我们都看到input输入框显示提示文字,让我们一起来看看如果在input输入框中显示提示文字.我们只需要在<input>标签里添加:placeholder="提示文字 ...
- Python pass语句
Python pass语句:空语句,主要用于保持程序结构的完整性 或者 函数想要添加某种功能,但是还没有想好具体应该怎么写. 在 for 循环中使用 pass: lst = [7,8,9,4] for ...
- PHP 超级全局变量讲解
PHP 超级全局变量 超级全局变量在PHP 4.1.0之后被启用, 是PHP系统中自带的变量,在一个脚本的全部作用域中都可用. PHP 超级全局变量 PHP中预定义了几个超级全局变量(superglo ...