一、背景

使用g2插件绘制柱形图，发现对于某些长文本的显示并不理想。在限定的区域内，无论是放在X轴还是Y轴，文本显示不完整或是出现重叠，影响图表查阅。于是，在翻阅插件提供的API后，选择将文本设置显示在柱状图内，以实现较好的效果。
本文基于插件3.4.9版本
建议参阅官方文档

二、基础使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>柱状图测试页</title>
	</head>
	<body>
		<div id="c1"></div>
		<script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.9/dist/g2.min.js"></script>
		<script>
			const data = [
			  { name: '商品一', num: 275 },
			  { name: '商品二', num: 115 },
			  { name: '商品三', num: 120 },
			  { name: '商品四', num: 350 },
			  { name: '商品五', num: 150 },
			]; 
			const chart = new G2.Chart({
			  container: 'c1', 
			  width: 600, 
			  height: 300, 
			});
			chart.source(data, {
				name: {
					type: "cat",
					alias: "商品名"
				},
				num: {
					alias: "数量"
				}
			});
			chart
			  .interval()
			  .position('name*num')
			  .tooltip('num')
			  .color('name');
			chart.tooltip(true, {
			  showTitle: false, // 默认标题不显示
			});
			chart.coord("rect").transpose();
			chart.render();
		</script>
	</body>
</html>

效果图如下：
看着没什么问题，如果商品名称很长呢？
效果图一
长文本在Y轴显示不全：
效果图二

三、优化文本显示位置

简单来说，就是让Y轴上的文本，显示在柱形图内，这样，就不虞文本显示不全的问题

chart 
  .interval()
  .position('name*num')
  .tooltip('num')
  .color('name')
  .opacity(1)
  .label('name',function(){//在function中设置效果
		return {
		  position: 'bottom',
		  offset: 0,
		  textStyle: { fill: '#fff' }
		};
	})
	.shape('top-line');
//不显示Y轴值
chart.axis("name", {
		title: " ",
		label: false
	});
//不显示图例
chart.legend(false);

增添的代码作用，在于设置了label的显示形式，即数据对象中的"name"值以什么样的形式显示在图表中。此时，为了避免重复说明，可以不显示Y轴和图例。
效果图如下：
效果图三

原文链接：https://blog.csdn.net/weixin_42792301/article/details/104466168