xCharts K线图 opts.extra.candle

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

属性名	类型	默认值	说明
color.upLine	Color	#f04864	上涨时线条颜色
color.upFill	Color	#f04864	上涨时填充颜色
color.downLine	Color	#2fc25b	下跌时线条颜色
color.downFill	Color	#2fc25b	下跌时填充颜色
average.show	Boolean	true	是否叠加显示均线
average.name	Array	-	均线名称，例如 ['MA5','MA20']
average.day	Array	-	均线周期，例如 [5,20]
average.color	Array	-	均线颜色

新版项目中的实际写法

xcharts/candle/candle.uvue:12 同样默认改成接口获取，但 K 线本地配置文件 xcharts/candle/index.uts 依然完整保留。由于 K 线数据量很大，这正是“文档里可以贴局部真实配置，示例工程里可以走接口”的典型场景。

本地配置示例

xcharts/candle/index.uts:1 的 K 线示例非常大，文档里更适合节选它的关键结构：

export default [
	{
		name: 'K线图',
		option: {
			animation: true,
			categories: ['2022/1/24', '2022/1/25', '2022/1/28', '2022/1/29'],
			dataLabel: false,
			enableMarkLine: true,
			enableScroll: true,
			extra: {
				candle: {
					average: {
						color: ['#1890ff', '#2fc25b', '#facc14'],
						day: [5, 10, 20],
						name: ['MA5', 'MA10', 'MA30'],
						show: true
					},
					color: {
						downFill: '#2fc25b',
						downLine: '#2fc25b',
						upFill: '#f04864',
						upLine: '#f04864'
					}
				},
				markLine: {
					data: [
						{ lineColor: '#f04864', showLabel: true, value: 2150 },
						{ lineColor: '#f04864', showLabel: true, value: 2350 }
					],
					type: 'dash'
				},
				tooltip: { showCategory: true }
			},
			series: [
				{
					name: '模拟指数',
					data: [
						[2320.26, 2302.6, 2287.3, 2362.94],
						[2300, 2291.3, 2288.26, 2308.38],
						[2295.35, 2346.5, 2295.35, 2346.92]
					]
				}
			],
			type: 'candle'
		}
	}
]

其中每个 K 线数据项通常是一个四元数组：

[开盘价, 收盘价, 最低价, 最高价]

页面初始化示例

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

• 基础 K 线图
• MA5 / MA10 / MA20 均线叠加
• 支撑位 / 压力位标记线
• 大数据量滚动浏览

核心配置主要集中在：

• extra.candle.color
• extra.candle.average
• enableScroll
• extra.markLine
• series[].data 四元数组

动态更新示例

xcharts/candle/candle.uvue:33 演示了初始化后的数据更新：

function updatearcbar() {
	const char = charts!
	const bar = char.getDrawCharts(0)!
	bar.update({
		series: [
			{
				name: '模拟指数',
				data: [
					[2400, 2350, 2300, 2450],
					[2350, 2300, 2250, 2400],
					[2300, 2250, 2200, 2350]
				]
			}
		]
	})
}

适合股票、期货、数字资产、行情走势等场景。