绘图的时候可能会遇到要实现显示“图例”和“小工具”,而他们的默认位置是在右上角显示,如图
可以看出,这样的话,部分图文会被挡住,这样不仅看不清楚也带来了很不好的用户体验,所以我们就要调整他们的位置
图例和小工具都可以调整位置
1.图例【legend】
直接在“图例”里配置属性就好,有两种方式,第一种是方向:上下左右四个方位都可以直接赋值,它们的值可以是数字也可以是百分比,其中数字代表的是距离该方向的长度,单位是PX;百分比是距离该方向占整体的百分之多少;第二种方式是坐标轴:X和Y都可以赋值,它们的值可以是'left','right','center':代表左中右三个位置;也可以为数字,含义是坐标,单位是PX
下面我们使用第一种方式来实现位置的调整
legend: {
orient: 'vertical', /* 设置位置的垂直方向 */
right: 65,
top: 20,
data:['五月','六月']
},
现在的效果是图例的位置向左了一点,和小工具就不在一起了
可是我们仍然可以看到小工具显示的不完整,有些提示的字是看不到的,所以我们就要调整小工具的位置
2.小工具【toolbox】
直接在“小工具”里配置属性就好,方式和“图例”的一致,在此我就不重复了,可参考上面的解说,另外,因为上面是用的第一种配置方式:方向,那么我们这里就用第二种:坐标轴
下面我们使用第二种方式来实现位置的调整
扫描二维码关注公众号,回复:
2469279 查看本文章
toolbox : {
show : true,
feature : {
saveAsImage : {
show : true,
pixelRatio : 1
}
},
x:950,
},
现在的效果图是两个互不干扰,都能清楚的显示自己要表达的东西
不过好像有点挤或者丑,那么可以再调整一下“图例”的方向,我们只要把修饰方向的属性去掉就好
legend: {
/* orient: 'vertical',设置位置的垂直方向 */
right: 65,
top: 20,
data:['五月','六月']
},
默认水平显示,现在就好多了