生态产品多个设计器现已发布正式版

查看生态总览
曦寒视图组件文档
取本页 Markdown

PieChart 饼图 new ​

一眼看出少量类目在整体中的占比。缺省画成环形，中心显示合计；也可以画成实心饼、上半环或按数值画半径的玫瑰图。

HeadlessStylesVueReactWeb Components

用法 ​

一行数据一个扇区：nameField 取扇区名字段，valueField 取数值字段；缺省画成环形，中心显示合计

访问来源

5 slices, total 10,000. Largest: 搜索 42.0%. Smallest: 广告 5.0%.

Data table
NameValueShare
搜索4,20042.0%
直接访问2,60026.0%
社交1,80018.0%
邮件9009.0%
广告5005.0%

组件结构 ​

加粗的是必需部件。

data-scope="pie-chart"：root · caption · legend · legend-item · legend-swatch · legend-label · viewport · plot · defs · pattern · pattern-line · slice · leader-line · slice-label · focus-ring · center · center-value · center-label · tooltip · tooltip-header · tooltip-row · tooltip-swatch · tooltip-value · tooltip-name · empty · summary · table-region · table

示例 ​

实心饼 ​

variant="pie" 去掉中心的空洞；扇区装得下时把占比写在扇区里

访问来源

5 slices, total 10,000. Largest: 搜索 42.0%. Smallest: 广告 5.0%.

Data table
NameValueShare
搜索4,20042.0%
直接访问2,60026.0%
社交1,80018.0%
邮件9009.0%
广告5005.0%

自定义中心 ​

center 插槽替换环形中心的缺省合计：这里写出结论，而不是再放一个数字

本迭代任务

3 slices, total 100. Largest: 已完成 72.0%. Smallest: 未开始 10.0%.

Data table
NameValueShare
已完成7272.0%
进行中1818.0%
未开始1010.0%

玫瑰图 ​

rose 让角度均分、半径按数值：面积与数值成正比，适合各项差距悬殊时拉开层次

各季度新增用户（千人）

4 slices, total 1,130. Largest: 四季度 40.7%. Smallest: 一季度 10.6%.

Data table
NameValueShare
一季度12010.6%
二季度21018.6%
三季度34030.1%
四季度46040.7%

半环 ​

sweep="half" 自 9 点扫到 3 点，高度只要一半，适合放在指标卡上方

预算执行

3 slices, total 100. Largest: 已支出 62.0%. Smallest: 已冻结 18.0%.

Data table
NameValueShare
已支出6262.0%
已冻结1818.0%
可用2020.0%

「其他」合并 ​

扇区多于 maxSlices 时最小的几块并成「其他」，排在最后、取中性色，提示框里列出被合并的各项

各省订单占比

5 slices, total 11,300. Largest: 广东 28.3%. Smallest: 山东 11.5%.

Data table
NameValueShare
广东3,20028.3%
浙江2,40021.2%
江苏2,10018.6%
山东1,30011.5%
Other2,30020.4%

数据更新 ​

换一组数据时扇区从当前角度走到新角度；关掉动画后直接画终态

第 1 周访问来源

4 slices, total 10,000. Largest: 搜索 42.0%. Smallest: 邮件 12.0%.

Data table
NameValueShare
搜索4,20042.0%
直接访问2,80028.0%
社交1,80018.0%
邮件1,20012.0%

标签内容 ​

labelContent 决定标签写什么：取 name-value 等内建写法，或给函数自己拼；返回空串的扇区不写标签

各品类营收

5 slices, total 956. Largest: 服饰 40.4%. Smallest: 图书 4.4%.

Data table
NameValueShare
服饰38640.4%
数码27428.7%
家居15816.5%
美妆9610.0%
图书424.4%

可见的数据表 ​

根的作用域交出 table：交给表格组件就是一张看得见的数据表，列名、数值格式与占比口径都与图同一份，不必在图下另写一遍数据

访问来源
各来源的访问量
Name
Value
Share
搜索
4,200
42.0%
直接访问
2,600
26.0%
社交
1,800
18.0%
邮件
900
9.0%
广告
500
5.0%

5 slices, total 10,000. Largest: 搜索 42.0%. Smallest: 广告 5.0%.

Data table
NameValueShare
搜索4,20042.0%
直接访问2,60026.0%
社交1,80018.0%
邮件9009.0%
广告5005.0%

从外面强调一块 ​

受控的 activeKey 写扇区名，图就强调那一块、中心与提示框跟着显示它：图外的筛选、列表或别的图都能这样指给读者看

访问来源

5 slices, total 10,000. Largest: 搜索 42.0%. Smallest: 广告 5.0%.

Data table
NameValueShare
搜索4,20042.0%
直接访问2,60026.0%
社交1,80018.0%
邮件9009.0%
广告5005.0%

设计指引 ​

何时使用 ​

  • 整体由少数几部分构成，读者要看的是「哪一块大、大约占多少」：渠道构成、预算分配、问卷选项占比。
  • 部分之和有意义，并且就是读者关心的那个整体。
  • 与柱状图或表格并排，给出同一组数据的构成视角。

何时不用 ​

  • 类目多于 6 个：改用直角坐标图的横向条形图，长度比角度容易比较。
  • 要比较几个相近的数值（如 23% 与 25%）：角度差异难以分辨，改用条形图。
  • 只有 2 个类目：使用统计数值或进度条，一个百分比就够了。
  • 数值有正有负，或部分之和不是一个有意义的整体：占比无从谈起。
  • 看构成随时间的变化：使用直角坐标图的百分比堆叠面积，一串饼图读不出趋势。

特性 ​

  • 数据是对象数组，每行一个扇区：nameField 指定扇区名所在的字段，valueField 指定数值所在的字段。数值为负时报错并在根上写 data-state="error"；全部为 0 或全部隐藏时显示空态。
  • 形态由 variant 切换：donut 环形（缺省），内半径是外半径的 0.6，中心显示可见扇区的合计；pie 实心饼，没有中心。
  • 扇区缺省按数值从大到小排列，自 12 点方向顺时针；sort="none" 按数据次序。读者从 12 点开始顺时针读，最大的一块在最前面最容易比较。
  • 超过 maxSlices（缺省 6，含「其他」）时，最小的几块并成「其他」，排在最后、取中性色；提示框里列出被合并的各项。只并入一项时不合并，保留它本身。
  • 颜色按数据次序依次取分类色 1–8；次序变化（改 sort、隐藏扇区）不改变颜色，同一个类目在不同图里保持同色。
  • 颜色不可用或不可靠时改用纹理区分扇区：强制色与打印下总是开启，作者在任意祖先上写 data-xh-chart-patterns 也会开启。扇区改用本色槽的斜线纹理填充并描出轮廓，图例与提示框的色标画成同一副纹理；「其他」不带纹理，仍是它自己的中性色。
  • sweep="half" 画成上半环（自 9 点扫到 3 点），适合放在指标卡上方；rose 画成南丁格尔玫瑰图：角度均分，半径按数值的平方根，面积与数值成正比。两者可以同时使用。
  • 扇区标签由 labels 控制：outside（缺省）画在外侧、带两段式引导线，两侧各排一列，自上而下推开避免重叠，放不下时去掉最小扇区的标签；inside 把占比写在扇区里，扇区装不下时不写；none 不画。视口太窄、外侧标签会把饼挤得太小时，外侧标签整体不画，只靠图例与提示框。
  • 标签写什么由 labelContent 决定：name-share 名字加占比（外侧缺省）、share 只写占比（内侧缺省）、name-value 名字加数值、name 只写名字、value 只写数值。也可以给一个函数自己拼：它拿到扇区的 id、name（「其他」已换成文案）、原始的 value 与 share、按 locale 与 format 写好的 formatted.value / formatted.share，以及是不是「其他」；返回空串的扇区不写标签，外侧也不画它的引导线。内侧标签照样先量再放，写得越长越容易装不下。
  • 相邻扇区之间留 --xh-chart-gap（2px）的表面缝，靠缝区分扇区而不是靠描边；缝宽沿半径保持不变。
  • 悬停或键盘聚焦一个扇区时，其余扇区淡出到 --xh-chart-dim-alpha；被指着的扇区不位移、不放大，位移会改变读者对面积的判断。
  • 图例一个扇区一项，点击切换显隐；隐藏的扇区从合计中移除，其余扇区的占比随之重新计算。
  • 环形中心是 HTML 叠层，缺省显示合计与说明文字（translations.centerLabel，缺省 Total）；悬停、键盘聚焦或联动到一个扇区时换成它的占比与名字，离开后回到合计；Vue 用 center 插槽、React 用 renderCenter、Web Components 在 center 部件里写内容，都可以替换。
  • format 指定数值格式（数字格式或函数），提示框、标签、中心合计与数据表共用；占比固定写成一位小数的百分数。
  • 多张图接到同一个受控的 activeKey 上时，饼图按扇区名与其他图的类目对齐：在柱状图上悬停「华东」，饼图的「华东」扇区一起指示。
  • pending 表示正在重新取数：保留上一帧、整体降低不透明度并在根上写 aria-busy。首次取数、手里还没有扇区时，空态写 translations.loadingText（缺省 Loading…）并转一个圈，取完仍没有数据才写 emptyText。
  • 首次出现时整圈从起始角顺着扫开，标签与引导线等扫开的边缘到了才出现，环形中心等整圈扫完再淡入，合计从 0 数上去，数据晚于挂载到达（异步取数，或 Web Components 连上之后才赋 data）时同样播这段入场；之后的数据变化与图例切换从当前角度插值到新角度，合计从旧值滚到新值，隐藏的扇区收拢并淡出后才移除。按数据次序排列（sort="none"）时扇区不换位，只在原处伸缩。
  • animated={false}（Web Components 写 animated="false"）关闭过渡，数据一变直接画终态。系统开了减弱动效或容器写了 data-motion="reduce" 时几何直接到位，只保留淡入淡出。视口尺寸变化后的重排不播过渡。
  • 过渡的快慢由动效令牌决定，组件从绘图区的计算样式读取：入场取 --xh-motion-duration-reveal（缺省 960ms），数据更新与图例切换取 --xh-motion-duration-morph（缺省 400ms）。在图或它的容器上改写它们，例如 style="--xh-motion-duration-reveal: 1s"，只影响这张图；入场的曲线取 --xh-motion-ease-enter，更新取 --xh-motion-ease-continuous。
  • 三个适配器的作者侧写法不同，最终 DOM 一致：Vue 与 React 不写默认内容时铺开缺省结构（标题、图例、视口与绘图区、环形中心、空态、提示框）；Web Components 侧作者写外壳（root、caption、legend、viewport 与其中空的 <svg> plot，可选 center、empty 与 tooltip），扇区、标签与图例项由元素生成进去。
  • Web Components 侧的数据与数值格式只走 JS property；字段名、形态、次序、max-slices、标签、标签内容（label-content，内建写法）与 active-key 另有同名属性；自己拼标签的函数给 labelContent property 赋值。宿主元素缺省是行内元素，放进 flex / grid 时要给它一个宽度。

最佳实践 ​

  • 为图写标题：caption 是图的可访问名称，饼图尤其需要说明「整体」是什么。
  • 扇区保持在 5 个以内；更多的类目交给「其他」，或者换成条形图。
  • 需要读出准确数字时，把 labels 留在 outside，或者把 api.table 交给表格组件（Vue 与 React 从根的作用域插槽 / 函数式 children 取 table，Web Components 读元素的 table），列名、数值格式与占比口径都与图同一份。
  • 环形中心写整体的合计或一个结论（如「完成 72%」），不要再放一张小图。
  • 同一页的几张饼图要比较时，保持相同的 sort 与颜色次序，读者才能按位置对照。

反模式 ​

  • 用 3D 饼图或把扇区拉出来强调：透视与位移都会歪曲面积。
  • 用多张饼图表达时间变化：读者要在几张图之间来回比角度，改用堆叠面积或条形图。
  • 占比之和不是 100% 的数据（多选题的选择率）：扇区面积没有含义。
  • 把图例当作读取数值的唯一途径：数值要能从标签、提示框、摘要或数据表读到。

API 参考 ​

产物 ​

层值
自定义元素<xh-pie-chart>
Vue 组件XhPieChartCaption XhPieChartCenter XhPieChartEmpty XhPieChartLegend XhPieChartPlot XhPieChartRoot XhPieChartTooltip XhPieChartViewport
组合式函数usePieChart
状态机pieChartMachine
皮肤@xihan-ui/styles/pie-chart.css

事件 ​

自定义元素将载荷放在 detail；Vue 使用同名 emit。

事件载荷说明
hidden-series-changePieLabelDetails图例切换显隐；detail 为 { hiddenSeries: string[] }
active-key-changeChartActiveKeyChangeDetails指针或键盘换了激活的扇区；detail 为 { activeKey }，收起时为 null
datum-activeChartDatumDetails悬停或聚焦到某个扇区；detail 为扇区详情，收起时为 null
datum-pressChartDatumDetails指针点击、Enter 或 Space 按在某个扇区上；detail 为扇区详情

插槽 ​

仅列出带载荷的插槽。

Vue 组件插槽载荷说明
XhPieChartCenterdefaultPieChartCenterSlotProps
XhPieChartRootdefaultPieChartRootSlotProps自行摆放部件；不写时铺开缺省结构：图例、视口（绘图区、环形中心与空态）、提示框。
XhPieChartRootcaption—缺省结构里的标题内容。
XhPieChartRootcenterPieChartCenterSlotProps缺省结构里的环形中心内容。
XhPieChartRoottooltipPieChartTooltipSlotProps缺省结构里的提示框内容。
XhPieChartRootempty—缺省结构里的空态内容。
XhPieChartTooltipdefaultPieChartTooltipSlotProps

React 适配器 props ​

只列各组件自己声明的那些：继承自 ComponentPropsWithRef 的 DOM 属性不在其中，根组件上与上面 Props 表同名的也不重复列。Vue 的对应物是上面的插槽表。

React 组件属性类型必填说明
XhPieChartCenterchildrenSlotChildren<PieChartCenterSlotProps>替换缺省内容；函数式 children 拿到合计与激活的扇区。
XhPieChartRootdatareadonly ChartRow[]数据：对象数组，每行一个扇区。
XhPieChartRootnameFieldstring扇区名所在的字段。
XhPieChartRootvalueFieldstring数值所在的字段。
XhPieChartRootvariantPieVariant形态，缺省 donut。
XhPieChartRootroseboolean南丁格尔玫瑰图：角度均分，半径按数值。
XhPieChartRootsweepPieSweep扫过的角度，缺省 full。
XhPieChartRootsortPieSort扇区次序，缺省 descending。
XhPieChartRootmaxSlicesnumber最多保留几个扇区（含「其他」），缺省 6。
XhPieChartRootlabelsPieLabels扇区标签，缺省 outside。
XhPieChartRootlabelContentPieLabelContent | ((details: PieLabelDetails) => string)扇区标签写什么：内建写法之一，或自己拼的函数；缺省外侧名字加占比、内侧只写占比。
XhPieChartRootformatNumberFormatSpec | ((value: number) => string)数值格式。
XhPieChartRoothiddenSeriesstring[]隐藏的扇区（受控）。
XhPieChartRootdefaultHiddenSeriesstring[]初始隐藏的扇区（非受控）。
XhPieChartRootactiveKeyChartKey | null激活的键（受控）：与别的图联动时是类目名。
XhPieChartRootpendingboolean数据重取中：保留上一帧、整体降低不透明度。
XhPieChartRootanimatedboolean播放过渡动画，缺省 true；false 时直接画终态。
XhPieChartRootlocalestring
XhPieChartRoottranslationsPartial<PieChartTranslations>
XhPieChartRootonHiddenSeriesChangePieChartProps['onHiddenSeriesChange']
XhPieChartRootonActiveKeyChangePieChartProps['onActiveKeyChange']
XhPieChartRootonDatumActivePieChartProps['onDatumActive']
XhPieChartRootonDatumPressPieChartProps['onDatumPress']
XhPieChartRootcaptionReactNode缺省结构里的标题内容。
XhPieChartRootrenderCenter(props: PieChartCenterSlotProps) => ReactNode缺省结构里的环形中心内容。
XhPieChartRootrenderTooltip(props: PieChartTooltipSlotProps) => ReactNode缺省结构里的提示框内容。
XhPieChartRootemptyReactNode缺省结构里的空态内容。
XhPieChartRootchildrenSlotChildren<PieChartRootSlotProps>自行摆放部件；不写时铺开缺省结构：图例、视口（绘图区、环形中心与空态）、提示框。
XhPieChartTooltipchildrenSlotChildren<PieChartTooltipSlotProps>替换缺省内容；函数式 children 拿到激活的扇区与缺省的内容模型。

状态 ​

公开状态写入 data-state。

部件取值
root'error' | undefined
tooltip'visible' | 'hidden'
empty'loading' | undefined

以下名称仅用于内部状态机。

状态：idle

connect API ​

getXxxProps() 返回对应部件的宿主属性。

成员类型说明
modelPieModel管线产物：扇区、布局、场景与无障碍模型。
sceneScene要画的场景；尚未测量时为空场景。
overlayPieOverlay前景层：焦点环画在扇区之上。
measuredboolean视口尚未测量（服务端与首帧）。
emptyboolean没有可画的数据（全部为 0、没有数据或全部隐藏）。
legendItemsreadonly PieLegendItem[]
patternsreadonly ChartPattern[]各扇区的纹理：画在绘图区的 defs 里，强制色、打印与环境开启纹理时扇区用它填充；「其他」没有纹理。
activeChartDatumDetails | null激活的扇区；没有时为 null。
tooltipPieTooltipModel | null提示框内容：从没露过面时为 null；收起后留着上一回的内容供退场淡出，露不露看 getTooltipProps 的 data-state。
center{ readonly value: string, readonly label: string }环形中心的缺省内容：可见扇区的合计与说明文字。
summarystring
tableTableModel数据表模型：扇区名、数值、占比三列。
emptyTextstring
tableCaptionstring
activeKeyChartKey | null
hiddenSeriesstring[]
toggleSeries(id: string) => void切换某个扇区的显隐。
setFocusedDatum(ref: { seriesId: string, index: number } | null) => void移动键盘锚点：只改锚点，不移动 DOM 焦点，也不派发回调。
markTag(mark: Mark) => PieMarkTag
getRootProps() => T['element']
getCaptionProps() => T['element']
getLegendProps() => T['element']
getLegendItemProps(item: PieLegendItem) => T['button']
getLegendSwatchProps(item: PieLegendItem) => T['element']
getLegendLabelProps(item: PieLegendItem) => T['element']
getViewportProps() => T['element']
getPlotProps() => T['element']
getDefsProps() => T['element']绘图区的第一个子节点：各扇区的纹理定义在这里。
getPatternProps(pattern: ChartPattern) => T['element']
getPatternLineProps(pattern: ChartPattern) => T['element']
getMarkProps(mark: Mark) => T['element']
getCenterProps() => T['element']
getCenterValueProps() => T['element']
getCenterLabelProps() => T['element']
getTooltipProps() => T['element']
getTooltipHeaderProps() => T['element']
getTooltipRowProps(row: PieTooltipRow) => T['element']
getTooltipSwatchProps(row: PieTooltipRow) => T['element']
getTooltipValueProps(row: PieTooltipRow) => T['element']
getTooltipNameProps(row: PieTooltipRow) => T['element']
getEmptyProps() => T['element']
getSummaryProps() => T['element']
getTableRegionProps() => T['element']数据表的视觉隐藏区域：块级、1px、裁掉，表格放在里面；隐藏不写在表格上，表格的高度收不住。
getTableProps() => T['element']

无障碍 ​

键盘 ​

规格出处：W3C APG

按键生效条件行为
Tab / Shift+Tab总是绘图区只占一个 Tab 位：焦点落到锚点扇区，首次为 12 点方向的第一个扇区；图例同样只占一个 Tab 位
ArrowRight / ArrowDown焦点在绘图区顺时针移到下一个扇区；已在最后一个则原地不动
ArrowLeft / ArrowUp焦点在绘图区逆时针移到上一个扇区
Home焦点在绘图区第一个扇区
End焦点在绘图区最后一个扇区
Enter / Space焦点在绘图区报告聚焦的扇区（onDatumPress）
Escape提示框显示着收起提示框，焦点留在原处；按键不拦截，外层浮层的关闭仍归它自己
ArrowLeft / ArrowRight / Home / End焦点在图例在图例项之间移动，左右键跟随文字方向的视觉次序
Enter / Space焦点在图例项切换该扇区的显隐（原生按钮行为）

ARIA ​

以下属性由 connect 生成。

部件属性值
rootaria-busy'true' | undefined
legendaria-labeltranslations.legendLabel
legendrole'toolbar'
legend-itemaria-pressed'false' | 'true'
legend-swatcharia-hidden'true'
plotaria-describedbysummary 部件的 id
plotaria-roledescriptiontranslations.chartRoleDescription
plotrole'graphics-document'
tooltiparia-hidden'true'
markaria-hidden'true'
  • 根是 <figure>，可访问名称来自 caption；不放标题时在根上写 aria-label 或 aria-labelledby。绘图区念同一个名字：有 caption 时引用它，没有时沿用根上的那一条。
  • 绘图区是 role="graphics-document"，aria-describedby 指向组件生成的摘要；每个扇区是 role="graphics-symbol"，名称取 translations.datumLabel（缺省「名字, 数值, 占比」），务必按本地语言改写。
  • 绘图区只占一个 Tab 位，焦点落在扇区上；右键与下键顺时针走到下一个扇区，左键与上键逆时针，Home / End 到第一个与最后一个。焦点环画在扇区之外，只在键盘聚焦时出现。
  • 引导线、扇区标签与环形中心都 aria-hidden 或不在可访问树中：它们的内容已在扇区的名称里；提示框同样 aria-hidden。
  • 组件在根内生成一段摘要与一张数据表，视觉隐藏、对读屏可见：摘要写扇区数、合计以及最大与最小的扇区（模板是 translations.summary），数据表三列是扇区名、数值与占比。
  • 图例是 role="toolbar"，每一项是 <button aria-pressed>，按下表示扇区可见；图例整体只占一个 Tab 位。
  • 颜色不是区分扇区的唯一线索：外侧标签写出扇区名，图例与提示框也写出名字；强制色与打印下扇区还有各自的纹理。
  • 过渡只改画面：扇区的名称、合计、摘要与数据表在数据变化的那一刻就按新数据更新；收场中的扇区 aria-hidden、不可聚焦。

样式参考 ​

皮肤 ​

@xihan-ui/styles/pie-chart.css 按 [data-scope="pie-chart"][data-part="root"] 部件选择器书写，发布产物以挂载类 .xh-scope-pie-chart 代替其中的 data-scope（特异性相同），位于 xihan.components 层。覆盖样式使用 xihan.overrides，部件选择器照常可用。

forced-colors: active 下另有一套规则：颜色交给系统，边框与状态标记改用系统色关键字。

数据属性 ​

由 connect 生成；条件不成立时不输出无值属性。

部件属性值
rootdata-loading''（条件成立时才出现）
rootdata-state'error' | undefined
rootdata-xh-chart-part'root'
captiondata-xh-chart-part'caption'
legenddata-xh-chart-part'legend'
legend-itemdata-pressed''（条件成立时才出现）
legend-itemdata-valueitem.id
legend-itemdata-xh-action-control''
legend-itemdata-xh-action-profile'text'
legend-itemdata-xh-action-size'xs'
legend-itemdata-xh-action-variant'ghost'
legend-itemdata-xh-chart-part'legend-item'
legend-itemdata-xh-chart-patternpatternAttr(item.slot, item.other)
legend-itemdata-xh-chart-slotslotAttr(item.slot, item.other)
legend-swatchdata-xh-chart-part'legend-swatch'
viewportdata-xh-chart-part'viewport'
plotdata-xh-chart-part'plot'
defsdata-xh-chart-part'defs'
patterndata-xh-chart-part'pattern'
patterndata-xh-chart-slotundefined | String(pattern.slot)
pattern-linedata-xh-chart-part'pattern-line'
centerdata-drawing''（条件成立时才出现）
centerdata-placement'top' | undefined
tooltipdata-placement'top' | 'bottom'-'right' | 'left' | undefined
tooltipdata-state'visible' | 'hidden'
tooltipdata-xh-chart-part'tooltip'
tooltip-headerdata-xh-chart-part'tooltip-header'
tooltip-rowdata-series-idrow.key
tooltip-rowdata-xh-chart-part'tooltip-row'
tooltip-rowdata-xh-chart-patternpatternAttr(row.slot, row.other)
tooltip-rowdata-xh-chart-slotslotAttr(row.slot, row.other)
tooltip-swatchdata-xh-chart-part'tooltip-swatch'
tooltip-valuedata-xh-chart-part'tooltip-value'
tooltip-namedata-xh-chart-part'tooltip-name'
emptydata-loading''（条件成立时才出现）
emptydata-state'loading' | undefined
emptydata-xh-chart-part'empty'
emptydata-xh-loading-ring''
markdata-dimmed''（条件成立时才出现）
markdata-drawing''
markdata-xh-chart-partmark.part | undefined
markdata-xh-chart-slotslotAttr(slice.slot, slice.other) | undefined

CSS 变量 ​

本组件公开覆盖槽由独立皮肤的实际消费位生成；默认来源、作用部件和状态均与 CSS 同源。

变量部件CSS 属性状态默认来源说明
--xh-pie-chart-center-gapcentergapdefault--xh-space-0_5pie-chart 的 center 部件 gap 覆盖槽。
--xh-pie-chart-center-value-font-sizecenter-valuefont-sizedefault--xh-text-heading-3-sizepie-chart 的 center-value 部件 font-size 覆盖槽。
--xh-pie-chart-empty-gapemptygapstate=loading--xh-space-2pie-chart 的 empty 部件 gap 覆盖槽。
--xh-pie-chart-gaprootgapdefault--xh-space-3pie-chart 的 root 部件 gap 覆盖槽。
--xh-pie-chart-heightviewportblock-sizedefault--xh-chart-heightpie-chart 的 viewport 部件 block-size 覆盖槽。
--xh-pie-chart-legend-gaplegendgapdefault--xh-space-1pie-chart 的 legend 部件 gap 覆盖槽。
--xh-pie-chart-legend-swatch-radiuslegend-swatchborder-radiusdefault--xh-shape-insetpie-chart 的 legend-swatch 部件 border-radius 覆盖槽。
--xh-pie-chart-series-colorlegend-swatch
pattern-line
slice
tooltip-swatch		background
border
fill
stroke		@media (forced-colors: active)
@media print
mark=line
where([data-xh-chart-patterns])
xh-chart-pattern
xh-chart-pattern=1
xh-chart-pattern=2
xh-chart-pattern=3
xh-chart-pattern=4
xh-chart-pattern=5
xh-chart-pattern=6
xh-chart-pattern=7
xh-chart-pattern=8
xh-chart-patterns
xh-chart-slot=1
xh-chart-slot=2
xh-chart-slot=3
xh-chart-slot=4
xh-chart-slot=5
xh-chart-slot=6
xh-chart-slot=7
xh-chart-slot=8		--xh-chart-categorical-1
--xh-chart-categorical-2
--xh-chart-categorical-3
--xh-chart-categorical-4
--xh-chart-categorical-5
--xh-chart-categorical-6
--xh-chart-categorical-7
--xh-chart-categorical-8		pie-chart 的 legend-swatch、pattern-line、slice、tooltip-swatch 部件 background、border、fill、stroke 覆盖槽。
--xh-pie-chart-slice-gaproot--xh-_chart-metric-gapdefault--xh-chart-gappie-chart 的 root 部件 --xh-_chart-metric-gap 覆盖槽。
--xh-pie-chart-slice-radiusroot--xh-_chart-metric-radiusdefault--xh-shape-insetpie-chart 的 root 部件 --xh-_chart-metric-radius 覆盖槽。
--xh-pie-chart-tooltip-gaptooltipgapdefault--xh-space-1pie-chart 的 tooltip 部件 gap 覆盖槽。
--xh-pie-chart-tooltip-pxtooltippadding-inlinedefault--xh-surface-pad-smpie-chart 的 tooltip 部件 padding-inline 覆盖槽。
--xh-pie-chart-tooltip-pytooltippadding-blockdefault--xh-surface-pad-smpie-chart 的 tooltip 部件 padding-block 覆盖槽。
--xh-pie-chart-tooltip-radiustooltipborder-radiusdefault--xh-shape-overlaypie-chart 的 tooltip 部件 border-radius 覆盖槽。
--xh-pie-chart-tooltip-row-gaptooltip-rowgapdefault--xh-space-2pie-chart 的 tooltip-row 部件 gap 覆盖槽。
--xh-pie-chart-tooltip-shadowtooltipbox-shadowdefault--xh-material-frosted-shadowpie-chart 的 tooltip 部件 box-shadow 覆盖槽。
--xh-pie-chart-tooltip-swatch-radiustooltip-swatchborder-radiusdefault--xh-shape-insetpie-chart 的 tooltip-swatch 部件 border-radius 覆盖槽。

动效 ​

动效角色：状态 · 出现（见动效规范）。

共享关键帧 xh-fade-in 由 family/motion.css 提供，皮肤 @import 它，单独引入仍成立；background-color · border-color · opacity · visibility 走 transition 过渡。时长与缓动读动效令牌，改令牌即改全局节奏。

系统开启减弱动效时由令牌层统一收敛，皮肤不另作判断。

RTL ​

皮肤用逻辑属性排布（inline-start 一族），dir="rtl" 下自动镜像。

  • 绘图区不随文字方向镜像：扇区自 12 点顺时针排列，右键始终是顺时针的下一个。
  • 图例、标题与提示框的内容随文字方向排列，图例的左右键跟随视觉次序翻转。

Released under The MIT License

Copyright ©2021-Present XiHanFun and contributors.