Bootstrap

Echarts图形根据容器宽高自适应大小

1.窗口大小变化,Echarts图自适应

window.onresize = function () {
	myChart.resize();
}
2.Echarts图父容器大小变化,Echarts图自适应

npm i element-resize-detector

import elementResizeDetectorMaker from 'element-resize-detector'

    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    var drag = elementResizeDetectorMaker()
    drag.listenTo(chartDom, () => {
           myChart.resize()
    })

3.注意事项 

  1. 如果该元素有,position: static它将更改为position: relative。因此,将应用任何无意的top/right/bottom/left/z-index样式,并且绝对定位的子项将相对于元素定位。
  2. 隐藏元素将作为该元素的直接子元素注入。

 还有其他用法感兴趣的可以去看一下这个组件

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;