echarts 图表大小随窗口变动而自适应变动（无需刷新浏览器调整）

问题提出：

使用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() ; // 如果有多个图标变动，可写多个

}

参考博客：

https://blog.csdn.net/TionSu/article/details/78039045

https://blog.csdn.net/qq_38382380/article/details/80460729

详细参数请参考echarts官方文档对resize事件的说明：

http://echarts.baidu.com/echarts2/doc/doc.html#实例方法

echarts 图表大小随窗口变动而自适应变动（无需刷新浏览器调整）相关推荐

Echarts图表大小自适应浏览器窗口大小
1.mixins文件:resize.js // 当调整浏览器窗口大小时,发生 resize 事件:监听resize,实现Echarts图表大小自适应浏览器窗口大小 export default {da ...
echart vue 图表大小_vue中echarts图表大小适应窗口大小且不需要刷新案例
我就废话不多说了,大家还是直接看代码吧~ 内容如下: // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getEl ...
echarts图表大小随着外部div大小变化
首先在外部新建一个chart数组. var chartsArr=[]; 把需要进行大小响应的 chart图放进去. myChart1.setOption(option1); chartsArr.pus ...
echarts图表大小根据div大小的改变而改变的问题
var mycharts = echarts.init(document.getElementById(id));window.onresize = function() {myEcharts.res ...
动态调整echarts图表大小
确保echarts的容器是动态尺寸,然后添加一个监听,根据容器尺寸就可以自动调整大小了,以react为例 const myChart = echarts.init(document.getElemen ...
echart vue 图表大小_vue里echarts自适应窗口大小改变
echarts的图表提供了一个resize方法可以自适应屏幕窗口改变,而重新渲染图表大小的功能. 因此我们只要监听浏览器的窗口改变的resize事件,再结合echarts的图表,就可以实现我们想要的功 ...
Echarts图表自适应？你可以这样做
一.图表变形使用 Echarts 绘制图表时,可能会遇到变形的问题.如下图: 其原因是 Echarts 在初始化实例的时候,对应 dom 元素的宽高还没有确定. 解决方案也很简单: 监听对应 dom ...
HTML设置字体大小自适应屏幕与echarts图表颜色根据数据大小实时刷新图表颜色
设置html文字大小根据页面大小自适应,在使用rem之前是使用的px和百分比,后来发现页面缩放或在小屏幕的电脑显示不尽人意,后改用rem,写法如:font-size: .21rem;或font-siz ...
[echarts] 图表自适应宽高大小
<div class="echart-wrap" :ref="wrapId" :id="wrapId" ><div :re ...

echarts 图表大小随窗口变动而自适应变动（无需刷新浏览器调整）

echarts 图表大小随窗口变动而自适应变动（无需刷新浏览器调整）相关推荐

最新文章

热门文章