echarts学习笔记之图表自适应问题详解


Posted in Javascript onNovember 22, 2017

前言

为了直观查看公司服务器各个进程占用的内存动态情况,我使用echarts进行数据可视化,具体的实现过程按下不表。

最后实现的效果如图:

echarts学习笔记之图表自适应问题详解

然后问题就来了,因UI采用了Bootstrap响应式框架,所以除了图表之外其他都是响应式。当窗口缩小后,就会发生很尴尬的出界事件。

如图:

echarts学习笔记之图表自适应问题详解

针对这个问题,刚开始的解决思路及方法:把echart容器的宽度设置为100%;

<div class="col-sm-12 row" id="logic1_node" style="width:100%;height:700px"></div>

这样之后依然存在问题:页面初始的宽度是多少,canvas宽度就是多少,之后不会再变化。

便尝试通过jsDOM操作,强行令canvas的宽度为100%,however too young too simple!

调整浏览器宽度发现,canvas画布的宽度是随之变化的,然而画布里面的图表内容却像被挤压在一起的馅饼,模糊扭曲了。

echarts学习笔记之图表自适应问题详解

到这里细心的同学可以发现,echart图表一旦绘制成功,内容就不会再变化。所以对于echart图表,其"响应式"应该是可以随着窗口调整不断被重新绘制,不是简单的调整宽高。

到echart官网看了Example,发现官网的实例都具有响应式功能,确实不是单纯的宽度改变,是每次调整后图表是重新绘制。猜想echart源码里应该有resize这个API,打开调试器,打开echart源码,Ctrl+F,果然找到了。

echarts学习笔记之图表自适应问题详解

再仔细查看官方文档:

echarts学习笔记之图表自适应问题详解

echart图表本身是提供了一个resize的函数的。

于是当浏览器发生resize事件的时候,让其触发echart的resize事件,重绘canvas。(也可以通过其他事件触发)

echarts学习笔记之图表自适应问题详解

附:Echarts 页面多图自适应的解决办法

网上看到有不少人使用Echarts抽象出来的框架,实现自适应的效果代码:window.onresize  = option.chart.resize() ,  这个代码基本是官网上的window.onresize = myCharts.resize();的翻版。

但在实际的应用中一个页面可能会有好几个Echarts图表,而使用window.onresize = option.chart.resize() ,加载页面图表后,页面上只有一个图表会根据浏览器的变化而自适应。如果要是页面上的图表都要自适应。则需要将resize事件叠加在不同的图上面,使用一下代码可以实现。

window.addEventListener("resize", function () {

           option.chart.resize();

         });

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js判断屏幕分辨率的代码
Jul 16 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
Javascript之面向对象--接口
Dec 02 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
JS实现鼠标按下拖拽效果
Jul 23 Javascript
JS + HTML 罗盘式时钟的实现
May 21 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 #Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 #Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 #Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 #Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 #Javascript
浅谈Angular 中何时取消订阅
Nov 22 #Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 #Javascript
You might like
php实现多张图片上传加水印技巧
2013/04/18 PHP
PHP5.3新特性小结
2016/02/14 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
详解Vue.directive 自定义指令
2019/03/27 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
Python配置文件处理的方法教程
2019/08/29 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
如何教少儿学习Python编程
2020/07/10 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
开业庆典策划方案
2014/02/18 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL