echarts自动排序_Echarts图表legend的排版问题（转载）

来源：https://blog.csdn.net/david_jiahuan/article/details/80096922

案例一

项目中现有样式：

客户需求：将图例分为两列，并且上下两列的图例要对齐：

==================================================

具体思路：将原有的一个 legend，分成7个小 legend 显示(形容的可能不太形象，下面看代码吧)：

(1)原先的代码：

legend: {

orient: 'horizontal',

top:'8%',

right:'0%',

data: ['0-5分钟','5-15分钟','15-30分钟','30-60分钟','60-120分钟','120-240分钟','大于240分钟'],

textStyle:{

fontSize: difSize_title,

color:'#fff'

}

}

(2)修改后的代码：

legend:[

{

orient: 'horizontal',

x : '5%',

y : '10%',

align: 'left',

data: ['0-5分钟'],

textStyle:{

fontSize: difSize_legend,

color:'#fff'

}

},{

orient: 'horizontal',

 x : '30%',

y : '10%',

align: 'left',

data: ['5-15分钟'],

textStyle:{

fontSize: difSize_legend,

color:'#fff'

}

},{

orient: 'horizontal',

x : '55%',

y : '10%',

align: 'left',

data: ['15-30分钟'],

textStyle:{

fontSize: difSize_legend,

color:'#fff'

}

},{