xCharts 混合图 opts.extra.mix

以下是在 xCharts 中配置混合图 opts.extra.mix 的属性列表：

属性名	类型	默认值	说明
column.width	Number	-	混合图中柱状图每个柱子的宽度
column.seriesGap	Number	-	多 series 每个柱子之间的间距
column.barBorderCircle	Boolean	false	是否启用分组柱状图半圆边框
column.barBorderRadius	Array	-	自定义四个圆角半径
column.linearType	String	none	渐变类型，可选值：none、opacity、custom
column.linearOpacity	Number	1	透明渐变透明度
column.customColor	Array	-	自定义渐变颜色
column.colorStop	Number	0	渐变色显示比例
area.gradient	Boolean	false	区域图是否开启渐变色
area.opacity	Number	0.2	区域图透明度
line.width	Number	2	折线宽度

新版项目中的实际写法

xcharts/mix/mix.uvue:12 同样保留了本地 index.uts 注释，但默认演示改成了接口获取。这个策略仍然只是为了减轻示例工程的体积和编译压力，并不影响你在文档里直接写本地配置。

本地配置示例

xcharts/mix/index.uts:1 第一组“多坐标系混合图”非常适合直接作为文档示例：

export default [
	{
		name: '多坐标系混合图',
		option: {
			padding: [15, 5, 0, 15],
			yAxis: {
				padding: 10,
				data: [
					{ position: 'left', title: '折线' },
					{ min: 0, max: 200, textAlign: 'left', position: 'right', title: '柱状图' },
					{ min: 0, max: 200, textAlign: 'left', position: 'right', title: '点' }
				],
				gridType: 'dash',
				showTitle: true
			},
			xAxis: { disableGrid: true, title: '单位：年' },
			series: [
				{ name: '曲面', type: 'area', style: 'curve', data: [{ value: 70 }, { value: 50 }, { value: 85 }, { value: 130 }, { value: 64 }, { value: 88 }] },
				{ name: '柱1', type: 'column', index: 1, data: [{ value: 40 }, { color: '#f04864', value: 30 }, { value: 55 }, { value: 110 }, { value: 24 }, { value: 58 }] },
				{ name: '柱2', type: 'column', index: 1, data: [{ value: 50 }, { value: 20 }, { value: 75 }, { value: 60 }, { value: 34 }, { value: 38 }] },
				{ name: '曲线', type: 'line', style: 'curve', disableLegend: true, color: '#1890ff', data: [{ value: 70 }, { value: 50 }, { value: 85 }, { value: 130 }, { value: 64 }, { value: 88 }] },
				{ name: '折线', type: 'line', color: '#2fc25b', data: [{ value: 120 }, { value: 140 }, { value: 105 }, { value: 170 }, { value: 95 }, { value: 100 }] },
				{ name: '点', type: 'point', index: 2, color: '#f04864', data: [{ value: 100 }, { value: 80 }, { value: 125 }, { value: 150 }, { value: 112 }, { value: 132 }] }
			],
			extra: {
				mix: {
					column: { width: 20 }
				},
				tooltip: {}
			},
			categories: ['2018', '2019', '2020', '2021', '2022', '2023'],
			type: 'mix',
			animation: true
		}
	}
]

页面初始化示例

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/mix/index.uts，混合图当前主要展示：

• 多坐标轴混合图
• 区域图 + 柱状图 + 折线图 + 点图混合
• 左右双轴或多轴布局
• 同步图例与提示层交互

最关键的几个配置点是：

• series[].type
• series[].index
• yAxis.data
• extra.mix.column.width
• series[].style
• xAxis.title / yAxis.showTitle

动态更新示例

xcharts/mix/mix.uvue:33 同样演示了初始化后通过 update 更新绘制区数据：

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

适合经营看板、多指标联动、趋势与对比并存的数据可视化场景。