xCharts 山峰图 opts.extra.mount

以下是在 xCharts 中配置山峰图 opts.extra.mount 的属性列表：

属性名	类型	默认值	说明
type	String	mount	山峰图类型，可选值：mount 圆角、sharp 尖角、triangle 三角、bar 直角
widthRatio	Number	1	山峰图每个山峰的图形宽度比例，范围 0-2
borderWidth	Number	1	边框线条宽度
barBorderCircle	Boolean	false	当类型为 bar 时顶部是否为圆角
barBorderRadius	Array	-	bar 类型下自定义四个圆角半径
linearType	String	none	渐变类型，可选值：none、opacity、custom
linearOpacity	Number	1	透明渐变透明度
customColor	Array	-	自定义渐变颜色
colorStop	Number	0	渐变色显示比例

新版项目中的实际写法

xcharts/mount/mount.uvue:12 也保留了本地 index.uts 的注释，但默认演示改成了接口获取：

const data = { type: 'mount', 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/mount/index.uts:1 第一组“三角山峰图”就可以直接作为文档示例：

export default [
	{
		name: '三角山峰图',
		option: {
			animation: true,
			dataLabel: true,
			extra: {
				mount: {
					type: 'triangle',
					widthRatio: 1.5
				},
				tooltip: {}
			},
			series: [
				{ name: '一班', data: [{ value: 82 }] },
				{ name: '二班', data: [{ value: 63 }] },
				{ name: '三班', data: [{ value: 86 }] },
				{ name: '四班', data: [{ value: 65 }] },
				{ name: '五班', data: [{ value: 79 }] }
			],
			type: 'mount',
			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 chart = e.add(index, item.getJSON('option')!)
		chart.setCoordinates({ height: 287, xOffset: 0, yOffset: itemH * index })
		chart.draw()
	})
}

常见用法归纳

结合 xcharts/mount/index.uts，当前山峰图主要覆盖这些场景：

• 三角山峰图
• 直角山峰图
• 正负山峰图 + 渐变色
• 圆角山峰图

主要配置点集中在：

• extra.mount.type
• extra.mount.widthRatio
• extra.mount.borderWidth
• extra.mount.linearType
• series[].data[].value

动态更新示例

xcharts/mount/mount.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 }] }
		]
	})
}

适合成绩对比、分层指标、正负值峰形展示等场景。