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

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: ['外修', '中修'],
    }
],

 

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐