《前端》echarts图形中各部件的移动--2020年5月7日

目录

1.图形的移动-在grid参数中进行设置。

2.标题的移动-在title参数中进行设置。

3.右上角工具部件的移动-在toolbox参数中进行设置。

4.legend部件的移动-在legend参数中进行设置。

---

图表中各组件出现堆叠的情况，这个时候就需要对图表中的组件位置进行调整。基本上每个参数中都有left，right，bottom，top来控制对应组件的移动。
下面是各组件的移动方式：

总结来讲：主图在grid设置，其他什么部件就在对应属性下设置。

1.图形的移动-在grid参数中进行设置。

grid:{
    x:25,
    y:45,
    x2:5,
    y2:20,
    borderWidth:1
},

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

也可以用left、right等。

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

2.标题的移动-在title参数中进行设置。

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

3.右上角工具部件的移动-在toolbox参数中进行设置。

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

4.legend部件的移动-在legend参数中进行设置。

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