echarts option 图例和小工具的位置

 绘图的时候可能会遇到要实现显示“图例”和“小工具”，而他们的默认位置是在右上角显示，如图

        可以看出，这样的话，部分图文会被挡住，这样不仅看不清楚也带来了很不好的用户体验，所以我们就要调整他们的位置

图例和小工具都可以调整位置

  1.图例【legend】

       直接在“图例”里配置属性就好，有两种方式，第一种是方向：上下左右四个方位都可以直接赋值，它们的值可以是数字也可以是百分比，其中数字代表的是距离该方向的长度，单位是PX；百分比是距离该方向占整体的百分之多少；第二种方式是坐标轴：X和Y都可以赋值，它们的值可以是'left','right','center'：代表左中右三个位置;也可以为数字，含义是坐标，单位是PX  

下面我们使用第一种方式来实现位置的调整

legend: {
               orient: 'vertical', /* 设置位置的垂直方向 */ 

               right: 65,

               top: 20,

               data:['五月','六月']
            },

      现在的效果是图例的位置向左了一点，和小工具就不在一起了

   可是我们仍然可以看到小工具显示的不完整，有些提示的字是看不到的，所以我们就要调整小工具的位置

    2.小工具【toolbox】

        直接在“小工具”里配置属性就好，方式和“图例”的一致，在此我就不重复了，可参考上面的解说，另外，因为上面是用的第一种配置方式：方向，那么我们这里就用第二种：坐标轴

下面我们使用第二种方式来实现位置的调整
 

toolbox : {

         show : true,  

         feature : {

                saveAsImage : {

                    show : true,

                    pixelRatio : 1  
    
                        }
                  },

         x:950,
   },

现在的效果图是两个互不干扰，都能清楚的显示自己要表达的东西

不过好像有点挤或者丑，那么可以再调整一下“图例”的方向，我们只要把修饰方向的属性去掉就好
 

legend: {

           /* orient: 'vertical',设置位置的垂直方向 */ 

           right: 65,

           top: 20,

           data:['五月','六月']

      },

默认水平显示，现在就好多了