xCharts 柱状图 opts.extra.column

以下是在 xCharts 中配置柱状图 opts.extra.column 的属性列表：

属性名	类型	默认值	说明
type	String	group	柱状图类型，可选值：group 分组柱状图、stack 堆叠柱状图、meter 温度计式图
width	Number	-	柱状图每个柱子的宽度
seriesGap	Number	-	多个 series 之间每个柱子的间距
categoryGap	Number	-	每个 category 点位柱子组之间的间距
barBorderCircle	Boolean	false	是否启用分组柱状图半圆边框
barBorderRadius	Array	-	自定义四个圆角半径 [左上, 右上, 右下, 左下]
linearType	String	none	渐变类型，可选值：none、opacity、custom
linearOpacity	Number	1	透明渐变的透明度
customColor	Array	-	自定义渐变颜色，通常与 series 数量对应
colorStop	Number	-	渐变色显示比例
meterBorder	Number	1	温度计式图表边框宽度
meterFillColor	Color	#FFFFFF	温度计式图表空余填充颜色
activeBgColor	Color	#000000	当前点击柱状图的背景颜色
activeBgOpacity	Number	0.08	当前点击柱状图的背景颜色透明度
labelPosition	String	outside	数据标签位置，可选值：outside、insideTop、center、bottom

新版项目中的实际写法

在新版项目里，xcharts/column/column.uvue:26 也和 arcbar 一样，没有长期直接使用：

import opts from './index.uts'

而是改成了接口获取：

const data = { type: 'column', current: 1, pageSize: 10, uts: true }
TuiApi('getPagedCharts', data, true).then((res : UTSJSONObject) => {
	opts = res.getArray('data.list') as UTSJSONObject[]
	canvasInsHeight.value = opts.length * itemH
})

这里同样不是因为柱状图配置必须走接口，而是因为示例数据量较大时，直接长期内置在本地示例工程里会增加编译压力。

本地配置示例

文档里完全可以直接使用 xcharts/column/index.uts:1 的配置示例。第一组“全圆角柱状图 + 标记线”就是很典型的写法：

export default [
	{
		name: '全圆角柱状图+标记线',
		option: {
			animation: true,
			categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
			dataLabel: true,
			enableMarkLine: true,
			extra: {
				column: {
					activeBgColor: '#000000',
					activeBgOpacity: 0.08,
					barBorderRadius: [6, 6, 6, 6],
					seriesGap: 5,
					type: 'group',
					width: 20
				},
				markLine: {
					data: [{ showLabel: true, value: 21 }]
				},
				tooltip: {}
			},
			series: [
				{ name: '目标值', data: [{ value: 35 }, { value: 36 }, { value: 34 }, { value: 33 }, { value: 13 }, { value: 34 }] },
				{ name: '完成量', data: [{ value: 18 }, { value: 27 }, { value: 21 }, { color: '#f56c6c', value: 24 }, { value: 6 }, { value: 28 }] }
			],
			type: 'column',
			xAxis: { disableGrid: true },
			yAxis: { data: [{ min: 0 }] }
		}
	}
]

页面初始化示例

如果你在业务项目里直接用本地配置，可以保持这种模式：

import opts from './index.uts'

function initFinished(e : ITuiCharts) {
	charts = e
	opts.forEach((item : UTSJSONObject, index : number) => {
		const bar = e.add(index, item.getJSON('option')!)
		bar.setCoordinates({ height: 287, xOffset: 0, yOffset: itemH * index })
		bar.draw()
	})
}

常见用法归纳

结合 xcharts/column/index.uts，柱状图当前主要覆盖这些场景：

• 全圆角柱状图 + 标记线
• 柱状图滚动条
• 正负柱状图
• 堆叠柱状图
• 温度计式图表

这些能力通常通过下面这些字段组合出来：

• extra.column.type
• extra.column.width
• extra.column.barBorderRadius
• enableScroll + xAxis.itemCount
• enableMarkLine + extra.markLine
• series[].data[].value

动态更新示例

xcharts/column/column.uvue:56 里演示了初始化后更新第一块绘制区域：

function updatearcbar() {
	const char = charts!
	const bar = char.getDrawCharts(0)!
	bar.update({
		series: [
			{ name: '目标值', data: [{ value: 50 }, { value: 60 }, { value: 55 }, { value: 65 }, { value: 45 }, { value: 70 }] },
			{ name: '完成量', data: [{ value: 10 }, { value: 20 }, { value: 15 }, { value: 25 }, { value: 5 }, { value: 30 }] }
		]
	})
}

适合销量看板、目标完成率、年度对比、可滚动柱状统计等场景。