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所在的绝对位置!


  • 10
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 17
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值