xCharts 线图 opts.extra.line

以下是在 xCharts 中配置线图 opts.extra.line 的属性列表：

属性名	类型	默认值	说明
type	String	straight	折线图类型，可选值：straight、curve、step
width	Number	2	折线宽度
activeType	String	none	激活指示点类型，可选值：none、hollow、solid
linearType	String	none	渐变色类型，可选值：none、custom
onShadow	Boolean	false	是否开启折线阴影
animation	String	vertical	动画方向，可选值：vertical、horizontal

新版项目中的实际写法

xcharts/line/line.uvue:12 也保留了本地配置注释，但默认示例改成了接口读取：

const data = { type: 'line', 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/line/index.uts:1 的第一组“基本折线图”可以直接作为文档示例：

export default [
	{
		name: '基本折线图',
		option: {
			animation: true,
			categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
			dataLabel: true,
			extra: {
				line: {
					activeType: 'hollow',
					type: 'straight',
					width: 2
				},
				tooltip: {}
			},
			series: [
				{ name: '成交量A', data: [{ value: 35 }, { value: 8 }, { value: 25 }, { value: 37 }, { value: 4 }, { value: 20 }] },
				{ name: '成交量B', data: [{ value: 70 }, { value: 40 }, { value: 65 }, { value: 100 }, { value: 44 }, { value: 68 }] },
				{ name: '成交量C', data: [{ value: 100 }, { value: 80 }, { value: 95 }, { value: 150 }, { value: 112 }, { value: 132 }] }
			],
			type: 'line',
			xAxis: { disableGrid: true },
			yAxis: { dashLength: 2, gridType: 'dash' }
		}
	}
]

页面初始化示例

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/line/index.uts，当前线图主要覆盖这些场景：

• 基本折线图
• 曲线图
• 阶梯图
• 折线阴影
• 虚线、空心点、激活态效果

核心配置通常集中在：

• extra.line.type
• extra.line.width
• extra.line.activeType
• series[].lineType
• series[].setShadow
• yAxis.gridType

动态更新示例

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

适合趋势分析、时序变化、成交量走势、过程监控等场景。