TMUI4x

主题

TMUI4x2026-05-27
270
1.2m

数据格式 ​

ChartOptions 结构 ​

typescript
type ChartOptions = {
  data: ChartDatum[],              // 数据数组（必填）
  series: ChartSeriesOptions[],    // 系列配置（必填）
  padding?: ChartPadding,          // 内边距
  coord?: ChartCoordOptions,       // 坐标系配置
  xAxis?: ChartAxisOptions,        // X 轴配置
  yAxis?: ChartAxisOptions,        // Y 轴配置
  dataZoom?: DataZoomOptions,      // 数据缩放
  title?: ChartTitleOptions,       // 标题
  legend?: ChartLegendOptions,     // 图例
  tooltip?: ChartTooltipOptions,   // 提示框
  activeStyle?: ChartActiveStyle   // 高亮样式
}

数据 data ​

data 是一个 JSON 对象数组，每个对象是一条数据记录。字段名自由定义，通过 series 中的 xField、yField 等映射。

typescript
// 单系列
const data:UTSJSONObject[] = [
  { month: '1月', sales: 120 },
  { month: '2月', sales: 200 },
  { month: '3月', sales: 150 }
]

// 多系列（同一数据，不同字段）
const data:UTSJSONObject[] = [
  { month: '1月', sales: 120, cost: 80, profit: 40 },
  { month: '2月', sales: 200, cost: 110, profit: 90 },
  { month: '3月', sales: 150, cost: 95, profit: 55 }
]

系列 series ​

series 是一个数组，每个元素定义一个数据系列的绑定和渲染方式。

typescript
// 单系列折线
series: [{ type: 'line', xField: 'month', yField: 'sales' }]

// 多系列折线
series: [
  { type: 'line', xField: 'month', yField: 'sales', color: '#3b82f6' },
  { type: 'line', xField: 'month', yField: 'cost', color: '#f59e0b' },
  { type: 'line', xField: 'month', yField: 'profit', color: '#10b981' }
]

// 混合图（折线 + 柱图）
series: [
  { type: 'bar', xField: 'month', yField: 'sales' },
  { type: 'line', xField: 'month', yField: 'profit' }
]
最近更新