echarts跟随父元素大小动态变化_给 dom 元素添加 onresize 功能

html 元素自适应

对于我们做前端可视化的人来说，最苦恼的一个地方莫过于，客户需要我们对产品做自适应，特别是还需要做 pc 端的自适应。

一般，面对这个需求的时候，由普通的 html 元素（不包含 canvas）构成的页面，你可以通过对元素的尺寸进行特殊的设置，不采用常用的 px 方案，而是通过设置百分比、vw、em 等方式，或者通过媒体查询，或者通过近些年比较流行的 flex 弹性布局 等等方案来解决这个问题。

这么多方案，从中选一种，肯定会适合你的一款。

canvas 自适应的问题

但是对于 canvas 来说，以上方案就捉襟见肘了。

canvas 相当于一个画布，我们朝 canvas 上面添加内容相当于是在画布上绘图。

因此，当 canvas 元素物理尺寸改变的时候，我们画布上的内容，必须要清空了重画。不然，我们绘制到其中的内容，就会被放缩，看起来就会失真了。

而且对于 canvas 来说，它本身有个 width 和 height 来控制绘图区域的尺寸的，一般我们称之为 canvas 画布尺寸。

参考页面：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement

<