xCharts 词云图 opts.extra.word

以下是在 xCharts 中配置词云图 opts.extra.word 的属性列表：

属性名	类型	默认值	说明
type	String	normal	词云排列方式，可选值：normal 水平排列、vertical 水平垂直混排
autoColors	Boolean	false	是否开启随机颜色

新版项目中的实际写法

xcharts/word/word.uvue:12 默认也是通过接口拿示例数据，但词云本地配置 xcharts/word/index.uts 非常适合直接写进文档，因为它本质上就是一组关键词和字号配置。

本地配置示例

xcharts/word/index.uts:1 第一组“词云图水平排列”配置如下：

export default [
	{
		name: '词云图水平排列',
		option: {
			animation: true,
			dataLabel: true,
			extra: {
				tooltip: {},
				word: {
					autoColors: false,
					type: 'normal'
				}
			},
			series: [
				{ name: '跨全端图表', textSize: 25 },
				{ name: '微信小程序', textSize: 20 },
				{ name: '支付宝小程序', textSize: 20 },
				{ name: '百度小程序', textSize: 20 },
				{ name: 'QQ小程序', textSize: 20 },
				{ name: '头条小程序', textSize: 20 }
			],
			type: 'word'
		}
	}
]

页面初始化示例

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

• 水平排列词云
• 水平垂直混排词云
• 关键词字号权重展示

关键配置主要集中在：

• extra.word.type
• extra.word.autoColors
• series[].name
• series[].textSize

动态更新示例

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

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 }] }
		]
	})
}

更常见的做法是直接整体替换 series 里的关键词与 textSize，适合热词分析、标签云、内容关键词展示等场景。