F2图表柱状图添加文本标注

四瓣纸鹤2025-12-27 11:41

我用F2图表做了一个叠加的柱状图，用于显示基金的持仓总量和收益，柱状图默认是没有标记属性的，不想echarts可以用lable属性。所以必须用一个标注组件<TextGuide>，根据官方文档，代码如下：

javascript 复制代码

<Canvas pixel-ratio={2} style={{ width: '100%', height: '300px' }}>
  <Chart
	data={toRaw(positionDataWithEarnings)}
	coord={{
	  transposed: true,
	}}
  >
	<Axis field="type" />
	<Axis field="total" />
	{toRaw(positionDataWithEarnings).map((item) => {
	  const { total, name, per } = item;
	  return (
		<TextGuide
		  records={[item]}
		  content={`${name === '收益' ? total + '(' + per + ')' : total}`}
		  style={{
			fill:
			  name === '收益' ? (total > 0 ? 'red' : 'green') : '#000',
			fontSize: '18px',
		  }}
		  offsetX={name === '持仓' ? -5 : -60}
		  offsetY={-8}
		/>
	  );
	})}
	<Interval x="type" y="total" color="name" adjust="stack" />
  </Chart>
</Canvas>

这里需要一个map循环，生成每个柱子对应的文本标注，其中：

records：表示每一项数据

content：表示要显示的文字

style：文字样式，fill是颜色，fontSize是字体大小

offsetX：是距柱子x轴的偏移量

offsetY：是距柱子y轴的偏移量

我这个柱状图是水平柱状图，这个要用到Chart的一个坐标系的属性(coord)，设置成转置(transposed)，如下：

javascript 复制代码

coord={{
    transposed: true, // 图表转置
}}

最终的效果是这样，我将持仓数据放在了柱子顶部，将收益数据放在了柱子底部，由于转置后x和y轴交换，所以这里调整的是offsetX，给Y轴一个偏移量，避免文本盖到柱子上。