echarts图例位置

在我们使用 echarts 的时候会经常涉及到很多的配置项，特别是图例，图例的配置很多，不熟悉的话我们要每次都查找其相关文档，而对于图例的具体位置信息定位文档不是很明细，这里我们重点来看一下图例位置如何设置。

• 首先我们来看一下正常添加一个图例是什么样子的

从这里我们可以看到，就是上部居中显示，大部分给我们的 demo 也基本上是这个样子，调整位置的方案，网上有很多文章说的是设置 x，y

我试了一下，实际上是不行的，这应该是老版本的方法了，我们可以看看 echarts 最新的文档里面是没有这个配置的：

官方文档链接

• 那么这里面哪个是控制位置的呢？ 首先看一下 lenged 原始代码设置：

  legend: {
    // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
    icon:'rect',
    data: ['充电车数', '充电供给车数', '按SOC预估充电车辆']
  },

这里我就不放其他配置的代码了，其实控制其位置的方法很简单，就是定位，就是我们看到的配置里面的 top，right，bottom，left 这几项了， 再搭配上 grid 把整体布局位置搞一搞，就比较完美了，下面我们看代码，和最终的实现效果：

legend: {
    // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
    bottom:20,
    itemHeight:10,
    itemWidth:40,
    icon:'rect',
    data: ['充电车数', '充电供给车数', '按SOC预估充电车辆']
  },
  grid: {
    top: '8%',
    left: '2%',
    right: '5%',
    bottom: '20%',
    containLabel: true
  },