在Vue中实现Echarts随窗体变化
补充知识:echarts 图表大小随窗口变动而自适应变动(无需刷新浏览器调整)
成都创新互联公司长期为超过千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为襄州企业提供专业的网站建设、做网站,襄州网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。问题提出:
使用echars做完图表之后,需要根据浏览器窗口的缩放做自适应效果。
原因分析及解决方案:
echars的图标实例事实上并没有主动的去绑定resize()事件,就是说显示区域的大小改变内部并不知道,当你需要去做一些自适应的效果的时候,需要主动绑定这个时间才能达到自使用的效果,常见的如window.onresize = myChart.resize()
示例:
var map5 = echarts.init(document.getElementById('map5')); var option5 = { backgroundColor: '#def1f9', color: ['#c23531', '#1875ff'], title: { left: 10, top: 10, text: 'Bill charts for the past year' }, // color: ['#1875ff', '#1fe6ab', '#eee119', '#ff3074', '#6f99d9'], legend: { top: 30, right: 30 }, tooltip: {}, xAxis: {type: 'category'}, yAxis: {}, series: [ {type: 'bar'}, {type: 'bar'} ] } map5.setOption(option5); window.onresize = function () { setTimeout(function () { map1.resize() map2.resize() map3.resize() map4.resize() map5.resize() },10) }
重点:
window.onresize = function () { map1.resize() ; // 如果有多个图标变动,可写多个 }
推荐教程:《JS教程》
文章题目:在Vue中实现Echarts随窗体变化
本文URL:http://pwwzsj.com/article/cghihs.html