xCharts 区域图 opts.extra.area

以下是在 xCharts 中配置区域图 opts.extra.area 的属性列表：

属性名	类型	默认值	说明
type	String	straight	区域图类型，可选值：straight、curve、step
opacity	Number	0.2	区域图透明度
addLine	Boolean	true	是否叠加相应折线
width	Number	2	叠加折线宽度
gradient	Boolean	false	是否开启区域渐变色
activeType	String	none	激活指示点类型，可选值：none、hollow、solid

新版项目中的实际写法

xcharts/area/area.uvue:16 同样把本地配置保留在 index.uts，默认示例改成接口请求。这是示例工程的优化策略，不影响文档直接使用本地配置。

本地配置示例

xcharts/area/index.uts:1 第一组“基本折线区域图”可以直接作为文档示例：

export default [
	{
		name: '基本折线区域图',
		option: {
			animation: true,
			categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
			dataLabel: true,
			extra: {
				area: {
					activeType: 'hollow',
					addLine: true,
					gradient: false,
					opacity: 0.2,
					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: 'area',
			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/area/index.uts，当前区域图主要覆盖这些场景：

• 基本折线区域图
• 渐变色曲线区域图
• 阶梯区域图
• 带激活点的面积趋势图

核心配置主要集中在：

• extra.area.type
• extra.area.opacity
• extra.area.addLine
• extra.area.gradient
• extra.area.activeType

动态更新示例

xcharts/area/area.uvue:37 演示了初始化后更新区域图数据：

function updatearcbar() {
	const char = charts!
	const bar = char.getDrawCharts(0)!
	bar.update({
		series: [
			{ name: '成交量A', data: [{ value: 16 }, { value: 80 }, { value: 84 }, { value: 96 }, { value: 50 }, { value: 2 }] },
			{ name: '成交量B', data: [{ value: 87 }, { value: 95 }, { value: 48 }, { value: 43 }, { value: 86 }, { value: 25 }] },
			{ name: '成交量C', data: [{ value: 45 }, { value: 12 }, { value: 95 }, { value: 64 }, { value: 68 }, { value: 85 }] }
		]
	})
}

适合趋势面积分析、累计变化、区间占比走势等场景。