One Chart

图表

OneFunnelChart

基础用法

传入逐级数据（通常由大到小）即可渲染漏斗：每级为梯形，上底宽按该级数值比例计算，下一级上底即本级下底，最后一级收拢为三角形。

转化漏斗曝光1000 100%点击420 42%注册190 19%72 7.2%
查看代码
import { OneFunnelChart } from '@geektech/one-chart';

const chart = new OneFunnelChart({
  title: '转化漏斗',
  data: [
    { name: '曝光', value: 1000 },
    { name: '点击', value: 420 },
    { name: '转化', value: 72 },
  ],
  showValues: true,
  showPercent: true,
});
chart.mount(document.querySelector('#app')!);

属性

OneFunnelChart 属性
名称签名说明
data{ name: string; value: number }[]漏斗数据项，按展示顺序逐级排列
showValuesboolean在梯形右侧显示数值，默认 false
showPercentboolean显示相对首级的百分比（首级 100%），默认 false
gapnumber相邻两级间距（px），默认 2
valueFormat(value: number) => string数值标签与 tooltip 的格式化

标签

名称显示在宽级内部居中（过窄的级别自动隐藏）；数值与百分比标签并排显示在梯形右侧。

Tooltip

悬停梯形显示级别名称、数值与相对首级的转化率，tooltip 默认开启，可传 tooltip: false 关闭或传入 { formatter } 自定义内容。

转化漏斗曝光1000 100%点击420 42%注册190 19%72 7.2%
查看代码
import { OneFunnelChart } from '@geektech/one-chart';

const chart = new OneFunnelChart({
  title: '转化漏斗',
  data: [
    { name: '曝光', value: 1000 },
    { name: '点击', value: 420 },
    { name: '转化', value: 72 },
  ],
  showValues: true,
  showPercent: true,
});
chart.mount(document.querySelector('#app')!);