xCharts 散点图 opts.extra.scatter

当前散点图没有额外扩展配置，opts.extra.scatter 可以保持空对象：

extra: {
	scatter: {}
}

真正影响散点图展示效果的，主要是 series 数据结构、xAxis / yAxis 坐标范围以及网格分割方式。

新版项目中的实际写法

xcharts/scatter/scatter.uvue:12 仍然保留了本地 index.uts 的注释，但默认示例页改成了接口获取：

const data = { type: 'scatter', 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
})

这不是散点图能力限制，只是示例工程为了减轻包体和编译压力采用的方式。业务项目里完全可以直接 import opts from './index.uts'。

本地配置示例

xcharts/scatter/index.uts:1 的第一组“散点图”配置如下：

export default [
	{
		name: '散点图',
		option: {
			animation: true,
			dataLabel: false,
			extra: {
				scatter: {}
			},
			series: [
				{
					name: '散点一',
					data: [
						[10, 8.04],
						[8.07, 6.95],
						[13, 7.58],
						[9.05, 8.81]
					]
				},
				{
					name: '散点二',
					data: [
						[9.15, 7.2],
						[11.5, 7.2],
						[3.03, 4.23],
						[12.2, 7.83]
					]
				}
			],
			type: 'scatter',
			xAxis: {
				boundaryGap: 'justify',
				disableGrid: false,
				gridType: 'dash',
				min: 0,
				splitNumber: 5
			},
			yAxis: {
				disableGrid: false,
				gridType: 'dash'
			}
		}
	}
]

其中每个散点数据项是一个二维坐标：

[x, y]

页面初始化示例

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/scatter/index.uts，当前散点图主要依赖这些配置点：

• series[].data 二维坐标数组
• xAxis.min / splitNumber
• xAxis.gridType
• yAxis.gridType

散点图适合：

• 双变量分布分析
• 相关性观察
• 样本点离散展示
• 聚类结果可视化

动态更新示例

xcharts/scatter/scatter.uvue:33 里同样保留了统一的 update 演示结构。对于散点图，更常见的实际更新方式是直接替换整组坐标数据：

function updateScatter() {
	const chart = charts!.getDrawCharts(0)!
	chart.update({
		series: [
			{
				name: '散点一',
				data: [
					[6, 5.2],
					[8, 6.1],
					[10, 7.4],
					[12, 8.6]
				]
			}
		]
	})
}