AntV统计图表常用配置

  • 数据标签 label
{
  ...
  label: {		// 配置以在图表上显示数据文本
	textBaseline: "bottom",		// 文本的基线被设置为文本块的底部 top/
	textAlign: "center",	// 文本对齐方式
	lineHeight: 30,		// 文本行高,从而控制文本与图表之间的垂直间距
	position: 'inside', // 标签位置,多用于柱状图和饼图 outside/spider
	transform: [{ type: 'overlapDodgeY' }],	// 处理图表中数据标签的重叠问题,overlapDodgeY是将位置碰撞的标签在y方向上进行调整,防止标签重叠;overflowHide对于标签在图形上放置不下的时候隐藏标签;overlapHide是对位置碰撞的标签进行隐藏。
	formatter: ".1%",		// 将数值格式转为百分比,保留一位小数
  }
}
  • 数据点提示 tooltip
{
  ...
  tooltip: {		// 单个通道 tooltip: {channel: 'y'}
	title: 'date',
	items: [
	  {
	    channel: 'y',
	    valueFormatter: ".0%",
	  }
    ]
  },
}
  • 标记 annotations
{
  ...
  annotations: [
    {
      type: 'lineY',		// 水平线,rangeX / text / point
      data: [700],
      label: {
        text: 'value = 700',
        position: 'right',
        dx: -10,
        style: { textBaseline: 'bottom' },
      },
    },
  ],
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值