echarts 图例 两行展示

昨天我们公司产品提了一个需求，一定要把折线图的图例做两行展示，而却还让两行图例对齐。如图：

 我看了一下官网的API还真有关于这个的设置。那么咱们就看一下关于echarts的图例的API吧。

legend.type (图例的类型)  plain  （普通图例，缺省就为普通图例 。scroll  可滚动翻页的图例。当图例数量较多时可以使用。）

legend.zlevel  :zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。

legend.left :图例组件离容器左侧的距离

legend.top :图例组件离容器上侧的距离

legend.right : 图例组件离容器右侧的距离

legend.bottom : 图例组件离容器下侧的距离

 

legend.width : 图例组件的宽度。默认自适应。注意此时的legend.width并不是 某一个图例的宽度。此width是图例组件全部的宽度，它可以控制全部图例宽度，我们可以用这个属性让图例超过一个固定宽度为两行展示，但不能设置某一个图例文字的宽度。

 

legend.orient ： 图例列表的布局朝向。

legend.align ： 图例标记和文本的对齐。默认自动，根据组件的位置和 orient 决定，当组件的 left 值为 'right' 以及纵向布局（orient 为 'vertical'）的时候为右对齐，及为 'right'。

legend.padding ： 图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。

legend.itemGap ： 图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔

legend.itemWidth： 图例标记的图形宽度。 注意legend.itemWidth 这个属性是用来设置某一个图例标记的宽度legend.itemHeight ：同itemWidth

legend.formatter ：用来格式化图例文本，支持字符串模板和回调函数两种形式。

legend.selectedMode ： 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。

legend.inactiveColor : 图例关闭时的颜色。

legend.selected :图例选中状态表。

legend.data[i] : 图例的数据数组

 

本次的重点来了

legend.textStyle : 图例的公用文本样式

大家可以在API中看到这个属性。legend.textStyle 中有一个属性是设置图例文字宽的  ， 那就是legend.textStyle.width。但是用这个属性是必须要用legend.textStyle.rich 这个属性。要不然legend.textStyle.width这个属性不会生效。同理legend.textStyle.height也是如此。

此时会有人发现按照API上去写代码，最后并没有达到你要的效果 。两行显示并且垂直对齐。那是因为用这个属性时还需要另一个属性的配合，这个属性就是legend.formatter 。

你需要定义一个

 

 formatter: [
        '{a样式名称|{name}}',
        '{b样式名称|{name}}',
    ].join('\n'),

rich: {
        a样式名称: {
            width：100，
            color: 'red',
            lineHeight: 10
        },
        b样式名称: {
            backgroundColor: {
                image: 'xxx/xxx.jpg'
            },
            height: 40
        },
        ...
    }

 此时formatter中的 {a样式名称|} 会通过管道符自动匹配自定义的rich中{a样式名称}的样式，此时就可以设置图例文字的宽度了。这样就能得到我们想要的效果了

 这就是我们想要的样式了