概述

主要功能

丰富的图表类型：支持折线图、柱状图、散点图、饼图、雷达图、K线图、仪表盘、漏斗图、热力图、关系图、矩形树图、桑基图等
声明式 API：基于简单配置的方法创建复杂可视化
交互式体验：内置缩放、平移、框选和工具提示支持
响应式设计：图表自动适应容器大小变化
多种渲染选项：支持 Canvas（默认）和 SVG 渲染
大数据集支持：优化以高效处理大量数据
跨平台兼容性：在现代浏览器和移动设备上均可运行

架构概述

ECharts 采用模块化、基于组件的架构构建，可以通过配置灵活地构建图表。

来源：package.json1-225 src/core/echarts.ts1-150 README.md1-98

核心系统

核心系统是 ECharts 的基础。它负责初始化、选项处理以及各个组件之间的协调。主要的入口点是在 src/core/echarts.ts 中定义的 ECharts 类。此类提供了公共 API，包括以下方法：

init(): 创建一个新的 ECharts 实例
setOption(): 配置图表选项
getOption(): 获取当前配置
dispatchAction(): 以编程方式触发动作
on()/off(): 注册/移除事件处理器

类型系统

ECharts 使用 TypeScript 进行类型安全，其主要配置接口为 ECUnitOption。类型系统定义了所有图表配置的结构，并确保整个库中的类型一致性。

数据管理

ECharts 通过以下几种关键机制管理数据：

列表（List）：一种高效的多维数据结构，用于存储和访问系列数据
数据集（Dataset）：一个组件，允许集中管理数据并将数据与视觉配置分离
数据转换（Data Transform）：用于在可视化之前对原始数据进行预处理和转换的功能

组件

组件是可重用的构建块，为图表添加特定功能：

工具提示（Tooltip）：在鼠标悬停数据点时显示详细信息
坐标轴（Axis）：定义坐标系（如直角坐标系、极坐标系等）
图例（Legend）：标识不同的数据系列
数据区域缩放（DataZoom）：支持大数据集的缩放和导航
直角坐标系网格（Grid）：管理直角坐标系图表的布局

图表类型

不同的图表类型实现特定的可视化逻辑：

折线图/柱状图：用于趋势和比较分析
饼图/旭日图：用于显示比例关系
关系图/树图：用于网络和层次结构数据
矩形树图/桑基图：用于显示层次结构和流量数据

数据流

下图展示了数据和控制流在 ECharts 系统中的传输方式：

来源：src/core/echarts.ts200-400 README.md10-35

数据流过程包括以下关键步骤：

初始化：用户使用 echarts.init() 创建 ECharts 实例
配置：用户使用 setOption() 配置图表
数据处理:
- 原始数据通过数据集和转换进行处理
- 结果存储在优化后的数据结构中
视觉编码:
- 数据值映射到视觉属性
- 管理视觉状态以实现交互
- 准备动画
渲染:
- 图表视图和组件视图创建视觉元素
- ZRender 处理向 Canvas 或 SVG 的绘制
交互:
- 用户交互触发事件
- 系统响应并更新
- 高亮元素的视觉状态发生变化

基本用法

以下是一个简单示例，演示了 ECharts 的核心使用模式：

此示例：

在 DOM 元素中创建 ECharts 实例
配置包含标题、工具提示、坐标轴和数据系列的柱状图
添加点击事件处理器
确保图表在窗口大小改变时自动调整

核心概念

选项配置

setOption() 方法是配置 ECharts 实例的主要方式。配置对象遵循声明式模式，您只需指定想要什么，而不必关心如何实现。ECharts 会自动处理实现细节。

组件组合

图表由多个可灵活组合的组件构成：

折线图通常使用 X/Y 轴、工具提示和图例组件
饼图可能使用工具提示、图例和视觉映射组件
不同类型的多个系列可以组合在一个图表中

事件与交互

ECharts 提供了丰富的事件集，允许您响应用户交互：

鼠标事件（点击、鼠标悬停等）
框选事件
图例选择事件
缩放和平移事件

dispatchAction() 方法允许您以编程方式触发高亮、选择或缩放等动作。

概述