xCharts 条状图 opts.extra.bar

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

属性名	类型	默认值	说明
type	String	group	条状图类型，可选值：group、stack
width	Number	-	条状图每个柱子的宽度
seriesGap	Number	2	多 series 每个柱子之间的间距
categoryGap	Number	3	每个 category 点位柱子组之间的间距
barBorderCircle	Boolean	false	是否启用半圆边框
barBorderRadius	Array	-	自定义四个圆角半径
linearType	String	none	渐变类型，可选值：none、opacity、custom
linearOpacity	Number	1	透明渐变透明度
customColor	Array	-	自定义渐变颜色
colorStop	Number	-	渐变色显示比例
activeBgColor	Color	#000000	当前点击条状图背景颜色
activeBgOpacity	Number	0.08	当前点击条状图背景颜色透明度

新版项目中的实际写法

xcharts/bar/bar.uvue:12 同样默认用接口拿示例数据，但本地 index.uts 依然保留，文档和实际业务都可以直接采用本地配置。

本地配置示例

xcharts/bar/index.uts:1 的第一组“圆角条状图 + 渐变色”示例如下：

export default [
	{
		name: '圆角条状图+渐变色',
		option: {
			animation: true,
			categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
			dataLabel: true,
			extra: {
				bar: {
					activeBgColor: '#000000',
					activeBgOpacity: 0.08,
					barBorderCircle: true,
					categoryGap: 2,
					linearType: 'custom',
					seriesGap: 2,
					type: 'group',
					width: 30
				},
				tooltip: {}
			},
			series: [
				{ name: '目标值', data: [{ value: 35 }, { value: 36 }, { value: 34 }, { value: 33 }, { value: 13 }, { value: 34 }] },
				{ name: '完成量', data: [{ value: 18 }, { value: 27 }, { value: 21 }, { value: 24 }, { value: 6 }, { value: 28 }] }
			],
			type: 'bar',
			xAxis: { axisLine: false, boundaryGap: 'justify', disableGrid: false, max: 40, min: 0 },
			yAxis: { unit: '年' }
		}
	}
]

页面初始化示例

import opts from './index.uts'

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

常见用法归纳

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

• 圆角条状图 + 渐变色
• 堆叠条状图
• 横向分组对比

这些能力通常通过下面字段实现：

• extra.bar.type
• extra.bar.width
• extra.bar.barBorderCircle
• xAxis.max / xAxis.min
• yAxis.unit
• series[].data[].value

动态更新示例

xcharts/bar/bar.uvue:33 演示了初始化后更新第一块绘制区：

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

适合排行榜、横向对比、类别排序、目标完成率展示等场景。