echarts图形中各部件的移动

由于实际生产中，我们的数据会与示例数据有很大不同，导致图表中各组件出现堆叠的情况，这个时候就需要对图表中的组件位置进行调整。
基本上每个参数中都有left，right，bottom，top来控制对应组件的移动。
下面是各组件的移动方式：

1.图形的移动

在grid参数中进行设置

grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '10%'
        containLabel: true
    },

left参数：控制左边距离 ，如果设置为center则为居中（left:'center'）
right参数：控制右边距离，如果设置为center则为居中（right:'center'）
bottom参数：控制底部距离
top参数：控制顶部距离
containLabel参数：指的是grid 区域是否包含坐标轴的刻度标签,默认不包含
如下是containLabel参数true与false的对比：

containLabel:true

containLabel:false

2.标题的移动

在title参数中进行设置

title: {
        text: '折线图堆叠',
        top: '10%',
        left: '3%',
        right: '4%',
        bottom: '3%',
    },

title

3.右上角工具部件的移动

在toolbox参数中进行设置

toolbox: {
        top: '10%',
        feature: {
            saveAsImage: {}
        }
    },

toolbox

4.legend部件的移动

在legend参数中进行设置

legend: {
        left: '2%',
        right: '2%',
        top : '5%',
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },

legend.png