echarts图表大小自适应，resize()

利用ResizeObserver监听html元素变化，可以很方便实现效果。

代码如下：

 var myChart = echarts.init(document.getElementById('web_base_count_chart'), 'macarons');
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: [ '网站访问量', '数据评价次数', '数据下载次数', 'APP应用数'],
            x:'center',
            y:'bottom',
            padding:[0,30,10,30]
        },
        grid: {
            left: '2%',
            right: '10%',
            bottom: '15%',
            top: '2%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: months
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: function (v) {
                    return parseInt(v)
                }
            }
        },
        series: [
            {
                name: '网站访问量',
                type: 'line',
              // stack: '总量',
                data: visitdata
            },
            {
                name: '数据评价次数',
                type: 'line',
              // stack: '总量',
                data: evadata
            },
            {
                name: '数据下载次数',
                type: 'line',
              // stack: '总量',
                data: downloaddata
            },
            {
                name: 'APP应用数',
                type: 'line',
              // stack: '总量',
                data: appdata
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.clear();
    myChart.setOption(option);
    var myObserver = new ResizeObserver(entries => {
        entries.forEach(entry => {
            console.log("resize++++++");
            myChart.resize();
        });
    });
    myObserver.observe(document.querySelector('#web_base_count_chart'));

Object.observe() 方法用于异步地监视一个对象的修改。

详情见：https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver

ResizeObserver

Experimental

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

ResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement的边界框改变。内容区域则需要减去内边距padding。（有关内容区域、内边距资料见盒子模型 ）

ResizeObserver避免了在自身回调中调整大小，从而触发的无限回调和循环依赖。它仅通过在后续帧中处理DOM中更深层次的元素来实现这一点。如果（浏览器）遵循规范，只会在绘制前或布局后触发调用。

构造器

ResizeObserver()

创建并返回一个ResizeObserver对象。

属性

无。

Event handlers

无。

方法

ResizeObserver.disconnect()

取消和结束目标对象上所有对 Element或 SVGElement 观察。

ResizeObserver.observe()

开始观察指定的 Element或 SVGElement。

ResizeObserver.unobserve()

结束观察指定的Element或 SVGElement。

示例

以下示例通过观察box的宽度变化从而改变其边框圆角半径。

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    entry.target.style.borderRadius = Math.max(0, 250 - entry.contentRect.width) + 'px';
  }
});
resizeObserver.observe(document.querySelector('.box:nth-child(2)'));