图表

无依赖的 SVG 图表（几何计算位于 @thl-ui/charts）。颜色遵循语义 token，因此会随皮肤和暗色模式自动适配。如需更高级的图表，也可以同时使用任意图表库（Chart.js、ECharts）。

折线图与柱状图

VueReactAngular

vue

<div class="thl-row">
  <div class="thl-col-12 thl-col-lg-6"><ThlCard title="Sales overview"><ThlLineChart :series="salesSeries" :labels="months" area :height="260" /></ThlCard></div>
  <div class="thl-col-12 thl-col-lg-6"><ThlCard title="Yearly"><ThlBarChart :series="yearlySeries" :labels="years" :height="260" /></ThlCard></div>
</div>

tsx

<LineChart series={salesSeries} labels={months} area height={260} valueFormat={(v) => t.n(v)} />
<BarChart series={yearlySeries} labels={years} stacked />

html

<thl-line-chart [series]="salesSeries" [labels]="months" area [height]="260" />
<thl-bar-chart [series]="yearlySeries" [labels]="years" stacked />

饼图与迷你图（sparkline）

VueReactAngular

vue

<div class="thl-row">
  <div class="thl-col-12 thl-col-md-6"><ThlCard title="Visitors"><ThlPieChart :data="donut"><template #center><b style="font-size:22px;color:var(--thl-heading)">8,452</b><small>Total</small></template></ThlPieChart></ThlCard></div>
  <div class="thl-col-12 thl-col-md-6"><ThlCard title="Sparklines"><div class="thl-stack"><ThlSparkline :data="spark[0]" :width="200" :height="40" /><ThlSparkline :data="spark[1]" type="bar" color="success" :width="200" :height="40" /><ThlSparkline :data="spark[2]" type="area" color="danger" :width="200" :height="40" /></div></ThlCard></div>
</div>

tsx

<PieChart data={donut} donut={0.6} center={<b>8,452</b>} />
<Sparkline data={[5, 6, 2, 8, 9]} type="bar" color="success" width={200} height={40} />

html

<thl-pie-chart [data]="donut" [donut]="0.6" />
<thl-sparkline [data]="[5, 6, 2, 8, 9]" type="bar" color="success" [width]="200" [height]="40" />

Series 结构：{ name: string; data: number[]; color?: string }。饼图数据：{ label, value, color? }[]。

API

LineChart

<ThlLineChart> · import { ThlLineChart } from '@thl-ui/vue'

Prop	类型	默认值
`series`^*	`array`	—
`labels`^*	`array`	—
`height`	`number`	`280`
`area`	`boolean`	—
`smooth`	`boolean`	`true`
`legend`	`boolean`	`true`

BarChart

<ThlBarChart> · import { ThlBarChart } from '@thl-ui/vue'

Prop	类型	默认值
`series`^*	`array`	—
`labels`^*	`array`	—
`height`	`number`	`280`
`stacked`	`boolean`	—
`legend`	`boolean`	`true`

PieChart

<ThlPieChart> · import { ThlPieChart } from '@thl-ui/vue'

Prop	类型	默认值
`data`^*	`array`	—
`size`	`number`	`220`
`donut`	`number`	`0.6`
`legend`	`boolean`	`true`

插槽: center

Sparkline

<ThlSparkline> · import { ThlSparkline } from '@thl-ui/vue'

Prop	类型	默认值
`data`^*	`array`	—
`width`	`number`	`120`
`height`	`number`	`36`
`type`	`string`	`"line"`
`color`	`string`	`"primary"`

图表 ​

折线图与柱状图 ​

饼图与迷你图（sparkline） ​

API ​