# @aparte/plugin-echarts 中文文档

规范地址：https://npmcn.com/package/%40aparte/plugin-echarts/

版本：1\.0\.2
npm 元数据更新时间：2026-11-08T11:09:01.546Z
中文译文更新时间：2026-11-08T01:35:25.293Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40aparte/plugin-echarts
原文对照：https://npmcn.com/package/%40aparte/plugin-echarts/?lang=original
项目主页：https://apartejs.dev/guides/charts/
源码仓库：https://github.com/apartejs/aparte

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：168 kB，17 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=18
- 运行依赖：0 个
- peer 依赖：echarts \>=6\.0\.0 \<7\.0\.0，@aparte/core \>=1\.0\.2 \<2\.0\.0
- 首次发布：2026-10-31T19:08:32.380Z
- 最新版本发布：2026-11-08T11:09:01.141Z
- 近 30 天下载量：1935（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 14 个）

## 中文简介

通过 Apache ECharts 区分的图表 – 一个 ECharts 选项 一个模型写作,或者一个工具返回,当它流出时绘制.

## 安装

```sh
npm install @aparte/plugin-echarts
```

也可以使用：`pnpm add @aparte/plugin-echarts`、`yarn add @aparte/plugin-echarts`、`bun add @aparte/plugin-echarts`

## README

# @aparte/plugin-echarts (中文(简体) )

图表 [独立](https://github.com/apartejs/aparte) 通过 [Apache ECharts (英语)](https://echarts.apache.org/)。 。 。 . 每个 ` ```echarts ` 答复中的围栏——ECharts `option` 作为图表绘制的JSON 它流出,无论马克下供货商是安装的,还是没有。 其结果是一种选择的工具 也可以用同样的方式取而代之.

![An ECharts bar chart drawn from a fence, in an aparté chat](https://apartejs.dev/shots/echarts.png)

```bash
npm install @aparte/plugin-echarts @aparte/core echarts
```

```ts
import { setupECharts } from '@aparte/plugin-echarts';

setupECharts();
```

`@aparte/core` 财务报告和审定财务报表 `echarts` (6.0或更后)为 **同行依赖关系**. ECharts 装入到 第一张图表,不是在之前,一个图表只有在靠近屏幕时才被绘制出来,所以重新打开一个 长话短说.

## 栅栏

尸体是ECHHarts的自己,是ECHarts的,是ECHARTS的自己 `option`作为JSON——没有什么新东西可以学习, 和什么模型已经 从ECharts的文档中知道. `echart` 也是语言.

````md
```echarts
{
  "title": { "text": "Sales by month" },
  "tooltip": { "trigger": "axis" },
  "xAxis": { "type": "category", "data": ["Jan", "Feb", "Mar"] },
  "yAxis": { "type": "value" },
  "series": [{ "name": "Sales", "type": "bar", "data": [120, 200, 150] }]
}
```
````

虽然答复流出,但图表取自JSON中已经到达的部分,即: 最后的整数值,括号被关闭——最多每300 ms,所以条以数字形式出现 do;每个帧更新相同的图表. 一旦栅栏关闭, 一个无效的JSON—— 或者是, 但是没有 `series` 没有 `dataset` 绘制——显示注释及其出处.

## 一个工具的结果

```ts
setupECharts({
  tool: 'plot_sales',                        // a name, a RegExp, or an array of them
  map: (result, input) => ({                 // optional: your tool's data → an ECharts option
    title: { text: String(input.metric) },
    xAxis: { type: 'category', data: result.months },
    yAxis: {},
    series: [{ type: 'line', data: result.values }],
  }),
});
```

无 `map`,结果本身就是选择: `structuredContent` 当它有一个, 否则它的 文本读作JSON。 当工具运行时,一个静静的盒子将显示图表的位置;等待 批准,拒绝,停止或失败, 单行本说.

## 聊天的颜色

图表取自聊天符号的外观——正文(`--aparte-text`),轴标签 (单位:千美元)`--aparte-text-muted`),轴线和网格线(`--aparte-border`),工具提示的地盘 (单位:千美元)`--aparte-surface-1`),字体(`--aparte-font-family`)),作为透明背景——作为 欧共体 **主题**,所以任何选项设置自己 胜过它。 轻/暗开关转接器 所设置的图表( e)`setTheme`),没有再画.

系列颜色从 `--aparte-primary`,然后验证8个色视 缺损(每相邻一对至少8-----------------------------------------------------------------------------------) 15分全色视星等的 三色视星等 一次踩出亮地 一次踩出暗地 连锁店都开着 初等货代替距离最近的货 ——以一铜为主取而代之的是"黄"——所以没有两人相并相并相并相并相并相并相相并相并相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相 他们是 `ECHARTS_SERIES_HUES`· ; `echartsPalette(primary, dark)` 给命令.

`echartsTheme(tokens)` 是主题本身, 纯正的—— 同样的符号使主题相同, 在节点 和浏览器一样,对于一个应该看起来像聊天的图表:

```ts
import * as echarts from 'echarts';
import { echartsTheme, type EChartsTokens } from '@aparte/plugin-echarts';

const tokens: EChartsTokens = {
  text: '#241f2b', muted: '#6d6479', border: '#e5ddce',
  surface: '#fffdf8', background: '#f6f2ea', primary: '#b07d33',
};
echarts.init(document.getElementById('my-chart')!, echartsTheme(tokens), { renderer: 'svg' });
```

## 大小、动作、屏幕阅读器

该图填充了气泡的宽度,最高可达40雷姆,在 `height` (默认为18雷姆) 框中。 它用 ECharts 的 SVG 渲染器绘制: 在任何缩放时都清晰,其正文为 真实文本。 下 `prefers-reduced-motion` 无动静:动画在根上被关闭,在每一个上 系列,打开 `graphic` 和在a中 `baseOption`,一个时间线不 发挥自己,一个 `effectScatter` 只有悬浮时才有波纹 `lines` 未绘制线索.

这是一个 `figure` 按选项命名 `title.text`,还有"图". 里面是ECHHarts自己写的 说明在(`aria.enabled`,在聊天语言中,当该语言注册时 ECharts, 英语除外)在插件自己的设置中——一个选项不能关闭其标签或 改为: `description` 国家;仅指 `aria.decal` 保留。 一个视觉隐藏的表格 当选项说得很清楚时, 持有数字: a `dataset` (其第一行标题) eCharts的阅读方式 `sourceHeader`),一个带有其序列的分类轴,或者一个派命名的值. A 类 没有数据的序列没有列,表格以1000行、50列和10 000个单元格止步, 无论选项问什么——最后一行也隐藏着,当它只列出部分数据时就表示.

它的词跟随聊天语言(其中十个是用语言建的),可以被设定为: `extendLocale()`数字 :

```ts
aparteGlobalConfig.extendLocale({
  echartsChart: 'Chart',                           // the name of an untitled chart
  echartsError: 'This chart could not be drawn.',
  echartsLoading: 'Loading chart',
  echartsWaiting: 'Waiting for your approval',
  echartsNotRun: 'No chart: the tool did not run.',
  echartsFailed: 'No chart: the tool failed.',
  echartsTableCut: 'Only part of the data is listed.', // the hidden table's last line, when it is cut
});
```

## 选项

`setupECharts(options?, config?)` 带 `EChartsOptions`数字 :

| 选项 | 默认 |  |
| --- | --- | --- |
| `progressive` | `true` | `false` 栅栏关闭后绘制图表 |
| `height` | `'18rem'` | 像素,或 CSS 长度 |
| `renderer` | `'svg'` | `'canvas'` 数以万计的图表 |
| `tool` | —— 说 | 其结果为选项的工具 |
| `map` | —— 说 | `(result, input) => option` |

两种设置函数都返回一个处理器,该处理器可以解除渲染器的注册,停止观看主题 并销毁他们绘制的每一张图表.

## 模特儿的选择是不行的

选项来自模型或工具,所以 `sanitizeEChartsOption(option)` 随便拿掉什么 ECharts在绘制前会变成HTML,请求或导航——并且只有:

-   **工具提示被绘制出,从不写作HTML.** 每个 `tooltip` ("根","系列","数据") 强制 `renderMode: 'richText'`,则只使用 HTML `extraCssText`, (中文(简体) ), `className`, (中文(简体) ), `appendTo` 财务报告和审定财务报表 `appendToBody` 开始 字符串 `formatter` 保留:以丰富文本模式 ECharts 绘制 作为文本,所以 `<b>` 显示为 `<b>`。 。 。 .
-   **没有下载,没有HTML面板.** `toolbox.feature.saveAsImage` (下载,或新标签)和 `toolbox.feature.dataView` (一个带有文本区域的HTML表格)去.
-   **没有照片.** A 类 `graphic` 要素 `type: 'image'`,任何带有 `image` (图) 填充,丰富文本背景)或 `svgElement` (一个SVG模式ECharts通过节点建立节点——) (单位:千美元) `<script>` 将运行),任何 `image://…` 字符串(一个符号、一个图例或手柄图标),以及任何 字符串持有 CSS `url(…)` (填入另一个文件)读取其CSS 越出解码,因为一个填充需要 `u\rl(` 作为 `url(`; 任何字符串将反斜线与 括号也去.
-   **只有颜色去的地方.** ECharts 副本 a `color`, (中文(简体) ), `fill`, (中文(简体) ), `stroke` 或任何 `…Color` 输入 SVG 属性,所以只保留颜色语法:一个名称, `#hex`,或 `rgb()` 编号 : `rgba()` 编号 : `hsl()` 编号 : `hsla()` 最多64个字符。 梯度是对象 ECharts 自建;其停站也按同样方式检查.
-   **仅作为光标的关键字 .** 序列或元素 `cursor`数据Zoom的 `cursorGrab` 编号 : `cursorGrabbing`当它们成为关键词时留下 (单位:千美元)`pointer`, (中文(简体) ), `not-allowed`, (中文(简体) ), `grab`(三); `image-set("https://…")` 因为浏览器会 当指针通过图表时获取图片.
-   **无正则表达.** 数据集 `filter` 变换 `reg` 编译并运行于每个 值,且图案可以回溯分钟(`^(a+)+$`因此,每个 `reg` 继续.
-   **无链接.** 字符串 `link` 或者说 `sublink` (标题、树图或日出节点——ECharts打开) 点击它,和 `javascript:` 将运行在页面中)去.
-   **通过字体没有 CSS .** ECharts 写着 `fontFamily`, (中文(简体) ), `fontSize`, (中文(简体) ), `fontStyle`, (中文(简体) ), `fontWeight` 财务报告和审定财务报表 `font` 改为 a `style` 属性; 含有字体名称以外的任何值.
-   `__proto__`, (中文(简体) ), `constructor` 财务报告和审定财务报表 `prototype` 钥匙去.

功能不能到达JSON,所以 `formatter` 或者说 `renderItem` 召回从来没有。 选项 作为图中元素属性的逃出值( 栅栏) 手芯标记,而不是节点; ECharts将其引入该元素,表格的单元格是 写成文字.

## 两个切入点

`@aparte/plugin-echarts` 以第一个图表为基础导入完整的ECharts。 要交出你 拥有——一个只有您使用的图表的更小的建筑——从没有进口的条目导入 从 `echarts`数字 :

```ts
import * as echarts from 'echarts/core';
import { BarChart, LineChart, PieChart } from 'echarts/charts';
import {
  AriaComponent, DatasetComponent, GridComponent, LegendComponent, TitleComponent, TooltipComponent,
} from 'echarts/components';
import { SVGRenderer } from 'echarts/renderers';
import { setupEChartsWith } from '@aparte/plugin-echarts/core';

// `AriaComponent` and `SVGRenderer` are what the plugin itself uses.
echarts.use([
  BarChart, LineChart, PieChart,
  AriaComponent, DatasetComponent, GridComponent, LegendComponent, TitleComponent, TooltipComponent,
  SVGRenderer,
]);
setupEChartsWith(echarts);
```

`setupEChartsWith` 将模块,或函数返回其承诺,以及任何对象 形状像 `EChartsLike` (单位:千美元)`init`,返回一个 `EChartsInstanceLike`数字 : `setOption`, (中文(简体) ), `setTheme`, (中文(简体) ), `resize`, (中文(简体) ), `dispose`) (中文(简体) ). 您的建筑缺少的序列类型图表显示了注释 。 这个 `/core` 条目导出相同的助手和类型 : `sanitizeEChartsOption`, (中文(简体) ), `echartsTheme`, (中文(简体) ), `echartsPalette`, (中文(简体) ), `ECHARTS_SERIES_HUES`, (中文(简体) ), `EChartsOption`, (中文(简体) ), `EChartsTokens`, (中文(简体) ), `EChartsOptions`。 。 。 .

仅限无害环境管理.

## 常见问题

### @aparte/plugin-echarts 是什么？

通过 Apache ECharts 区分的图表 – 一个 ECharts 选项 一个模型写作,或者一个工具返回,当它流出时绘制\.

### 如何安装 @aparte/plugin-echarts？

在项目目录运行 npm install @aparte/plugin-echarts，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：echarts（\>=6\.0\.0 \<7\.0\.0）、@aparte/core（\>=1\.0\.2 \<2\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @aparte/plugin-echarts 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @aparte/plugin-echarts 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @aparte/plugin-echarts 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=18。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @aparte/plugin-echarts 可以商用吗？

@aparte/plugin-echarts 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @aparte/plugin-echarts 的下载量有多少？

根据 npm 官方下载统计，@aparte/plugin-echarts 在 2026/10/06 – 2026/11/04 这 30 天内被下载 1,935 次，日均约 65 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @aparte/plugin-echarts 还在维护吗？

最新版本 1\.0\.2 发布于 2026/11/08（今天）；至今共发布 14 个版本，其中过去 12 个月发布了 14 个；首次发布于 2026/11/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。