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 相关文章推荐
JQuery toggle使用分析
Nov 16 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 Javascript
Jquery api 速查表分享
Jan 12 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
javascript事件模型介绍
May 31 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
JavaScript从原型到原型链深入理解
Jun 03 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文件
2007/01/04 PHP
smarty内置函数section的用法
2015/01/22 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
使用JQuery进行跨域请求
2010/01/25 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
对Python 数组的切片操作详解
2018/07/02 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
一道Delphi面试题
2016/10/28 面试题
实习生个人找工作的自我评价
2013/10/30 职场文书
煤矿班组长岗位职责
2013/12/29 职场文书
工作自我评价怎么写
2014/01/29 职场文书
《老王》教学反思
2014/02/23 职场文书
电子专业求职信
2014/06/19 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
师德师风事迹材料
2014/12/20 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
2016元旦主持人开场白
2015/12/03 职场文书