图表
OnePieChart
基础用法
饼图按数值占比切分圆形，适合展示整体构成。单数据项会渲染为整圆。
Tooltip
鼠标悬停到扇区上显示数据项名称、数值与百分比，tooltip 默认开启，可传 tooltip: false 关闭或传入 { formatter } 自定义内容。
查看代码
import { OnePieChart } from '@geektech/one-chart';
const chart = new OnePieChart({
title: '渠道占比',
data: [
{ name: '华东', value: 30 },
{ name: '华南', value: 50 },
{ name: '华北', value: 20 },
],
showLabels: true,
innerRadius: 'auto',
});
chart.mount(document.querySelector('#app')!);属性
| 名称 | 签名 | 说明 |
|---|---|---|
data | { name: string; value: number }[] | 数据项，value 须为有限正数 |
innerRadius | number | 'auto' | 内半径：> 0 时渲染环形图，auto 取外半径的 55% |
showLabels | boolean | 在扇区外侧显示百分比标签，默认 false |
labelFormat | (value, total, percent) => string | 自定义标签文本 |
startAngle / endAngle | number（度） | 起止角度，默认 -90 到 270（12 点钟方向起绕满一周） |
padAngle | number（度） | 扇区间隙，默认 1° |
环形图与标签
设置 innerRadius 为 'auto' 或任意正值即可得到环形图；标签默认显示百分比，可用 labelFormat 输出数值与占比的组合。
- 扇区角度 = value / 总和 × 总弧度，比例精确。
- 默认带 1° 扇区间隙；铺满整圈时自动使用两段半圆弧路径。