One Chart

图表

OneLineChart

基础用法

折线图把每个分类映射到 X 轴，系列数值映射到 Y 轴，适合观察随时间或类别的变化趋势。

Tooltip

折线图为每个数据点渲染了不可见热区，悬停即可显示系列名与数值（无需开启 showPoints），tooltip 默认开启，可传 tooltip: false 关闭或传入 { formatter } 自定义内容。

访问趋势050100150200250300周一周二周三周四周五
查看代码
import { OneLineChart } from '@geektech/one-chart';

const chart = new OneLineChart({
  title: '访问趋势',
  categories: ['周一', '周二', '周三', '周四', '周五'],
  series: [
    { name: '访问量', data: [120, 200, 150, 280, 190] },
  ],
  curve: 'smooth',
  fill: true,
  showPoints: true,
});
chart.mount(document.querySelector('#app')!);

属性

OneLineChart 属性
名称签名说明
categoriesstring[]分类名，对应 X 轴刻度
series{ name: string; data: number[] }[]系列数据，每个系列长度须与分类一致
curve'linear' | 'smooth'连线方式：直线或 Catmull-Rom 平滑曲线，默认 linear
fillboolean在折线下方填充半透明面积，默认 false
showPointsboolean在每个数据点绘制圆点，默认 false
gridboolean是否显示网格线，默认 true

平滑与填充

smooth 模式基于 Catmull-Rom 样条生成三次贝塞尔曲线；fill 模式额外生成一个闭合到基线的面积路径，透明度固定为 12%。

  • 数据点少于 3 个时，smooth 自动退化为直线。
  • 折线与面积路径都随 props 变化响应式重绘。
访问趋势050100150200250300周一周二周三周四周五
查看代码
import { OneLineChart } from '@geektech/one-chart';

const chart = new OneLineChart({
  title: '访问趋势',
  categories: ['周一', '周二', '周三', '周四', '周五'],
  series: [
    { name: '访问量', data: [120, 200, 150, 280, 190] },
  ],
  curve: 'smooth',
  fill: true,
  showPoints: true,
});
chart.mount(document.querySelector('#app')!);