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 相关文章推荐
Javascript实现的分页函数
Dec 22 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
简单易用的倒计时js代码
Aug 04 Javascript
js实现汉字排序的方法
Jul 23 Javascript
开启BootStrap学习之旅
May 04 Javascript
jquery radio的取值_radio的选中_radio的重置方法
Sep 20 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 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中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
万能的php分页类
2017/07/06 PHP
取得传值的函数
2006/10/27 Javascript
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
javascript定义函数的方法
2010/12/06 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
Django实现表单验证
2018/09/08 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
优秀大学生的自我评价
2014/01/16 职场文书
年度考核自我鉴定
2014/02/02 职场文书
文明餐桌活动方案
2014/02/11 职场文书
爱护环境建议书
2015/09/14 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
Mysql排序的特性详情
2021/11/01 MySQL