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

最新推荐文章于 2024-11-11 19:03:47 发布

Ares_2020

最新推荐文章于 2024-11-11 19:03:47 发布

阅读量3.7k

点赞数 5

本文链接：https://blog.youkuaiyun.com/qq_33736234/article/details/120784732

版权

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用Echarts在柱状图的系列数据上显示数值，通过设置`setTimeout`函数和调整`label`的`position`与`offset`属性，可以实现数值在图形绘制完成后自动对齐到最右侧和最顶部。对于顶部显示，调整Y轴文字位置，底部显示数值；对于右侧显示，调整X轴位置，左对齐显示数值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//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]
			}
		}]
	})
})