Echarts图表legend的排列问题

项目中现有样式


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


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

具体思路:将原有的一个 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'
                    }
                },{
                    orient: 'horizontal',
                    x : '80%',
                    y : '10%',
                    align: 'left',
                    data: ['30-60分钟'],
                    textStyle:{
                        fontSize: difSize_legend,
                        color:'#fff'
                    }
                },{
                    orient: 'horizontal',
                    x : '5%',
                    y : '15%',
                    align: 'left',
                    data: ['60-120分钟'],
                    textStyle:{
                        fontSize: difSize_legend,
                        color:'#fff'
                    }
                },{
                    orient: 'horizontal',
                    x : '30%',
                    y : '15%',
                    align: 'left',
                    data: ['120-240分钟'],
                    textStyle:{
                        fontSize: difSize_legend,
                        color:'#fff'
                    }
                },{
                    orient: 'horizontal',
                    x : '55%',
                    y : '15%',
                    align: 'left',
                    data: ['大于240分钟'],
                    textStyle:{
                        fontSize: difSize_legend,
                        color:'#fff'
                    }
                }
            ],
==========关键点就是每个小legend的x和y的值! 定好每个小legend所在的绝对位置!


猜你喜欢

转载自blog.csdn.net/david_jiahuan/article/details/80096922
今日推荐