组件/Custom Chart 自定义图表

Custom Chart 自定义图表

组合式逃生舱:TxChart 容器 + 轴/网格/系列原语,自由拼装折线、面积、柱、散点与环形。

Verified自 0.1.0

Custom Chart 自定义图表

基础用法

kumo 的逃生舱是把原始 echarts options 透传给低层 Chart;这里没有 echarts,逃生舱是组合TxChart 建立坐标系(测量容器、推导比例尺、分配色板),轴/网格/系列作为子组件挂进它的默认插槽。系列统一 accessor 取数(key 或 (d, i) => v),不给 color 时按挂载顺序取分类色。x/y 值域缺省由所有系列的数据并集推导,xDomain/yDomain 可显式覆盖。

柱线复合

band 轴 + 柱 + 折线

同一坐标系里柱状与折线共存;band 值映射到带中心。

示例加载中...

环形图

TxArcSeries

无轴模式:TxChart 只当尺寸容器,弧形系列自己布局。

示例加载中...

自定义提示框

overlay 插槽 + TxChartTooltip

follow='x' 时提示框垂直位置固定,只横向跟随。

示例加载中...

组合规则

  • 系列/轴/网格必须是 <TxChart> 的子孙——它们通过注入的图表上下文拿比例尺,游离使用会抛错。
  • 多个 TxBarSeries:无 stack 并排分道,同 stack 键堆叠;y 值域自动覆盖堆叠总量。
  • TxArcSeries 不依赖坐标系,可与无轴 TxChart 单独使用。
  • #overlay 插槽是 SVG 之上的 DOM 层(pointer-events: none),放提示框与标注。
  • 深度定制可 useChartContext() 自写图层,或从 TxChart 实例的 context 暴露读取比例尺。

API

Chart Props

属性名类型默认值说明
heightnumber350像素高;设 aspectRatio 时忽略。
aspectRationumber | string容器宽高比。
widthnumber容器实测显式宽度(SSR/测试用)。
paddingnumber | Partial<ChartPadding>24留给轴与标签的内边距。
xType'linear' | 'time' | 'band''linear'x 比例尺类型。
xDomain / yDomain数组自动并集显式值域。
yNicebooleantruey 值域取整。
ariaDescriptionstring无障碍描述。

系列 Props(共同)

属性名类型说明
dataT[]数据行。
x / ykeyof T | (d, i) => vaccessor。
colorstring缺省按挂载顺序取分类色。

TxLineSeries 另有 curvelinear/monotone/natural/step)、strokeWidthshowSymboldashedTxAreaSeriesgradient(默认开)与 fillOpacityTxBarSeriesstackbarWidthradiusTxScatterSeriesr(常量或 accessor);TxArcSeriesvalue/name?/color? accessor 加 innerRadius/padAngle/cornerRadius,点击发 slice-click

ChartTooltip Props

属性名类型默认值说明
openboolean | 'auto''auto''auto' 指针在图内即显示;布尔为受控。
follow'both' | 'x''both'x 固定垂直位置。
offsetnumber12指针与提示框间距。
title / rows / hiddenCount默认内容;插槽整体替换。