本指南解释了如何安装 Apache ECharts，并提供了将图表集成到您的 Web 应用程序中的基本使用模式。有关核心系统架构的信息，请参阅架构。
Apache ECharts 可以通过多种方法引入到您的项目中。
来源: package.json2-41 README.md17-21
现代 Web 应用程序推荐的安装方法是使用 npm。
安装后，您可以在项目中导入 ECharts。
来源: package.json17-18 package.json106-222
您可以直接从 Apache ECharts 官方网站下载库。
来源: README.md19
对于快速原型开发或小型项目，您可以从 CDN 使用 ECharts。
来源: README.md21 package.json19
ECharts 提供多种构建版本以适应不同的需求。
| 构建 | 文件 | 描述 | 用例 |
|---|---|---|---|
| 完整版 | dist/echarts.js | 包含所有图表和组件 | 全功能应用程序 |
| 完整版（压缩） | dist/echarts.min.js | 完整构建的压缩版本 | 生产环境 |
| 通用 | dist/echarts.common.js | 包含常用图表和组件 | 大多数应用程序 |
| 简单 | dist/echarts.simple.js | 仅包含基本图表 | 基本可视化 |
| ESM | dist/echarts.esm.js | ES 模块格式 | 支持 tree-shaking 的现代打包工具 |
来源: package.json106-223 dist/echarts.js1-25 dist/echarts.min.js1-20 dist/echarts.common.js1-20 dist/echarts.simple.js1-20 dist/echarts.esm.js1-20
创建图表的基本过程包括创建 DOM 容器、初始化 ECharts 实例和设置选项。
基本初始化代码
来源: src/core/echarts.ts395-496 src/core/echarts.ts578-615
初始化 ECharts 时，您可以指定多个选项。
来源: src/core/echarts.ts321-331 src/core/echarts.ts444-457
在 setOption 方法是配置图表的核心 API。
option: 图表配置对象notMerge: 是否与现有选项合并（默认值：false）lazyUpdate: 是否延迟更新直到下一个动画帧（默认值：false）silent: 在此更新期间是否阻止触发事件（默认值：false）replaceMerge: 要替换而非合并的组件transition: 更新的动画配置来源: src/core/echarts.ts596-615 src/core/echarts.ts613-690
处理窗口大小调整或容器大小变化
来源: src/core/echarts.ts226-231 src/core/echarts.ts486
ECharts 为交互式可视化提供了丰富的事件系统。
事件处理示例
来源: src/core/echarts.ts238-256 src/core/echarts.ts312-320
ECharts 包含以编程方式触发图表交互的方法。
来源: src/core/echarts.ts802-863
ECharts 实例上的常用方法
| 方法 | 描述 |
|---|---|
setOption(option, [opts]) | 设置图表配置 |
getWidth() | 获取图表容器宽度 |
getHeight() | 获取图表容器高度 |
getDom() | 获取图表容器 DOM 元素 |
resize([opts]) | 调整图表大小 |
dispatchAction(payload) | 分派图表动作 |
on(eventName, handler) | 注册事件处理程序 |
off(eventName, handler) | 注销事件处理程序 |
clear() | 清空图表 |
dispose() | 销毁图表实例 |
来源: src/core/echarts.ts610-990
ECharts 支持主题，以实现在不同图表间保持一致的样式。
来源: src/core/echarts.ts395-465 src/core/echarts.ts406-408
您可以在等待数据时显示加载动画。
来源: src/core/echarts.ts951-975
对于实时数据应用，您可以高效地更新图表。
来源: src/core/echarts.ts610-690
ECharts 同时支持 Canvas 和 SVG 渲染。
来源: src/core/echarts.ts446-447
您可以将图表导出为各种格式。
来源: src/core/echarts.ts734-747 src/core/echarts.ts764-782
适用于大型数据集或复杂可视化
在不再需要图表时正确销毁它们