TMUI4x

主题

TMUI4x2026-05-27
499
2m

数据缩放与平移 ​

适用于笛卡尔坐标系图表（折线、柱图、面积、K线），用于浏览大数据量。

效果 ​

在线预览
在线模拟尺寸:

配置 ​

typescript
{
  dataZoom: {
    enabled: true,    // 是否启用，默认 true
    start: 0,         // 初始视口起点 0~1，默认 0
    end: 1,           // 初始视口终点 0~1，默认 1
    minSpan: 0.1      // 最小视口宽度 0~1
  }
}

平移操作 ​

在图表上左右滑动即可平移视口，查看不同区间的数据。

大数据量示例 ​

一次传入上万条数据，通过 start/end 控制初始显示区间：

typescript
{
  data: generateBigData(10000),  // 10000 条数据
  series: [{ type: 'line', xField: 'date', yField: 'value' }],
  dataZoom: {
    start: 0.9,   // 初始只显示最后 10%
    end: 1
  }
}

边缘加载事件 reachEdge ​

当用户滑到数据头部或尾部附近（约 50px 范围内）时触发 reachEdge 事件，用于动态加载更多数据。

html
<x-chart :options="opts" @reachEdge="onEdge" />
typescript
import { ChartEdgeEvent } from '@/uni_modules/tmx-ui/core/canvas/chart/types.uts'

const onEdge = (e: ChartEdgeEvent) => {
  if (e.direction == 'end') {
    // 滑到尾部，加载更多新数据
    loadMoreData('after')
  } else if (e.direction == 'start') {
    // 滑到头部，加载更多历史数据
    loadMoreData('before')
  }
}

ChartEdgeEvent 类型：

typescript
import { ChartEdgeEvent } from '@/uni_modules/tmx-ui/core/canvas/chart/types.uts'

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

到达边缘后只触发一次，离开边缘区域再滑回来才会再次触发，避免重复加载。

性能优化 ​

组件内置了以下优化，无需手动处理：

  • LTTB 降采样：可见点数超过画布像素宽度时自动降采样，视觉无损
  • 密集跳过：相邻点距离 < 3px 时跳过点和命中区域的创建
  • 平移节流：滑动时每帧最多重绘一次
  • O(n) 去重：标签域构建使用 Map 替代 includes

纯展示模式 ​

如果图表只用于展示不需要交互，设置 preventScroll 为 false 允许页面滚动：

html
<x-chart :options="opts" :preventScroll="false" />
最近更新