echarts series上面的数字显示到最右部或最顶部方法

本文介绍了如何使用Echarts在柱状图的系列数据上显示数值,通过设置`setTimeout`函数和调整`label`的`position`与`offset`属性,可以实现数值在图形绘制完成后自动对齐到最右侧和最顶部。对于顶部显示,调整Y轴文字位置,底部显示数值;对于右侧显示,调整X轴位置,左对齐显示数值。
摘要由CSDN通过智能技术生成
//echarts series上面的数字显示到最右部 需要在图画完后加入如下代码
setTimeout(function(){
    var width = chart.getWidth();
    var opt = chart.getOption();
    var grid = opt.grid[0];

    var right = grid.right;
    var left = grid.left;

    right = width*parseFloat(right)/100;
    left = width*parseFloat(left)/100;

    var x = width-left-right;

    chart.setOption({
        series:[{
            label:{
                show:true,
                position:'left',
                offset:[x+50,0]
            }
        }]
    })
})


//echarts series上面的数字显示到最顶部 需要在图画完后加入如下代码
setTimeout(function(){
	var heigth = chart.getHeight();
	var opt = chart.getOption();
	var grid = opt.grid[0];
	
	var top = grid.top;
	var bottom = grid.bottom;
	
	top = height*parseFloat(top)/100;
	bottom = height*parseFloat(bottom)/100;
	
	var y = height-bottom-top;
	
	chart.setOption({
		series:[{
			label:{
				show:true,
				position:'bottom',
				offset:[0,-y-30]
			}
		}]
	})
})

 参考:echarts柱状图如何在最顶部显示数字-H5W3

左对齐参考这篇:echart 柱状图如何让y轴文字靠左显示,series上文字右对齐显示_aka小帅的博客-CSDN博客

  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值