T-UVUE-UI

更新配置或数据

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

属性

属性	类型	说明
opts	Object	结构同 `new xCharts(opts)` 中的 `opts` 参数结构，可以是其中的某一个属性

示例

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

javascript

<template>
	<t-page title="图表" :is-loading="false" class="p.30">
		<t-card title="UTS图表" sub-title="百度图表翻译,支持多种图表类型和定制化选项，用于深入数据分析和交互式报告，提升业务洞察力。"></t-card>
		<!-- <template v-for="(item,index) in chartList" :key='index'> -->
		<!-- <t-section :title="`${item['name']}`" class="mtb.30"></t-section> -->
		<t-xcharts ref="chartsins" class="tdb-tdr" :option="chartList[0]['option']"></t-xcharts>
		<!-- </template> -->
		<t-button @click="updatedata">更新数据</t-button>
	</t-page>
</template>

<script>
	import { TuiApi } from '@/api/uriApi.uts'
	export default {
		data() {
			return {
				type: 'column',
				chartList: [] as UTSJSONObject[]
			};
		},
		onLoad(e : OnLoadOptions) {
			this.type = `${e['type']}`
		},
		onReady() {
			this.getCharts()
		},
		methods: {
			updatedata() {
				const chartsins = this.$refs['chartsins'] as ComponentPublicInstance
				chartsins.$callMethod('updateData', {
					"categories": [
						"2015",
						"2017",
						"2018",
						"2019",
						"2020",
						"2021"
					],
					"series": [
						{
							"data": [
								{
									"value": 15
								},
								{
									"value": 85
								},
								{
									"value": 35
								},
								{
									"value": 95
								},
								{
									"value": 42
								},
								{
									"value": 15
								}
							],
							"name": "目标值"
						},
						{
							"data": [
								{
									"value": 36
								},
								{
									"value": 56
								},
								{
									"value": 45
								},
								{
									"color": "#f56c6c",
									"value": 33
								},
								{
									"value": 65
								},
								{
									"value": 21
								}
							],
							"name": "完成量"
						}
					]
				})
			},
			getCharts() {
				const data = { type: this.type, current: 1, pageSize: 10, uts: true } as UTSJSONObject
				TuiApi('getPagedCharts', data).then(res => {
					this.chartList = res.getArray('data.list') as UTSJSONObject[]
				})
			}
		}
	}
</script>

提示窗（ToolTip）

显示图表提示窗使用 xCharts.showToolTip(event, options) 方法。

属性

属性	类型	说明
event	Object	标准 event 事件，可绑定在 `tap`、`touchstart`、`touchmove`、`touchend` 中
options	Object	自定义 ToolTip 配置，格式如下

options 配置项

属性	类型	说明
options.index	Number	强制选中的索引，即无论选择的位置是什么，都强制选中 index 的数据
options.offset	Object	自定义 ToolTip 显示位置，格式为 `{x: Number, y: Number}`
options.textList	Array	自定义 ToolTip 文案，格式为 `[ {text: 显示的字符串, color: null 或 16 进制颜色值, legendShape: 图例形状，请参考 series.legendShape 赋值} ]`
options.formatter	Function	格式化显示文字，格式为 `(item, category, index, opts) => { return string xxx }`

示例

以下是如何使用 showToolTip 方法的示例：

javascript

xCharts.showToolTip(event, {
  index: 2, // 强制选中索引为2的数据
  offset: { x: 10, y: 20 }, // ToolTip 显示位置偏移量
  textList: [
    { text: '数据1', color: '##ff0000', legendShape: 'circle' },
    { text: '数据2', color: '##00ff00', legendShape: 'rect' }
    // 更多数据...
  ],
  formatter: (item, category, index, opts) => {
    return `类别：${category}，数据：${item}`;
  }
});

图例点击交互

实现图例点击交互使用 `xCharts.touchLegend(event, options)` 方法。

### 属性

| 属性 | 类型 | 说明 |
| --- | --- | --- |
| event | Object | 标准 event 事件，可绑定在 `tap`、`touchstart`、`touchmove`、`touchend` 中 |
| options | Object | 配置参数，格式如下 |

##### options 配置项

| 属性 | 类型 | 说明 |
| --- | --- | --- |
| options.animation | Boolean | 点击图例交互时是否开启动画效果，默认 `false` 关闭动画 |

如遇到点击不准确的问题，请参考上面 ToolTip 下的说明，需要处理 event 的坐标。

### 示例

以下是如何使用 `touchLegend` 方法的示例：

```html
<canvas canvas-id="column" id="column" class="charts" @tap="tap" />
var xChartsInstance = {};

function drawCharts(id, data) {
  var opts = { type: "column", ...... };
  xChartsInstance[id] = new xCharts(opts);
}

function tap(e) {
  xChartsInstance[e.target.id].touchLegend(e);
}

获取图表点击索引

获取图表点击的数据索引使用 xCharts.getCurrentDataIndex(event) 方法。

属性

属性	类型	说明
event	Object	标准 event 事件，可绑定在 `tap`、`touchstart`、`touchmove`、`touchend` 中

返回的数据为点击数据的数组下标（-1 表示未找到对应的数据区域）。如遇到获取不到索引的问题，请参考上面 ToolTip 下的说明，需要处理 event 的坐标。

示例

以下是如何使用 getCurrentDataIndex 方法的示例：

html

<canvas canvas-id="column" id="column" class="charts" @tap="tap" />
var xChartsInstance = {};

function drawCharts(id, data) {
  var opts = { type: "column", ...... };
  xChartsInstance[id] = new xCharts(opts);
}

function tap(e) {
  var index = xChartsInstance[e.target.id].getCurrentDataIndex(e);
  console.log(index); // 输出点击的数据索引
}

获取图例点击索引

获取图例点击的数据索引使用 xCharts.getLegendDataIndex(event) 方法。

属性

属性	类型	说明
event	Object	标准 event 事件，可绑定在 `tap`、`touchstart`、`touchmove`、`touchend` 中

返回的数据为点击图例的数组下标（-1 表示未找到对应的图例区域）。如遇到获取不到索引的问题，请参考上面 ToolTip 下的说明，需要处理 event 的坐标。

示例

以下是如何使用 getLegendDataIndex 方法的示例：

html

<canvas canvas-id="column" id="column" class="charts" @tap="tap" />
var xChartsInstance = {};

function drawCharts(id, data) {
  var opts = { type: "column", ...... };
  xChartsInstance[id] = new xCharts(opts);
}

function tap(e) {
  var index = xChartsInstance[e.target.id].getLegendDataIndex(e);
  console.log(index); // 输出点击图例的数据索引
}

滚动条拖拽事件

xCharts 提供了三个方法来处理图表滚动条拖拽事件：xCharts.scrollStart(event)、xCharts.scroll(event) 和 xCharts.scrollEnd(event)。

属性

方法	类型	说明
event	Object	标准 event 事件，`scrollStart`、`scroll` 和 `scrollEnd` 方法需要分别绑定在 `touchstart`、`touchmove`、`touchend` 中

支持图表滚动条拖拽事件的图表类型为：column、mount、line、area、mix、candle。

示例

以下是如何使用滚动条拖拽事件处理函数的示例：

html

<canvas canvas-id="column" id="column" class="charts" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" />
var xChartsInstance = {};

function drawCharts(id, data) {
  var opts = { type: "column", ...... };
  xChartsInstance[id] = new xCharts(opts);
}

function touchstart(e) {
  xChartsInstance[e.target.id].scrollStart(e);
}

function touchmove(e) {
  xChartsInstance[e.target.id].scroll(e);
}

function touchend(e) {
  xChartsInstance[e.target.id].scrollEnd(e);
  // 在 touchend 事件中也可以调用其他方法，例如：
  xChartsInstance[e.target.id].touchLegend(e);
  xChartsInstance[e.target.id].showToolTip(e);
}

动态设置滚动条

动态设置图表滚动条的位置使用 xCharts.translate(distance) 方法。

属性

属性	类型	说明
distance	Number	图表滚动条的横向偏移距离，应为负数，一般用于图表联动

此方法需要开启滚动条，支持图表滚动条拖拽事件的图表类型为：column、mount、line、area、mix、candle。

示例

以下是如何动态设置滚动条位置的示例：

javascript

var xChartsInstance = {};

function drawCharts(id, data) {
  var opts = { type: "column", ...... };
  xChartsInstance[id] = new xCharts(opts);
}

function translateCharts(id) {
  xChartsInstance[id].translate(-100); // 设置滚动条向左移动100单位
}

图表缩放

通过 xCharts.zoom(value) 方法可以对图表进行缩放操作。

属性

属性	类型	说明
value	Number	缩放比例系数，此数值同 `opts.xAxis.itemCount` 作用一致，通过修改单屏显示数据数量来控制数据显示密度

支持图表缩放方法的图表类型为：column、mount、line、area、mix、candle。

示例

以下是如何对图表进行缩放的示例：

javascript

var xChartsInstance = {};

function drawCharts(id, data) {
  var opts = { type: "column", ...... };
  xChartsInstance[id] = new xCharts(opts);
}

function zoomCharts(id) {
  xChartsInstance[id].zoom(8); // 设置图表的缩放比例为8
}

双指缩放

通过 xCharts.doubleZoom(event) 方法可以实现图表的双指缩放操作。

属性

属性	类型	说明
event	Object	标准 event 事件，需要绑定在 `touchmove` 事件中

支持图表缩放方法的图表类型为：column、mount、line、area、mix、candle。

示例

以下是如何实现图表双指缩放的示例：

html

<canvas canvas-id="column" id="column" @touchmove="touchmove" />
var xChartsInstance = {};

function drawCharts(id, data) {
  var opts = { type: "column", ...... };
  xChartsInstance[id] = new xCharts(opts);
}

function touchmove(e) {
  xChartsInstance[e.target.id].doubleZoom(e); // 注意：方法名应为 doubleZoom 而不是 dobuleZoom
}

更新配置或数据 ​

属性 ​

示例 ​

属性 ​

options 配置项 ​

示例 ​

属性 ​

示例 ​

属性 ​

示例 ​

属性 ​

示例 ​

属性 ​

示例 ​

属性 ​

示例 ​

属性 ​

示例 ​

更新配置或数据

属性

示例

属性

options 配置项

示例

属性

示例

属性

示例

属性

示例

属性

示例

属性

示例

属性

示例