apexcharts

ApexCharts AI Skill

检测框架封装——生成代码前请检查 package.json。

• react → 使用 react-apexcharts，而不是核心 API。
• vue（Vue 3）→ 使用 vue3-apexcharts。Vue 2 → 使用 vue-apexcharts。
• @angular/core → 使用 ng-apexcharts。

封装会在卸载时自动处理 destroy()，接受响应式属性，并以符合框架惯例的事件形式转发事件。仅当未检测到框架，或用户明确要求使用原生方式时，才直接使用核心 API。请参阅 references/framework-wrappers.md。 面向 ApexCharts v8。 编写任何图表或功能代码前，请先阅读下方说明框：默认构建包不包含所有图表类型或功能。

⚠️ v8.0 重大变更：三种图表类型和四项功能已从默认构建包中移出。 import ApexCharts from 'apexcharts'（脚本标签：dist/apexcharts.min.js）会注册 line、area、scatter、bubble、rangeArea、bar（以及 column）、rangeBar、candlestick、boxPlot、histogram、funnel、pyramid、pie、donut、polarArea、radialBar、gauge、radar、heatmap 和 treemap，以及坐标轴、工具提示和 Tier 1 功能：导出、图例、工具栏、注释、键盘导航、形变、统计数据、主题（Facet）、插件（Weave）和自定义系列（Marks）。其他所有内容都属于 Tier 2：存在于软件包中，但不在默认构建包内，可通过与其并列的独立导入来使用。

import ApexCharts from 'apexcharts'
import 'apexcharts/sunburst'             // Tier 2 图表类型
import 'apexcharts/features/drilldown'   // Tier 2 功能

<script src=".../dist/apexcharts.min.js"></script>
<script src=".../dist/sunburst.js"></script>
<script src=".../dist/features/drilldown.js"></script>

Tier 2	与 apexcharts 并列导入	脚本标签	成为 Tier 2 的版本
unit 及其别名 waffle	apexcharts/unit	dist/unit.js	8.0
sunburst	apexcharts/sunburst	dist/sunburst.js	8.0
violin	apexcharts/violin	dist/violin.js	8.0
icicle	apexcharts/icicle	dist/icicle.js	7.6（新增）
raincloud	apexcharts/raincloud（violin 渲染器加上 raincloud 功能）	dist/violin.js，然后是 dist/features/raincloud.js	7.1（新增）；自 8.0 起需要 violin
drilldown，以及 waterfall、dumbbell 和 streamgraph 图表类型	apexcharts/features/<name>	dist/features/<name>.js	8.0
highlight-filter（highlightFilter）	apexcharts/features/highlight-filter	dist/features/highlight-filter.js	7.9（新增）
trellis、storyboard、perspectives、ink、renderer-canvas、link、measure、history、context-menu	apexcharts/features/<name>	dist/features/<name>.js	7.0

Waterfall 和 dumbbell 通过 rangeBar 绘制，streamgraph 则通过 rangeArea 绘制；默认构建包已包含这些类型，因此只需在其旁边导入对应功能。Storyboard 会注册 Perspectives，因此同时导入两者的开销与只导入 Storyboard 相同。

完整构建包（v8.0）会一次性加载所有内容：在打包器中使用 import ApexCharts from 'apexcharts/full'，通过脚本标签加载 dist/apexcharts.full.min.js。它包含所有图表类型和功能，以及 unit-shapes 和 pictograms 目录，无需额外导入（高级项目仍受许可证限制）。在 8.0.0 版本中，gzip 压缩后的大小为：默认构建包 263,188 B，完整构建包 381,135 B。

不会静默失败：缺少导入时，控制台会指出缺少的项目。Tier 2 图表类型会使 render() 拒绝执行；waterfall、dumbbell 或 streamgraph 会绘制空白图表；Tier 2 功能会在可行时降级运行（trellis 会渲染为单个图表；renderer: 'canvas' 会回退到 SVG）。未指定版本的 CDN URL 会提供 8.0；若要继续使用 7，请固定为 apexcharts@7，在该版本中，unit、sunburst、violin、drilldown、waterfall、dumbbell 和 streamgraph 仍包含在默认构建包中。拆分始于 v7.0，该版本将最后一行表格中的九项功能移出默认构建包；此前默认构建包包含所有功能。完整的分级表见 references/tree-shaking.md，各项功能的 API 见 references/feature-platform.md。

其他 v7.0 重大变更。 (1) plotOptions.bar.borderRadiusWhenStacked 曾在 v7.0 作为无效配置被移除，但在 v7.4 中重新成为有效选项：'all'（默认值）会将堆叠两端都设为圆角，'last' 只会将远端设为圆角，并让基线端保持方角。请勿从配置中删除此选项。(2) dataLabels.animate.enabled 现在默认值为 true（仅适用于 bar/column）：数据更新时，标签会移动到新位置，而不是突然跳转。若要恢复旧行为，请设置 dataLabels: { animate: { enabled: false } }。v5 和 v6 中的其他所有内容均保持原样，继续有效。

默认启用的行为（两者都遵循 prefers-reduced-motion）：添加或移除数据点时，数据更新会流畅地动画呈现；单指惯性平移已启用（chart.pan.inertia）。自 v7.8 起，彼此重叠的数据标签会被错开（dataLabels.avoidOverlap，见第 5 节）。双指手势（捏合缩放和双指平移）由 chart.zoom.pinch 控制，其默认值为 'auto'：仅当工具栏重置按钮存在时才启用，这样意外缩放始终可以撤销。chart.zoom.allowMouseWheelZoom 也受同样限制。设置 pinch: true 可在没有工具栏的图表上强制启用手势；另一种满足限制条件的方法见 chart.zoom.resetControl（v7.4）。

高级功能和许可。 九项功能属于高级功能：trellis（小多图，7.0）、storyboard、link（交叉筛选／关联视图）、ink（注释编辑）、measure、context-menu、perspectives（可分享视图）、history（撤销／重做）和 highlight-filter（highlightFilter，7.9）。两种图表类型属于高级类型：unit／waffle 和 raincloud（7.1）。这些功能和类型仍可完整使用，但在通过 ApexCharts.setLicense(key)（静态方法）或按图表设置 chart.license 配置有效许可证前，会显示 APEXCHARTS 试用水印。它们需要 premium 或 enterprise 套餐；pro 密钥或免费套餐仍会显示水印。其他所有图表类型和免费模块均不受许可限制。高级与 Tier 2 是两个不同维度：自 8.0 起，所有高级项目都属于 Tier 2，但并非所有 Tier 2 项目都是高级项目（renderer-canvas、drilldown、waterfall、dumbbell、streamgraph、sunburst、violin 和 icicle 均免费，但需要导入）。请参阅 references/feature-platform.md 中的许可章节。

1. Critical Rules

1. 在 new ApexCharts(el, options) 后始终调用 chart.render()。构造函数不会渲染图表。
2. 在同一元素上创建新图表前，始终调用 chart.destroy()。否则会导致内存泄漏和图表重复（尤其是在 React/Vue 中）。
3. **系列数据格式因图表类型而异。**请参阅下方的数据格式表。这是 AI 出错的首要原因。
4. 使用多个 y 轴时，yaxis 必须是数组。每个条目都需要一个 seriesName，以映射到正确的系列。
5. tooltip.shared 和 tooltip.intersect 不能同时使用。shared: true 会显示某个 x 位置上的所有系列。intersect: true 只会显示悬停的点。
6. 缺失的数据点请使用 null（不要使用 undefined 或空字符串）。undefined 会被静默忽略，并导致图表异常。
7. chart.stacked: true 会堆叠 bar、area 和 line 系列。在混合图表中，默认情况下只有 bar 系列会堆叠（chart.stackOnlyBar 默认为 true）；设置 stackOnlyBar: false 也会堆叠其中的 line 和 area 系列。waterfall、dumbbell 和 streamgraph 会强制关闭此选项，因为它们会自行累加。
8. responsive 数组中的响应式断点必须按升序排列。
9. 对于混合／组合图表，请在每个系列对象上单独设置 type，而不要只在 chart.type 上设置。
10. RadialBar 的值处于 plotOptions.radialBar.min 到 max 的范围内（默认范围是 0 到 100，因此默认表示百分比）。设置 min／max 可绘制原始值；超出范围的值会被限制到弧线端点。
11. 颜色的十六进制值必须带 # 前缀（例如 '#FF5733'，而不是 'FF5733'）。
12. 默认的 apexcharts 包并不包含所有内容（v8）。在编写相应图表类型前，除 import ApexCharts from 'apexcharts' 外，还要添加 import 'apexcharts/unit'（waffle 也需要）、'apexcharts/sunburst'、'apexcharts/violin'、'apexcharts/icicle' 或 'apexcharts/raincloud'。在编写 waterfall、dumbbell 或 streamgraph 图表，或使用 drilldown、highlightFilter（highlight-filter）、trellis、storyboard、perspectives、ink、renderer: 'canvas'（renderer-canvas）、link、measure、history 或上下文菜单（context-menu）前，添加 import 'apexcharts/features/<name>'。import ApexCharts from 'apexcharts/full'（脚本标签：dist/apexcharts.full.min.js）是唯一无需添加这些内容的入口。请参阅上方的说明框。
13. 摇树优化：导入 apexcharts/core 会得到一个基础类；还必须分别导入图表类型入口和功能入口。
14. 一等别名：funnel 和 pyramid 通过 bar 引擎渲染；gauge 通过 radialBar 渲染。可直接将它们用作 chart.type（无需设置 plotOptions.bar.isFunnel）。它们分别由 apexcharts/bar 和 apexcharts/radialBar 摇树优化入口提供。
15. 统计型 violin 使用逐点密度分布：data: [{ x, y: { density: [[value, weight], ...], points?: [number] } }]，而不是普通数字。自 v6.9 起，数据点也可以只提供原始观测值（points: [number]，不含 y），由库通过 KDE 推导密度（摇树优化时需要 apexcharts/features/stats）。
16. render() 是幂等的：对同一实例调用两次 render() 会返回同一个 promise，而不会构建重复的图表。在同一元素上创建新实例前，仍必须调用 destroy()。
17. histogram（v6.9）系列包含原始观测值（每个事件一个数字），而不是预先聚合的计数；图表会自行选择分箱边界并统计数量。分箱功能通过 stats 功能提供：使用 apexcharts/histogram 入口，或在 apexcharts/bar 旁边导入 apexcharts/features/stats（默认的 apexcharts 包已包含该功能）。
18. waterfall（v7.1）会自动累加。系列中应包含增量，而不是累计总值。应显示累计总值的行需带有 isSubtotal 或 isTotal，且不包含 y；库会自行计算。不要预先计算累计值。
19. dumbbell（v7.1）每个度量值需要一个系列，且各系列使用相同的 x 分类：[{ name: '2020', data: [{ x, y }] }, { name: '2025', data: [{ x, y }] }]。不要将值组合成 y: [low, high]，那是较早的 plotOptions.bar.isDumbbell 范围条形图格式；该格式仍可使用，但属于不同的图表。
20. raincloud（v7.1）接收原始样本，每个分类对应一个数据点：data: [{ x, points: [number] }]。它是高级 Tier 2 类型，因此除了默认包外，还需要导入 import 'apexcharts/raincloud'。
21. 未知名称会明确报错（v7.9）。未知的 chart.type 会在构造或更新图表时抛出异常，且消息会指出最接近的有效类型（'column' 有效，是 'bar' 的同义词；'' 和 null 会绘制折线图）。未知的顶层选项键会保留，但不会被读取。数值字符串形式的坐标轴边界（如 yaxis.min: '10'）可以正常使用，无法解析的边界会被忽略（坐标轴将根据数据缩放）。这两种情况都会在控制台输出警告，但 apexcharts.min.js 和 CommonJS 构建版本（require('apexcharts') 加载的 *.common.js 文件）除外，因为这些版本会移除 console.warn。
22. 脚本标签必须使用此处显示的确切版本：https://cdnjs.cloudflare.com/ajax/libs/apexcharts/8.2.0/apexcharts.min.js 或 https://cdn.jsdelivr.net/npm/[email protected]/dist/apexcharts.min.js。绝不要使用 3.x 或 4.x 版本的 URL，例如 .../apexcharts/3.54.1/...：这些是 2024 年和 2025 年初发布的版本，本技能并不适用于它们。如果环境只能接受较旧的版本，请使用它能接受的、与这些 URL 主版本号相同的最新版本。有关各 CDN 上的附加文件，请参阅 references/framework-wrappers.md。

---

2. 序列数据格式表

这是最关键的参考内容。使用错误的数据格式是图表损坏的首要原因。

坐标轴图表（折线图、面积图、柱状图、散点图等）

图表类型	chart.type	系列格式	最简示例
折线图	'line'	[{ name, data: [number | null] }] 或 [{ name, data: [{ x, y }] }]	series: [{ name: 'Sales', data: [30, 40, null, 50] }]
面积图	'area'	与折线图相同	series: [{ name: 'Views', data: [10, 20, 30] }]
条形图 / 柱状图	'bar'（或 'column'，自 v7.9 起为同义项）	与折线图相同。默认为垂直柱状图；设置 plotOptions.bar.horizontal: true 可显示水平条形图。	series: [{ name: 'Revenue', data: [44, 55, 41] }]
散点图	'scatter'	[{ name, data: [{ x, y }] }] — 始终使用 XY 格式	series: [{ name: 'Points', data: [{ x: 1, y: 5 }, { x: 2, y: 10 }] }]
气泡图	'bubble'	[{ name, data: [{ x, y, z }] }] — 必须提供 z（气泡大小）	series: [{ name: 'Data', data: [{ x: 1, y: 30, z: 10 }] }]
区间面积图	'rangeArea'	[{ name, data: [{ x, y: [low, high] }] }]	series: [{ name: 'Temp', data: [{ x: 'Jan', y: [5, 15] }] }]
区间条形图	'rangeBar'	[{ name, data: [{ x, y: [start, end] }] }] — 用于时间线 / 甘特图时，请使用时间戳	series: [{ name: 'Tasks', data: [{ x: 'Design', y: [1, 5] }] }]
K 线图	'candlestick'	[{ data: [{ x, y: [O, H, L, C] }] }] — 包含 4 个元素的数组：开盘价、最高价、最低价、收盘价	series: [{ data: [{ x: new Date('2024-01-01'), y: [51, 56, 48, 53] }] }]
箱线图	'boxPlot'	[{ data: [{ x, y: [min, Q1, median, Q3, max] }] }] — 包含 5 个元素的数组。(v6.9) 也可直接提供原始样本：[{ data: [{ x, points: [number] }] }]，系统会计算四分位数（R type 7；需要统计功能）。	series: [{ data: [{ x: 'Group A', y: [10, 20, 30, 40, 50] }] }]
小提琴图 (v6，自 v8 起为 Tier 2)	'violin'	[{ name, data: [{ x, y: { density: [[value, weight], ...], points?: [number] } }] }]。(v6.9) 也可直接提供原始样本：[{ name, data: [{ x, points: [number] }] }]，系统会通过 KDE 推导密度（需要统计功能）。需要 import 'apexcharts/violin'。	series: [{ name: 'Sessions', data: [{ x: 'A', y: { density: [[20, 0.1], [30, 0.2]], points: [21, 29] } }] }]
直方图 (v6.9)	'histogram'	[{ name, data: [number] }]：原始观测值，每个事件对应一个数字，而非预先分箱的计数。图表会对数据分箱（需要统计功能）。	series: [{ name: 'Latency', data: [102, 87, 143, 91] }]
热力图	'heatmap'	[{ name, data: [{ x, y: number }] }] — y 是强度值	series: [{ name: 'Mon', data: [{ x: '10am', y: 45 }] }]
矩形树图	'treemap'	[{ data: [{ x, y: number }] }] — y 是面积 / 数值。(v6.9) 数据项可包含任意深度的 children，以构建嵌套矩形树图（参见 references/grid-charts.md）。	series: [{ data: [{ x: 'Item A', y: 100 }, { x: 'Item B', y: 60 }] }]
雷达图	'radar'	[{ name, data: [number] }] + xaxis: { categories: [...] }	series: [{ name: 'Skill', data: [80, 50, 30, 40, 100] }]
漏斗图 (v6)	'funnel'	[{ name, data: [number] }] + xaxis: { categories: [...] }。数值按从大到小排序。	series: [{ data: [1380, 990, 548, 200] }]
金字塔图 (v6)	'pyramid'	与漏斗图相同；数值按从小到大排序（底部为宽底）。	series: [{ data: [200, 548, 990, 1380] }]
瀑布图 (v7.1，自 v8 起为 Tier 2)	'waterfall'	[{ name, data: [{ x, y }] }]，其中 y 是带符号的增量，而非累计总值。累计总值行包含 isSubtotal（自上一个截点起的总和）或 isTotal（从零开始的总和），并且省略 y。需要 import 'apexcharts/features/waterfall'。	series: [{ data: [{ x: 'Revenue', y: 8786 }, { x: 'Costs', y: -2786 }, { x: 'Gross', isSubtotal: true }] }]
哑铃图 (v7.1，自 v8 起为 Tier 2)	'dumbbell'	每个度量使用一个系列，并共享 x 轴类别：[{ name, data: [{ x, y }] }, ...]。不能使用 [low, high] 数组。需要 import 'apexcharts/features/dumbbell'。	series: [{ name: '2020', data: [{ x: 'Backend', y: 92 }] }, { name: '2025', data: [{ x: 'Backend', y: 118 }] }]
流图 (v7.1，自 v8 起为 Tier 2)	'streamgraph'	与面积图相同：[{ name, data: [{ x, y }] }]。堆叠、基线和带区顺序均由图表处理，因此不要设置 chart.stacked。需要 import 'apexcharts/features/streamgraph'。	series: [{ name: 'Drama', data: [{ x: '2024-01-01', y: 32 }] }]
雨云图 (v7.1，付费版，Tier 2)	'raincloud'	[{ name, data: [{ x, points: [number] }] }]：每个类别的原始样本；密度、箱线图和雨点图均由此推导。需要 import 'apexcharts/raincloud'。	series: [{ name: 'Weight gain', data: [{ x: 'Control', points: [3.1, 4.7, 2.9] }] }]

非坐标轴图表（pie、donut、radialBar、polarArea、gauge、unit、waffle）

这些图表的 series 使用扁平数字数组，而不是对象格式：

// CORRECT — flat number array + labels
{
  chart: { type: 'pie' },  // or 'donut', 'polarArea', 'radialBar', 'gauge', 'unit', 'waffle'
  series: [44, 55, 13, 43, 22],
  labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E']
}

Gauge （v6） 是 radialBar 的单值别名：series: [72]，labels: ['Progress']。通过 plotOptions.radialBar 配置弧线／指针、色带、刻度和 min／max 范围（参见 references/circular-charts.md）。

Unit／Waffle （v6.6，付费版，自 v8 起为 Tier 2） 需要 import 'apexcharts/unit'（两种类型都需要）。它们会按每个值单位渲染一个标记（点簇、象形图、华夫格、蜂群图）。数据形状与 pie 相同，使用扁平数组和 labels；布局通过 plotOptions.unit.layout 选择。每个标记的对象形式（series: [{ name, data: [{ value, x, z, name, fillColor, id }] }]）可为每个标记单独设置颜色、位置、大小和工具提示。waffle 是 unit 的预设别名（网格布局）。在设置具有相应授权的许可证前，两者都会显示 APEXCHARTS 水印。参见 references/circular-charts.md。

层级图表（sunburst、icicle）

两者使用相同的树形数据，区别在于布局：sunburst 将绘图区沿径向展开，而 icicle 则沿直线轴展开。

Sunburst （v6.7，免费，自 v8 起为 Tier 2） 将树形数据绘制为同心圆环（嵌套饼图／圆环图），并需要 import 'apexcharts/sunburst'。它使用轴图表风格的 [{ data: [...] }] 包装形式，但每个数据项都是可嵌套任意深度的 { x, y, children } 节点：

{
  chart: { type: 'sunburst' },
  series: [{
    data: [
      { x: 'Mobile', y: 55, children: [
        { x: 'iOS', y: 30, children: [{ x: 'iOS 17', y: 18 }, { x: 'iOS 16', y: 9 }] },
        { x: 'Android', y: 23 }
      ] },
      { x: 'Desktop', y: 33, children: [{ x: 'Windows', y: 20 }, { x: 'macOS', y: 10 }] }
    ]
  }]
}

通过 plotOptions.sunburst 配置中心孔、圆角和弧线间距（参见 references/circular-charts.md）。

Icicle （v7.6，免费，Tier 2） 是相同分区在笛卡尔坐标系中的呈现方式：每个深度层级对应一个带状区域，每个子项按其父项的范围调整大小。数据形状与 sunburst 相同；它也会将现有的 drilldown 配置作为普通数据读取（无需 drilldown 运行时）。各个深度的标签始终保持水平，同一深度的同级节点会跨分支对齐，因此它更适合深层树、调用栈和路径漏斗。

import ApexCharts from 'apexcharts'
import 'apexcharts/icicle'   // Tier 2: NOT in the default bundle

{
  chart: { type: 'icicle' },
  series: [{ data: [ /* the same { x, y, children } tree as above */ ] }],
  plotOptions: { icicle: { direction: 'up' } }   // flame-graph orientation
}

分支可以省略自身的 y，此时其值为子项之和 （v7.6 修复，适用于这两种分区类型）。通过 plotOptions.icicle 配置深度方向、带状区域厚度、叶节点行为和缩放（参见 references/grid-charts.md）。

---

3. 软件包／模块映射

# Default bundle (the standard chart types plus the Tier 1 features; see the box at the top)
import ApexCharts from 'apexcharts'

# Full bundle (v8.0): every chart type and feature, plus the unit-shapes and pictograms catalogs. No add-on needed.
import ApexCharts from 'apexcharts/full'

# Bare core (no chart types, no optional features — must register manually)
import ApexCharts from 'apexcharts/core'

# Per-type entry points (registers specific chart types + core, plus any feature the type needs; no legend, toolbar or exports unless you import them).
# For a Tier 2 type (unit, sunburst, violin, icicle, raincloud) the usual form is
# import 'apexcharts/<type>' next to the default bundle.
import ApexCharts from 'apexcharts/line'         # line, area, scatter, bubble, rangeArea
import ApexCharts from 'apexcharts/area'          # same as /line
import ApexCharts from 'apexcharts/scatter'       # same as /line
import ApexCharts from 'apexcharts/bubble'        # same as /line
import ApexCharts from 'apexcharts/rangeArea'     # same as /line
import ApexCharts from 'apexcharts/bar'           # bar, column, rangeBar
import ApexCharts from 'apexcharts/column'        # same as /bar
import ApexCharts from 'apexcharts/rangeBar'      # same as /bar
import ApexCharts from 'apexcharts/waterfall'     # waterfall (v7.1): bar engine + the waterfall feature
import ApexCharts from 'apexcharts/dumbbell'      # dumbbell (v7.1): bar engine + the dumbbell feature
import ApexCharts from 'apexcharts/streamgraph'   # streamgraph (v7.1): rangeArea engine + the streamgraph feature
import ApexCharts from 'apexcharts/candlestick'   # candlestick, boxPlot
import ApexCharts from 'apexcharts/boxPlot'       # same as /candlestick
import ApexCharts from 'apexcharts/violin'        # violin (Tier 2 since v8). Carries no bar renderer: on this lean path also import 'apexcharts/bar'
import ApexCharts from 'apexcharts/raincloud'     # raincloud (v7.1, premium): violin + the raincloud feature; on this lean path also import 'apexcharts/bar'
import ApexCharts from 'apexcharts/histogram'     # histogram (v6.9): bar engine + the stats feature
import ApexCharts from 'apexcharts/pie'           # pie, donut, polarArea
import ApexCharts from 'apexcharts/donut'         # same as /pie
import ApexCharts from 'apexcharts/polarArea'     # same as /pie
import ApexCharts from 'apexcharts/radialBar'     # radialBar + gauge
import ApexCharts from 'apexcharts/radar'         # radar only
import ApexCharts from 'apexcharts/heatmap'       # heatmap only
import ApexCharts from 'apexcharts/treemap'       # treemap only
import ApexCharts from 'apexcharts/sunburst'      # sunburst (v6.7, hierarchical): Tier 2 since v8
import ApexCharts from 'apexcharts/icicle'        # icicle (v7.6, hierarchical): Tier 2, NOT in the default bundle
import ApexCharts from 'apexcharts/unit'          # unit + waffle (v6.6, premium): Tier 2 since v8
# funnel + pyramid render through the bar engine; use apexcharts/bar

# Unit-chart shape kit (v6.10): named exports, tree-shaken per shape (~4 KB gzipped each)
import { heart, outlined, glyphs, preview } from 'apexcharts/unit-shapes'

# Pictogram glyphs (v7.0): one drawn mark per unit, independent of the layout
import { person, registerMarks } from 'apexcharts/pictograms'

# TIER 1 features: already in the default `apexcharts` bundle.
# Import these only when you started from /core or a per-type entry.
import 'apexcharts/features/exports'         # PNG/SVG/CSV export methods
import 'apexcharts/features/legend'          # Interactive legend component
import 'apexcharts/features/toolbar'         # Toolbar (zoom, pan, download buttons)
import 'apexcharts/features/annotations'     # X/Y/point/text/image annotations
import 'apexcharts/features/keyboard'        # Keyboard navigation (accessibility)
import 'apexcharts/features/stats'           # Statistics (v6.9): histogram binning, boxPlot/violin raw samples, rowSeries()
import 'apexcharts/features/morph'           # Animated chart-type morphs
import 'apexcharts/features/facet'           # Design tokens + OS-aware themes
import 'apexcharts/features/weave'           # Public plugin platform
import 'apexcharts/features/marks'           # Custom series types (registerSeriesType)

# TIER 2: NOT in the default bundle (all are in apexcharts/full).
import 'apexcharts/features/drilldown'       # Hierarchical drill-down (Tier 2 since v8)
import 'apexcharts/features/waterfall'       # (v7.1) waterfall chart type (Tier 2 since v8)
import 'apexcharts/features/dumbbell'        # (v7.1) dumbbell chart type (Tier 2 since v8)
import 'apexcharts/features/streamgraph'     # (v7.1) streamgraph chart type (Tier 2 since v8)
import 'apexcharts/features/highlight-filter' # (v7.9) Part-of-whole highlight, highlightFilter (premium)
import 'apexcharts/features/trellis'         # (v7.0) Small multiples (premium)
import 'apexcharts/features/storyboard'      # Scrollytelling (premium; registers perspectives)
import 'apexcharts/features/perspectives'    # Shareable view state (premium)
import 'apexcharts/features/ink'             # On-chart annotation authoring (premium)
import 'apexcharts/features/renderer-canvas' # Hybrid SVG + canvas renderer (Strata)
import 'apexcharts/features/link'            # Crossfilter / linked views (premium)
import 'apexcharts/features/measure'         # Measure / delta ruler (premium)
import 'apexcharts/features/history'         # Undo/redo (Rewind, premium)
import 'apexcharts/features/context-menu'    # Right-click / long-press context menu (premium)
import 'apexcharts/raincloud'                # (v7.1) raincloud (premium): the violin renderer plus the raincloud feature. features/raincloud alone works only where violin is already registered (v8)

import 'apexcharts/features/all'             # Tier 1 only. Does NOT pull in Tier 2.

# SSR (server-side rendering)
import ApexCharts from 'apexcharts/ssr'    # Node.js: renderToString, renderToHTML. Also the only entry with hydrate() (browser-safe)
import ApexCharts from 'apexcharts/client' # Browser build, explicitly. No hydrate(): hydrate from apexcharts/ssr

注意（v8）： apexcharts 提供标准图表类型和 Tier 1 功能。Tier 2 图表类型（unit／waffle、sunburst、violin、icicle、raincloud）及 Tier 2 功能需要单独导入，除非你使用的是 apexcharts/full。apexcharts/features/all 是 Tier 1 集合，不能绕过这一要求。Tree-shaking 入口（/core、/line 等）用于进一步减小默认打包体积。使用精简核心时，violin 和 raincloud 还需要 apexcharts/bar；对原始观测值绘制 boxPlot 或 violin 时，需要 apexcharts/features/stats（控制台会提示）。

注意（v6.9）： ApexCharts 不再是无依赖软件包：它在运行时依赖 apex-commons。npm 会自动解析该依赖，浏览器（script 标签）打包也会将其内联，因此无需额外操作；只有在使用假定零依赖的工具时才需要注意这一点。

---

4. 核心生命周期模式

import ApexCharts from 'apexcharts'

// 1. Define options
const options = {
  chart: {
    type: 'line',
    height: 350
  },
  series: [{
    name: 'Sales',
    data: [30, 40, 35, 50, 49, 60, 70]
  }],
  xaxis: {
    categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  }
}

// 2. Create chart instance
const chart = new ApexCharts(document.querySelector('#chart'), options)

// 3. Render (REQUIRED — constructor alone does not display the chart)
await chart.render()

// 4. Update data or options later
await chart.updateSeries([{
  name: 'Sales',
  data: [10, 20, 15, 30, 29, 40, 50]
}])

// Or merge new config options
await chart.updateOptions({
  title: { text: 'Updated Chart' }
})

// 5. Destroy when done (REQUIRED before unmounting in SPA frameworks)
chart.destroy()

---

5. 格式化器函数签名

配置路径	签名	返回值
xaxis.labels.formatter	(value: string | number, timestamp?: number, opts?) => string	格式化后的 x 轴刻度标签
yaxis.labels.formatter	(value: number, opts?) => string	格式化后的 y 轴刻度标签
tooltip.x.formatter	(value: number, opts?) => string	工具提示中的 x 值文本
tooltip.y.formatter	(value: number | null, opts?) => string	工具提示中的 y 值文本。在数据间隙处，value 为 null，因此调用数字方法前请先进行判断：(val) => val == null ? 'n/a' : val.toFixed(2)
tooltip.y.title.formatter	(seriesName: string, opts?) => string	工具提示中的系列标题
tooltip.z.formatter	(value: number) => string	工具提示中的 z 值（气泡图）
dataLabels.formatter	(value: number | string | number[], opts?) => string | number	数据标签文本
legend.formatter	(legendName: string, opts?) => string	图例项文本
plotOptions.pie.donut.labels.value.formatter	(val: string) => string	圆环图中心值
plotOptions.pie.donut.labels.total.formatter	(w: { globals, config }) => string	圆环图中心总计值
plotOptions.radialBar.dataLabels.value.formatter	(val: number) => string	径向条形图中心值

重要提示： 所有格式化器都必须返回 string（dataLabels.formatter 可以返回 number）。绝不能返回 undefined。

单个数据点的数据标签偏移（v6.8）： dataLabels.offsetX 和 dataLabels.offsetY 接受 number | ((opts) => number)。函数接收 { series, seriesIndex, dataPointIndex, w }（签名与 dataLabels.style.colors 函数相同）。可用它进行有意的位置调整；请确保函数是纯函数，因为每个标签可能会触发多次调用。无需通过它来处理碰撞：从 v7.8 起，dataLabels.avoidOverlap（默认开启）会在应用偏移后，沿数值轴将重叠的标签推开，既适用于不同系列之间，也适用于同一系列内部（径向类型仍使用各自的定位方式）。可通过 { gap, maxShift, hide } 调整，或设置 avoidOverlap: false，让每个标签保持在其标记点和偏移处。

---

6. 常见问题与反模式

问题 1：系列数据格式与图表类型不匹配

❌ 错误 — 饼图使用轴图系列格式：

{ chart: { type: 'pie' }, series: [{ name: 'A', data: [44, 55] }] }

✅ 正确 — 饼图使用扁平数字数组 + 标签：

{ chart: { type: 'pie' }, series: [44, 55, 13], labels: ['A', 'B', 'C'] }

问题 2：未调用 render()

❌ 错误 — 图表不会显示：

const chart = new ApexCharts(el, options)
// Missing render() call!

✅ 正确：

const chart = new ApexCharts(el, options)
await chart.render()

问题 3：重新创建前未销毁（React/Vue 内存泄漏）

❌ 错误 — 创建重复图表：

useEffect(() => {
  const chart = new ApexCharts(ref.current, options)
  chart.render()
}, [options])

✅ 正确 — 在清理时销毁：

useEffect(() => {
  const chart = new ApexCharts(ref.current, options)
  chart.render()
  return () => chart.destroy()
}, [options])

问题 4：xaxis.type 与错误的数据格式混用

❌ 错误 — 日期时间轴使用字符串日期（而非时间戳）：

{
  xaxis: { type: 'datetime' },
  series: [{ data: [{ x: 'January 2024', y: 30 }] }]
}

✅ 正确 — 日期时间轴使用时间戳或 Date 对象：

{
  xaxis: { type: 'datetime' },
  series: [{ data: [{ x: new Date('2024-01-01').getTime(), y: 30 }] }]
}

另外：如果数据已经是 { x, y } 格式，请勿使用 xaxis.categories——它会被忽略。

问题 5：多个 y 轴未使用数组

❌ 错误 — yaxis 是单个对象：

{
  series: [{ name: 'Revenue', data: [...] }, { name: 'Profit', data: [...] }],
  yaxis: { title: { text: 'Revenue' } }
}

✅ 正确 — yaxis 使用数组，并通过 seriesName 映射：

{
  series: [{ name: 'Revenue', data: [...] }, { name: 'Profit', data: [...] }],
  yaxis: [
    { seriesName: 'Revenue', title: { text: 'Revenue ($)' } },
    { seriesName: 'Profit', opposite: true, title: { text: 'Profit (%)' } }
  ]
}

问题 6：tooltip.shared 与 tooltip.intersect

❌ 错误 — 两者都启用（互相冲突）：

{ tooltip: { shared: true, intersect: true } }

✅ 正确 — 选择一种模式：

// Mode A: Show all series values at x-position (default for line/area)
{ tooltip: { shared: true, intersect: false } }

// Mode B: Show only hovered data point (better for scatter)
{ tooltip: { shared: false, intersect: true } }

访问 custom 工具提示中的内容 (v7.6)：指针离开数据点时，工具提示会关闭，因此 custom 返回的链接或按钮永远无法点击。tooltip.interactive: true 会在指针移到工具提示上时保持其打开。此选项默认关闭；启用时，followCursor 会被忽略（跟随光标的工具提示会在指针靠近时退开）；followCursor 配置值会保持不变，并在 interactive 重新关闭时立即生效。

{ tooltip: { interactive: true, custom: ({ seriesIndex }) => `<a href="/detail/${seriesIndex}">Open</a>` } }

问题 7：格式化器签名错误

❌ 错误 — 将 y 轴格式化器签名用于工具提示：

{
  tooltip: { y: { formatter: (val, timestamp, opts) => `$${val}` } }
}

✅ 正确 — tooltip.y.formatter 只接收 (val, opts)：

{
  tooltip: { y: { formatter: (val, opts) => `$${val}` } },
  yaxis: { labels: { formatter: (val) => `$${val.toFixed(0)}` } }
}

陷阱 8：缺失数据时使用 undefined，而非 null

❌ 错误 — undefined 会导致图表出错：

{ series: [{ data: [10, undefined, 30, undefined, 50] }] }

✅ 正确 — 使用 null：

{ series: [{ data: [10, null, 30, null, 50] }] }

陷阱 9：在不支持的图表类型上堆叠

❌ 错误 — 在散点图上堆叠：

{ chart: { type: 'scatter', stacked: true } }

✅ 正确：堆叠适用于柱状图、面积图和折线图：

{ chart: { type: 'bar', stacked: true } }
// or
{ chart: { type: 'area', stacked: true } }
// or
{ chart: { type: 'line', stacked: true } }

陷阱 10：混合／组合图表缺少单个系列的类型

❌ 错误 — 未为单个系列设置类型：

{
  chart: { type: 'line' },
  series: [
    { name: 'Sales', data: [10, 20, 30] },      // renders as line
    { name: 'Profit', data: [5, 12, 18] }        // also renders as line!
  ]
}

✅ 正确 — 为每个系列设置类型：

{
  chart: { type: 'line' },
  series: [
    { name: 'Sales', type: 'column', data: [10, 20, 30] },
    { name: 'Profit', type: 'line', data: [5, 12, 18] }
  ]
}

陷阱 11：RadialBar 的值超出 min/max 范围

❌ 错误：在默认的 0 到 100 范围内使用原始值（每段弧都会被截满）：

{ chart: { type: 'radialBar' }, series: [340, 520, 190] }

✅ 正确：使用百分比，或设置适合原始值的范围：

{ chart: { type: 'radialBar' }, series: [76, 67, 61], labels: ['A', 'B', 'C'] }
// or
{ chart: { type: 'radialBar' }, series: [340, 520, 190], labels: ['A', 'B', 'C'],
  plotOptions: { radialBar: { min: 0, max: 600 } } }

陷阱 12：颜色值缺少 # 前缀

❌ 错误：

{ colors: ['FF5733', '33FF57'] }

✅ 正确：

{ colors: ['#FF5733', '#33FF57'] }

陷阱 13：响应式断点未按升序排列

❌ 错误 — 降序排列：

{ responsive: [{ breakpoint: 1024, options: {...} }, { breakpoint: 480, options: {...} }] }

✅ 正确 — 升序排列：

{ responsive: [{ breakpoint: 480, options: {...} }, { breakpoint: 1024, options: {...} }] }

陷阱 14：缺少功能导入

有两种不同情况。(a) 按类型分别导入时未包含功能：

❌ 错误 — 工具栏／图例／注释会悄然缺失：

import ApexCharts from 'apexcharts/line'
// No feature imports! Legend, toolbar, annotations won't appear.

✅ 正确 — 导入所需功能：

import ApexCharts from 'apexcharts/line'
import 'apexcharts/features/legend'
import 'apexcharts/features/toolbar'
import 'apexcharts/features/annotations'

(b) (v8) 默认 bundle 不包含 Tier 2 图表类型和功能。 即使从未进行过 tree-shaking，也可能遇到这个问题。这是最常见的升级失败：从 v6 升级到 v7 时缺少 9 个 7.0 功能；从 v7 升级到 v8 时缺少 unit、sunburst、violin、drilldown、waterfall、dumbbell 和 streamgraph。

❌ 错误：配置正确，但模块缺失，因此 render() 会拒绝执行，且不会绘制任何内容：

import ApexCharts from 'apexcharts'
new ApexCharts(el, { chart: { type: 'sunburst' }, series }).render()

✅ 正确：

import ApexCharts from 'apexcharts'
import 'apexcharts/sunburst'

每种情况下，控制台都会指出相应的导入项（从 7.9.1 起，压缩后的 bundle 也会打印该信息），但图表的表现取决于缺少的内容：

• Tier 2 图表类型（unit、waffle、sunburst、violin、icicle 和通过 violin 绘制的 raincloud）：render() 会拒绝执行，且不会绘制任何内容。请求使用该类型的 updateOptions、updateSeries 或 appendSeries 会被拒绝，图表保持原样。
• 缺少对应功能的 waterfall、dumbbell 或 streamgraph（或者页面包含 violin，但缺少 raincloud 功能的 raincloud）：会发出一条警告，并显示空白绘图区。
• Tier 2 功能（drilldown、highlightFilter、trellis、storyboard、perspectives、ink、renderer: 'canvas'、link、measure、history、contextMenu）：图表会照常绘制，但不包含这些功能；当配置中包含相应功能时会发出警告。trellis 会渲染为单个普通图表；drilldown 图表会绘制根级别，但不会进行导航，而且 chart.drillDown() 会抛出异常。

也可以从 import ApexCharts from 'apexcharts/full' 开始，这样就不需要上述任何导入。

陷阱 15：SSR — 导入路径错误

apexcharts 会根据环境解析："." 导出的 node 条件指向 SSR bundle，因此在服务器上执行 import ApexCharts from 'apexcharts' 确实会包含 renderToString / renderToHTML。不过，仍建议显式导入 apexcharts/ssr，这样即使以 Node 为目标的打包工具解析了 browser 条件，也能保留原本意图：

// On server:
import ApexCharts from 'apexcharts/ssr'
const svg = await ApexCharts.renderToString(options)

// On client (for hydration): target the wrapper renderToHTML emitted,
// which carries data-apexcharts-hydrate and NO id.
import ApexCharts from 'apexcharts/ssr'  // hydrate() lives only on this entry; it is browser-safe
ApexCharts.hydrateAll()  // or hydrate(document.querySelector('[data-apexcharts-hydrate]'))

在浏览器中，apexcharts、apexcharts/client 和 apexcharts/full 都没有 hydrate / hydrateAll，而类型声明却在每个入口中都包含它们，因此 TypeScript 无法发现这个错误。

陷阱 16：updateOptions 与 updateSeries、appendData 的区别

❌ 错误 — 仅为更改数据就完整调用 updateOptions：

chart.updateOptions({ series: [{ data: newData }] })

✅ 正确 — 使用合适的方法：

// Replace all series data (most common)
await chart.updateSeries([{ name: 'Sales', data: newData }])

// Add data points to existing series (real-time streaming)
await chart.appendData([{ data: [newPoint] }])

// Change config (title, colors, axis, etc.)
await chart.updateOptions({ title: { text: 'New Title' } })

---

7. API 方法速查

实例方法

方法	描述
render()	渲染图表。返回 Promise<ApexCharts>。
destroy()	销毁图表实例并移除 DOM 元素。
updateOptions(options, redraw?, animate?, updateSyncedCharts?)	合并新选项并重新渲染。返回 Promise。
updateSeries(newSeries, animate?)	替换系列数据。返回 Promise。
appendSeries(newSeries, animate?)	将新系列追加到现有系列中。返回 Promise。
appendData(newData)	向每个系列追加数据点。返回 Promise。
toggleSeries(seriesName)	按名称显示/隐藏系列。
showSeries(seriesName)	显示隐藏的系列。
hideSeries(seriesName)	隐藏显示的系列。
resetSeries(shouldUpdateChart?, shouldResetZoom?)	重置为初始系列数据。
zoomX(min, max)	以编程方式缩放 x 轴。
addXaxisAnnotation(opts)	动态添加 x 轴注释。
addYaxisAnnotation(opts)	动态添加 y 轴注释。
addPointAnnotation(opts)	动态添加数据点注释。
removeAnnotation(id)	按 id 移除注释。
clearAnnotations()	移除所有注释。
dataURI(options?)	将图表导出为数据 URI。返回 Promise。
getSvgString(scale?)	获取图表 SVG 标记。返回 Promise<string>。
exportToCSV(options?)	触发 CSV 下载。
setLocale(localeName)	切换区域设置。
toggleDataPointSelection(seriesIndex, dataPointIndex?)	选择/取消选择数据点。
rowSeries(opts?)	(v6.9) 返回此图表标记背后的原始行，作为单元图表系列（每个标记对应一个簇）；若该类型没有行数据源，则返回 null（适用于 histogram / boxPlot / violin，需要 apexcharts/features/stats）。opts.maxRows 限制输出行数（默认值为 3000）。绘制结果需要使用 unit 类型，该类型自 v8 起属于 Tier 2（import 'apexcharts/unit'）。
getState()	返回图表状态快照。
addEventListener(name, handler)	订阅图表事件。
removeEventListener(name, handler)	取消订阅图表事件。

功能实例方法（需要导入对应功能）

方法	功能	描述
chart.getPanels() / getPanel(key)	trellis	(v7.0) 获取网格的面板，以及根据分面键获取某个面板自身的 ApexCharts 实例。对于非 trellis 宿主图表，返回空值 / null。
chart.promotePanel(key) / restorePanels()	trellis	(v7.0) 将一个面板扩展至网格的全宽，并恢复原状。
chart.history.undo() / redo() / jump(id) / transaction(fn)	history	在命令日志中撤销/重做。
chart.perspectives.capture() / toURL() / apply(token)	perspectives	序列化/恢复精确视图。
chart.getActiveRenderer()	renderer-canvas	返回当前使用的 'svg' | 'canvas'。
chart.refreshTokens()	facet	重新读取 --apx-* CSS 自定义属性。
chart.startMeasure() / stopMeasure() / clearMeasures()	measure	通过代码控制测量标尺。
chart.storyboard.bind({ beats }) / goTo() / unbind()	storyboard	由滚动驱动的编排。
chart.drillDown(id) / drillUp() / drillToRoot()	drilldown	浏览下钻层级。
chart.clearCrossfilter()	link	清除激活的交叉筛选选择。
chart.highlightFilter.set(parts) / clear() / valueAt(i, j) / isActive()	highlight-filter	(v7.9) 设置或移除高亮部分（每个部分会在绘制时解析），并读取某个部分。未启用该功能时，chart.highlightFilter 为 null。

静态方法

方法	描述
ApexCharts.exec(chartID, fn, ...args)	根据图表的 chart.id 调用图表方法。
ApexCharts.getChartByID(chartID)	根据 ID 获取图表实例。
ApexCharts.setLicense(key)	(v6.5) 设置许可证密钥，以移除高级功能试用水印。此方法为静态方法，在各图表系列间共享，可离线使用且兼容 SSR；请在调用 render() 前调用。单个图表的覆盖值为 chart.license。从 6.7.0 开始，需要 premium/enterprise 计划。
ApexCharts.merge(target, source)	深度合并对象。
ApexCharts.use(typeMap)	注册图表类型构造函数（tree-shaking）。
ApexCharts.registerFeatures(featureMap)	注册可选功能模块。
ApexCharts.registerPlugin(def) / unregisterPlugin(name)	(v6，Weave) 注册可复用插件。
ApexCharts.registerSeriesType(name, def) / unregisterSeriesType(name)	(v6，Marks) 注册自定义系列类型。
ApexCharts.registerTheme(name, def) / unregisterTheme(name)	(v6，Facet) 注册命名品牌主题。
ApexCharts.registerEasing(name, fn)	(v6，Cadence) 注册自定义缓动曲线。
ApexCharts.registerUnitLayout(name, fn) / unregisterUnitLayout(name)	(v6.9) 注册命名单元图表布局，可通过 plotOptions.unit.positions: '<name>' 与 layout: 'custom' 引用。
ApexCharts.crossfilter({ id, records }) / getCrossfilter(id)	(v6，Link) 创建 / 获取交叉筛选引擎。
ApexCharts.perspectives.fromURL(href)	(v6) 从 URL 解码透视令牌。
ApexCharts.trellis(el, options)	(v7.0，Trellis) 命令式入口：创建 Trellis 容器（options 必须包含 trellis.by）并开始渲染。若未加载 trellis 功能，则返回 null 并在控制台发出警告。
registerMarks(defs) / definePictogram(meta) from apexcharts/pictograms	(v7.0) 注册字形，使 plotOptions.unit.pictogram.mark: 'person' 能解析成功。

SSR 静态方法（在 apexcharts/ssr 中可用）

方法	描述
ApexCharts.renderToString(options, { width, height, scale })	将图表渲染为原始 SVG 字符串（Node.js）。
ApexCharts.renderToHTML(options, { width, height, scale, className })	将图表渲染为可供水合的 HTML 字符串（Node.js）。
ApexCharts.hydrate(element, clientOptions?)	水合服务端渲染的图表（浏览器）。
ApexCharts.hydrateAll(selector?, clientOptions?)	水合页面上所有服务端渲染的图表。
ApexCharts.isHydrated(element)	检查元素是否已水合。

---

8. 图表事件

{
  chart: {
    events: {
      // Lifecycle
      beforeMount: (chart, options) => {},
      mounted: (chart, options) => {},
      updated: (chart, options) => {},
      animationEnd: (chart, options) => {},

      // User interaction
      click: (event, chart, options) => {},
      mouseMove: (event, chart, options) => {},
      mouseLeave: (event, chart, options) => {},
      legendClick: (chart, seriesIndex, options) => {},
      markerClick: (event, chart, options) => {},
      xAxisLabelClick: (event, chart, options) => {},

      // Data point events
      dataPointSelection: (event, chart, options) => {},
      dataPointMouseEnter: (event, chart, options) => {},
      dataPointMouseLeave: (event, chart, options) => {},

      // Zoom & pan
      beforeZoom: (chart, { xaxis }) => {},      // return false to cancel
      zoomed: (chart, { xaxis }) => {},
      beforeResetZoom: (chart, options) => {},    // return false to cancel
      scrolled: (chart, { xaxis }) => {},
      selection: (chart, { xaxis, yaxis }) => {},

      // v6 feature events (fire only when the matching feature is enabled)
      annotationDragged: (chart, options) => {},  // ink
      annotationEdited: (chart, options) => {},    // ink
      annotationStyled: (chart, options) => {},    // ink
      annotationDeleted: (chart, options) => {},   // ink
      measured: (chart, { from, to, dx, dy, percentChange, slope }) => {}, // measure
      beatChange: (chart, beatInfo) => {},         // storyboard
      drillDownStart: (info, chart, options) => {},// drilldown
      drillDownEnd: (info, chart, options) => {},  // drilldown
      drillUp: (info, chart, options) => {},       // drilldown
      drillDownError: ({ id, error }, chart, options) => {}, // drilldown (v6.9): async level failed; view unchanged
      highlightFilterChanged: (chart, { active, phase }) => {}, // highlight-filter (v7.9): phase is 'enter', 'update' or 'clear'
    }
  }
}

---

9. 功能平台

从配置角度看，以下所有功能默认均处于关闭状态。Tier 列指的是 打包级别：Tier 1 已包含在 import ApexCharts from 'apexcharts' 中；只有在从 /core 或按类型划分的入口开始使用时，才需要导入 features/*；Tier 2 无论使用哪个入口点都需要导入，但 apexcharts/full 除外，它包含所有功能。完整的配置结构、API 和示例请参阅 references/feature-platform.md。

功能	层级	导入路径	简介
Weave（插件）	1	apexcharts/features/weave	通过稳定的 ApexCharts.registerPlugin({ name, setup }) API 发布可复用的图表插件；使用 plugins: [{ name }] 按图表启用。契约为 v6（v7.5）：info/categories/markDerived（v2）、reserve（v3）、pointer（v4）、claim/drawn/declare/can（v6）。声明你能兼容的最低 apiVersion，并对其余功能进行特性检测：低于你声明版本的宿主会直接跳过你的插件。
Marks（自定义系列）	1	apexcharts/features/marks	使用 ApexCharts.registerSeriesType(name, { renderItem }) 注册一等自定义标记（棒棒糖图、子弹图）。基线为 scales.y(0)，而非 api.zeroY。
Facet（主题／令牌）	1	apexcharts/features/facet	theme: { follow: 'os', name }、--apx-* CSS 自定义属性、ApexCharts.registerTheme。
Morph	1	apexcharts/features/morph	在不同图表类型之间进行动画过渡。
Stats	1	apexcharts/features/stats	（v6.9） 提供直方图分箱、箱线图／小提琴图原始样本汇总（R type 7 四分位数、KDE）以及 chart.rowSeries() 背后的统计功能。apexcharts/histogram 入口会包含此功能。
Cadence（缓动）	核心	无	chart.animations.easing 接受命名曲线、cubic-bezier 数组或函数；ApexCharts.registerEasing。
Streaming	核心	无	chart: { streaming: { enabled, maxPoints } } 用于以恒定速度滚动的窗口。
Print layout	核心	无	（v7.1） chart: { print: { enabled, width } }。无法通过 JS 测量纸张区域（beforeprint 期间，clientWidth 和 matchMedia 都会报告屏幕尺寸），因此会以已知宽度重新布局图表以适配纸张，并在之后恢复。默认启用，宽度为 700（适用于 A4／Letter 纵向页面）；已较窄的图表保持原样。print: false 可恢复 v7.1 之前的行为。
Marker batching	核心	无	（v7.0） markers: { largeDatasetThreshold: n }。点数超过 n 时，系列标记会按每种标记尺寸绘制为一条路径，而不是每个点一个元素。默认关闭（0），需显式启用，因为合并后的标记路径无法做到像素级一致：重叠标记会失去各自的轮廓，密集簇也会显得更扁平。还包括 showNullDataPoints 添加的标记，这也是即使 size: 0，空值较多的系列仍会很慢的原因。
Drilldown	2	apexcharts/features/drilldown	（自 v8.0 起为第 2 层） drilldown: { enabled, series }，并在数据点上设置 drilldown id；使用 chart.drillDown()/drillUp()。v6.9 增加了折线图／面积图支持、异步层级（onDrillDown 可返回 Promise）、加载遮罩层和 drillDownError 事件。
Highlight filter	2	apexcharts/features/highlight-filter	（v7.9，高级版） highlightFilter 会将每个值绘制为淡化效果，并在前景中以实色显示其中一部分，共用同一基线。高亮部分会随数据变化：使用 series[].highlightData（与 data 并行），或为每个数据点设置 { x, y, highlight }；饼图／圆环图／极区面积图／径向条形图使用 highlightFilter.data；还可使用 chart.highlightFilter.set(parts)／clear()。适用于条形图、柱形图、漏斗图、折线图、面积图、饼图、圆环图、极区面积图、径向条形图（含仪表盘）和树图。参见 references/feature-platform.md 中的“Highlight filter”。
Trellis（小多图）	2	apexcharts/features/trellis	（v7.0，高级版） trellis: { by: 'region', minPanelWidth } 会将系列拆分为网格中的多个真实图表，共享一个比例尺、图例、工具栏和十字线。也支持使用 row × column 创建二维网格。
Strata（画布）	2	apexcharts/features/renderer-canvas	chart: { renderer: 'auto', rendererThreshold } 会将密集系列图层绘制到画布上，同时坐标轴／工具提示／导出仍使用 SVG。模块缺失时会回退到 SVG。
Rewind（撤销／重做）	2	apexcharts/features/history	（高级版） chart: { history: { enabled: true } }，然后使用 chart.history.undo()/redo()/jump()/transaction()。
Perspectives（视图状态）	2	apexcharts/features/perspectives	（高级版） 使用 chart.perspectives.capture()/toURL()/apply() 序列化并还原精确视图。
Link（交叉筛选）	2	apexcharts/features/link	（高级版） chart: { group, link: { enabled, mode } } 用于高亮联动；ApexCharts.crossfilter({ id, records }) 用于筛选引擎。
Ink（注释编辑）	2	apexcharts/features/ink	（高级版） chart: { ink: { enabled: true } } 可让注释支持拖动和调整大小，并显示浮动编辑器。
Measure（标尺）	2	apexcharts/features/measure	（高级版） chart: { measure: { enabled, mode } }；按住按键并拖动，即可读取变化值／百分比／斜率。v6.1 增加了工具栏工具（toolbar.tools.measure、toolbar.autoSelected: 'measure'）。
Context menu	2	apexcharts/features/context-menu	（高级版） chart: { contextMenu: { enabled, items } } 用于执行针对特定数据点的右键操作。
Storyboard（滚动叙事）	2	apexcharts/features/storyboard	（高级版） chart.storyboard.bind({ beats }) 将文字段落与保存的视图配对。也会注册 Perspectives。

10. 参考路由表

有关各图表系列专属选项、数据格式变体和完整的可运行示例，请参阅：

主题	参考文件
折线图、面积图、散点图、气泡图、范围面积图、流图	references/cartesian-charts.md
条形图、柱状图、范围条形图、时间线／甘特图、漏斗图、金字塔图、瀑布图、哑铃图	references/bar-charts.md
K 线图、箱线图、小提琴图、直方图、雨云图	references/financial-charts.md
饼图、环形图、极区图、径向条形图、仪表盘、旭日图、单位图、华夫饼图、象形图	references/circular-charts.md
热力图（含单元格形状）、矩形树图、冰柱图	references/grid-charts.md
雷达图	references/radar-charts.md
功能平台（小多图、插件、画布、撤销／重做、主题、交叉筛选、故事板等）	references/feature-platform.md
Bundle 层级、Tree-shaking、Bundle 优化	references/tree-shaking.md
服务端渲染、水合	references/ssr.md
React、Vue、Angular 集成	references/framework-wrappers.md