## 更新配置或数据

更新图表配置或数据使用 xCharts.updateData(opts) 方法。

示例

以下是一个如何使用 updateData 方法的示例：

<template>
	<!-- #ifdef APP-ANDROID -->
	<scroll-view style="flex: 1;">
	<!-- #endif -->
		<view>
			<text style="color: red;margin: 30rpx;text-align: center;">一个canvas绘制多个图表,减少性能开销</text>
			<button type="primary" style="margin: 30rpx;" @click="updatearcbar">更新第一绘制区内容示例</button>
			<view style="margin: 30rpx;display: flex;align-items: center;justify-content: center;">
				<text>图表互动返回值</text>
				<text>图表索引：{{select_data.index}}</text>
				<text>提示内容的索引：{{select_data.tipsIndex}}</text>
				<text>显示隐藏对应的索引：{{select_data.legendIndex}}</text>
			</view>
			<tui-xechars :style="`height:${canvasInsHeight}px;margin: 0 30rpx;`" @initFinished="initFinished"
				@select="select"></tui-xechars>
			<button @click="test">增加图表</button>
		</view>
	<!-- #ifdef APP-ANDROID -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup>
	const tuixcharsins = ref<ComponentPublicInstance | null>(null)
	import opts from './index.uts'
	import { TuiCharts, TuiDrawCharts } from '@/uni_modules/tui-xechars'
	const itemH : number = 287
	let charts : TuiCharts | null = null
	const select_data = ref<UTSJSONObject>({})
	const canvasInsHeight = ref<number>(8 * itemH)
	function initFinished(e : TuiCharts) {
		charts = e
		opts.forEach((item : UTSJSONObject, index : number) => {
			const bar = e.add(index, item.getJSON('option')!)
			bar.setCoordinates({ height: 287, xOffset: 0, yOffset: itemH * index })
			bar.draw()
		})
	}
	function select(e : UTSJSONObject) {
		select_data.value = e
	}
	function test() {
		const bar = charts!.add(7, opts[1].getJSON('option')!)
		bar.setCoordinates({ height: 287, xOffset: 0, yOffset: itemH * 7 })
		bar.draw()
	}
	function updatearcbar() {
		const char = charts!
		const bar = char.getDrawCharts(0)!
		bar.update({
			"series": [
				{
					"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 }
					],
					"name": "完成量"
				}
			]
		})
	}
</script>