TMUI4x

主题

TMUI4x2026-05-27
542
2.3m

快速上手 ​

平台兼容 ​

Web/H5HarmonyandriodIOSUTSUNIAPP-X SDKversion
☑☑☑☑☑4.87+1.1.21

此图表为原生UTS 通过Canvas绘制，格式采用Antv F2图表数据格式进行配置和渲染。因此它是一个 轻量级图表。用于轻量级展示，操作时非常合适。

建议参考我的demo示例来使用数据格式一定要定义类型我文档可能展示数据格式时没有写类型。以demo示例为准写配置，你们 使用时一定要使用类型定义

ts
import { ChartOptions, ChartSeriesOptions, ChartClickEvent } from "@/uni_modules/tmx-ui/core/canvas/chart/types.uts"

效果 ​

在线预览
在线模拟尺寸:

基本用法 ​

html
<template>
  <x-chart :options="chartOptions" />
</template>

<script lang="ts" setup>
import { ChartOptions, ChartSeriesOptions, ChartClickEvent } from "@/uni_modules/tmx-ui/core/canvas/chart/types.uts"
const chartOptions:ChartOptions = {
  data: [
    { month: '1月', value: 23 },
    { month: '2月', value: 35 },
    { month: '3月', value: 18 },
    { month: '4月', value: 42 },
    { month: '5月', value: 31 },
    { month: '6月', value: 27 }
  ],
  series: [{ type: 'line', xField: 'month', yField: 'value' }]
}
</script>

组件属性 ​

属性类型默认值说明
widthstring'100%'图表宽度，支持 CSS 单位
heightstring'280px'图表高度，支持 CSS 单位
optionsChartOptionsnull图表配置，为 null 时显示示例图
preventScrollbooleanfalse是否拦截触摸事件阻止页面滚动。需要平移交互时设为 true
interactivebooleantrue是否启用交互（点击高亮、提示框）。设为 false 则纯展示，无选中效果

组件事件 ​

事件回调参数说明
clickChartClickEvent点击数据点时触发
reachEdgeChartEdgeEvent平移到数据头部或尾部边缘时触发，用于动态加载更多数据
typescript
import { ChartClickEvent, ChartEdgeEvent, ChartDatum } from '@/uni_modules/tmx-ui/core/canvas/chart/types.uts'

// type ChartClickEvent = {
//   seriesType: string,   // 图表类型：'line' | 'bar' | 'pie' 等
//   dataIndex: number,    // 数据索引
//   title: string,        // 数据标签（如 '4月'）
//   record: ChartDatum,   // 当前点击的数据记录
//   data: ChartDatum[]    // 完整数据数组
// }

// type ChartEdgeEvent = {
//   direction: string,    // 'start' 滑到头部 | 'end' 滑到尾部
//   start: number,        // 当前视口起点 0~1
//   end: number,          // 当前视口终点 0~1
//   total: number         // 当前总数据条数
// }

组件方法 ​

通过 ref 调用：

html
<x-chart ref="chartRef" :options="opts" />
方法参数说明
setOptions(options: ChartOptions)动态更新图表配置，会触发入场动画
redraw无强制重绘当前图表
最近更新