echarts legend 排列问题

我们可以看看下面效果图：

legend.orient：图例列表的布局朝向。可选：'horizontal'、'vertical'。

legend.icon：图例项的 icon。除了 echarts 官方提供的标记类型，还支持 图片链接和矢量图。

legend.align：图例标记和文本的对齐。可选：'auto'、'left'、‘right’。

legend 图例组件可以分组。

legend: [
    {
        icon : 'bar',
        data : [ '直接访问', '邮件营销'],
        x : 'left', //居左显示
        y: 'top',    //延Y轴顶部显示
    },{
        icon : 'bar',
        data : [ '联盟广告', '视频广告', '搜索引擎'],
        x : 'right', //居右显示
        y: 'top',    //延Y轴顶部显示
    }
],

除了 x、y 可以设置 上述设置，每个小 legend 的 x 和 y 的值，定好每个小 legend 所在的绝对位置。

目标图例：

我们一个每个图例进行定位，当然也可以进行分组，下面是实现方式：

legend:[
    {
        orient: 'horizontal',
        x : '5%',
        bottom:'20px',
        width:'50px',
        align: 'left',
        data: ['大修'],
    }
    ...
],
// 或者
legend:[
    {
        orient: 'horizontal',
        x : '5%',
        bottom:'20px',
        width:'50px',
        align: 'left',
        data: ['大修', '小修'],
    },{
        orient: 'horizontal',
        x : '30%',
        bottom:'20px',
        width:'50px',
        align: 'left',
        data: ['二保', '一保'],
        
    },{
        orient: 'horizontal',
        x : '55%',
        bottom:'20px',
        width:'50px',
        align: 'left',
        data: ['事故', '一保(外)'],
    },{
        orient: 'horizontal',
        x : '80%',
        bottom:'20px',
        width:'50px',
        align: 'left',
        data: ['外修', '中修'],
    }
],