飞龙博客

feilong.org 前端开发教程

echarts自适应宽度高度尺寸,eharts怎样销毁与重建

飞龙更新于 2021-01-22 04:46 加入书签 CTRL+D 有 1,037 个朋友来过

echarts怎样自适应尺寸,包括怎样自适应宽度或怎样自适应高度。这个问题飞龙在echarts的官方演示文档里没找到。

本想采取当窗口发生尺寸resize改变时,采用eharts销毁与重建的方法,去实现重新渲染图表,但飞龙尝试了一下没成功。

飞龙查了下网上的资料,发现echarts有自带的resize方法。

每次窗口大小发生改变,也就是window对象触发了onresize事件,这时我们将echarts对象触发resize方法就可以了。

一、原生js的写法是:

1
2
3
//ecEg是echarts实例//ecOpts是实例的配置项
ecEg.setOption(ecOpts);window.onresize = echart.resize;

但是原生js的onresize在一个页面内只能设置一次。
有时候echarts对象在不同的封装函数内,这时应该怎么办呢?

二、可以改为 jQuery的写法,试试。
飞龙提示,运用echarts的resize方法时注意有个小括号。

1
2
ecEg.setOption(ecOpts);$(window).resize(function(){ecEg.resize();});

飞龙初发:
2018-11-23 10:15
本文更新网址:
https://feilong.org/echarts-resize-window-size-width-height

所在目录: echarts 教程 网站开发

旧文:

  • html css js
  • angular react vue
  • flutter python