记 echarts 的一些设置

1. 图表 距离 父级容器的边距

有时候我们不容易控制echarts图表的大小，其实我们只需要让图表距离容器有一点边距，防止图表内容超出边界，或与标题、图例等重叠情况。最好的解决办法就是通过grid属性设置图表距离容器的边界。

//echats options
options : {
    //...
    grid : {
        top : 40,    //距离容器上边界40像素，数值单位px，支持百分比（字符串）
        bottom: 30   //距离容器下边界30像素
    }
}

更多参数参考ECharts API 。

2. 浏览器窗口大小改变时自适应

echart图表本身是提供了一个resize的函数，当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas。
用window.onresize = myChart.resize; 可以完成自适应，就是把window的onresize事件赋值为echart的resize事件。

** 注意：**
1.这是单个图表的情况，要是多个图表，发现会不起作用。

2. 当有多个 window.onresize 时，只有最后一个会生效，这也是 1 的原因。

** 解决方法：**

多个图表可以使用Dom二级事件addEventListener监听

let myChart = echarts.init()
let myChart2 = echarts.init()
window.addEventListener("resize", () => { 
    this.myChart.resize();  
    this.myChart2.resize();  
});

更多参数参考ECharts API。