ECharts迎来强力对手，又一个Grammar of Graphics 类工具！

pythonic生物人2026年08月07日约 2 分钟

TanStack Charts并不是又一个"图表库"，而是在尝试把ggplot2的图形语法思想带到现代Web开发中。

如果你熟悉Grammar of Graphics，它会让你有一种似曾相识的感觉。

TanStack Charts最大的特点，不是图表，而是表达方式

多数图表库都是围绕"图表类型"设计的。例如：

Line Chart
Bar Chart
Pie Chart
Scatter Chart

需要什么图，就调用对应组件。

这种方式简单直接，但当图形越来越复杂时，往往需要不断叠加插件、自定义图层或者各种Hack，代码维护成本也随之增加。

TanStack Charts则采用了另一种思路。

它并没有把"折线图""柱状图"作为核心概念，而是把图形拆解成一个个更基础的元素（Mark），再通过数据映射（Channel）和比例尺（Scale）组合成最终的图表。

例如，一个scatter-bubble，

defineChart({
    marks: [
      dot(rows, {
        x: 'culmen_length_mm',
        y: 'culmen_depth_mm',
        color: 'species',
        r: 'body_mass_g',
        rScale: {
          scale: () => scaleSqrt().range([3, 11]),
        },
        fillOpacity: 0.78,
        stroke: 'currentColor',
        strokeOpacity: 0.28,
        strokeWidth: 0.75,
      }),
    ],
    x: { scale: scaleLinear, grid: true, axis: { label: 'Bill length (mm)' } },
    y: { scale: scaleLinear, grid: true, axis: { label: 'Bill depth (mm)' } },
    color: {
      range: groupRange,
      legend: colorLegend({ label: 'Species' }),
    },
  })
}