关于ECharts中调整容器与图表的位置关系

本文转自https://blog.csdn.net/qq_34171965/article/details/82115239
感谢博主！

---

在vue中一个组件需要通过点击事件来切换不同的图表样式和数据，在写的过程中发现上一个图表的位置和下一个图表的位置大小差之甚远，但是图表容器的大小是一样的，后发现是图表和容器的位置问题，解决如下：

方式1：手动调整图表的位置
在grid中有四个属性：left,right ,top ,botton,可以用百分比和像素

grid:{
        left: '5%',   // 与容器左侧的距离
         right: '5%', // 与容器右侧的距离
         //top: '5%',   // 与容器顶部的距离
         //bottom: '5%', // 与容器底部的距离
      },

边缘与容器之间存在一定的间距。都是因为默认情况下grid的x、x2、y、y2做了数据设置。若想改变距离，则需要自己在options内对图表参数进行设置。

grid:{
    x:0,   //左侧与y轴的距离
    y:0,   //top部与x轴的距离
    x2:0,   //右侧与y轴的距离
    y2:0    //bottom部与x轴的距离
  },

方式2：自适应画布的大小，这是度娘的解释，而我在写的过程中发现并不是自适应画布的大小，是调整两个板块之间的距离。要调整图表和容器的位置，还是要使用上述方法。

grid: {
     containLabel:true
}

如果大家还有其他好方法分享可以评论一下，共同学习，谢谢啦~