t-xcharts

XCharts 图表

组件介绍

t-xcharts 是 tui-plus-vapor 中的图表容器组件，底层基于纯 UTS + Canvas 绘制，统一承接柱状图、折线图、饼图、雷达图、仪表盘、地图、混合图等多种图表类型。真正的图表配置通常写在各图表示例目录下的 index.uts 中，因此这个组件文档主要说明容器接入方式、事件、实例能力以及图表类型入口。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

最基础的用法是监听 initFinished，拿到图表实例后再设置配置。

vue

<template>
  <t-xcharts
    ref="chartsRef"
    class="w-690 h-500"
    @initFinished="onInitFinished"
    @select="onSelect"
  ></t-xcharts>
</template>

<script setup>
const chartsRef = ref(null)
let chartsInstance = null

function onInitFinished(charts) {
  chartsInstance = charts
  chartsInstance.setOption({
    type: 'column',
    categories: ['一月', '二月', '三月', '四月', '五月'],
    series: [
      {
        name: '销量',
        data: [{ value: 20 }, { value: 45 }, { value: 30 }, { value: 55 }, { value: 40 }]
      }
    ]
  })
}

function onSelect(e) {
  console.log('选中数据：', e)
}
</script>

在当前项目里，更推荐的组织方式是：

每个图表类型单独放一个页面，如 xcharts/column/column.uvue
每个图表类型目录下放一个 index.uts，集中维护这一类图表的配置示例
入口页 pages/xcharts/xcharts.uvue 或 xcharts/index/index.uvue 只负责导航到各图表页面

图表类型

当前项目中的图表顺序与 pages/xcharts/xcharts.uvue 保持一致：

图表类型	中文名	示例页面	配置文件
`column`	柱状图	`xcharts/column/column.uvue`	`xcharts/column/index.uts`
`mount`	山峰图	`xcharts/mount/mount.uvue`	`xcharts/mount/index.uts`
`bar`	条状图	`xcharts/bar/bar.uvue`	`xcharts/bar/index.uts`
`line`	折线图	`xcharts/line/line.uvue`	`xcharts/line/index.uts`
`area`	区域图	`xcharts/area/area.uvue`	`xcharts/area/index.uts`
`pie`	饼状图	`xcharts/pie/pie.uvue`	`xcharts/pie/index.uts`
`ring`	圆环图	`xcharts/ring/ring.uvue`	`xcharts/ring/index.uts`
`rose`	玫瑰图	`xcharts/rose/rose.uvue`	`xcharts/rose/index.uts`
`radar`	雷达图	`xcharts/radar/radar.uvue`	`xcharts/radar/index.uts`
`arcbar`	进度条	`xcharts/arcbar/arcbar.uvue`	`xcharts/arcbar/index.uts`
`gauge`	仪表盘	`xcharts/gauge/gauge.uvue`	`xcharts/gauge/index.uts`
`funnel`	漏斗图	`xcharts/funnel/funnel.uvue`	`xcharts/funnel/index.uts`
`word`	词云图	`xcharts/word/word.uvue`	`xcharts/word/index.uts`
`candle`	K 线图	`xcharts/candle/candle.uvue`	`xcharts/candle/index.uts`
`map`	地图图	`xcharts/map/map.uvue`	`xcharts/map/index.uts`
`scatter`	散点图	`xcharts/scatter/scatter.uvue`	`xcharts/scatter/index.uts`
`mix`	混合图	`xcharts/mix/mix.uvue`	`xcharts/mix/index.uts`

更详细的图表配置说明请看 charts/index 及图表分类侧边栏中的旧版 charts 专题文档。

Props

属性名	说明	类型	默认值
`size`	组件尺寸	`string`	`'medium'`
`type`	组件主题类型	`string`	`''`
`disabled`	是否禁用	`boolean`	`false`
`hover`	是否启用点击效果	`boolean`	`false`
`effect`	组件显示主题	`string`	`'normal'`

Events

事件名	说明	回调参数
`initFinished`	Canvas 初始化完成时触发	图表实例
`select`	图表交互选中时触发	图表选中数据

Methods

这里的 Methods 指通过 initFinished 拿到的图表实例能力，而不是组件 ref 直接暴露的方法。

方法名	说明
`setOption`	设置图表完整配置
`updateData`	局部更新图表数据
`resize`	图表尺寸变化后重新计算布局

t-xcharts ​

组件介绍 ​

平台兼容 ​

基础用法 ​

图表类型 ​

Props ​

Events ​

Methods ​