更新配置或数据

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

关于本地配置与接口请求

旧版文档里的很多示例直接使用：

import opts from './index.uts'

这种方式本身没有问题，index.uts 就是本地图表配置数据。

在新版项目里，像 xcharts/arcbar/arcbar.uvue:16 这样的页面之所以改成接口请求，不是因为图表配置必须走接口，而是因为某些图表样例数据体量较大，直接把大量配置长期内置在示例页面链路中，可能会造成编译内存压力。

因此文档理解上要区分两件事：

• import opts from './index.uts'：代表本地静态配置方案
• TuiApi('getPagedCharts', ...)：代表示例工程为了减轻包体和编译压力采用的数据获取方案

如果你在自己的业务项目里数据量可控，完全可以直接使用本地配置。

本地配置示例

import opts from './index.uts'

function initFinished(e) {
	charts = e
	opts.forEach((item, index) => {
		const chart = e.add(index, item.option)
		chart.setCoordinates({ height: 287, xOffset: 0, yOffset: itemH * index })
		chart.draw()
	})
}

何时考虑接口方案

以下情况可以考虑像 arcbar.uvue 那样把示例数据放到接口侧：

• 单个图表类型的 index.uts 样例特别多
• 配置对象很大，包含大量地图、词云或复杂序列数据
• 文档演示项目只是展示平台，不希望本地打包过重
• 编译时已经出现明显内存占用偏高的问题

示例

以下是一个如何使用 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>