在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

apache/echarts

菜单

组件

相关源文件

本文档概述了构成 ECharts 可视化图表的可复用组件。组件是模块化、可配置的构建块，通过提供交互式和信息丰富的元素（如提示框、图例、坐标轴等）来增强图表。有关图表类型本身的信息，请参阅图表类型。

组件系统架构

在 ECharts 中，组件遵循模型-视图（Model-View）架构模式，将数据处理与视觉渲染分离。每个组件都包含：

  • ComponentModel：管理配置选项和数据
  • ComponentView：处理渲染和交互

来源

组件注册与生命周期

组件在 ECharts 系统中注册，并遵循初始化、渲染和销毁的生命周期。

来源

核心组件

工具提示

提示框组件在用户悬停或点击图表元素时显示详细信息。

提示框系统支持两种渲染模式：

  • HTML：为提示框内容创建 DOM 元素（通过 TooltipHTMLContent）
  • 富文本：使用画布渲染提示框（通过 TooltipRichContent）

主要功能

  • 可配置定位和触发方式（悬停/点击）
  • HTML/富文本格式选项
  • 动画和过渡效果
  • 可定制的外观和内容

来源

图例

图例组件显示图表系列的键，允许用户识别和切换系列的可见性。

主要功能

  • 从系列数据自动生成
  • 自定义样式和格式
  • 系列切换功能
  • 支持不同的方向和布局
  • 批量操作选择器（全选/反选）

来源

轴

坐标轴为数据可视化提供刻度和坐标。ECharts 支持各种坐标轴类型，包括直角坐标系（X/Y）和极坐标系（角度/半径）。

主要功能

  • 多种坐标轴类型（数值、类目、时间、对数）
  • 自动刻度计算和格式化
  • 标签旋转和溢出处理
  • 网格线和分隔区域
  • 用于交互式数据探索的坐标轴指示器

来源

数据区域缩放

数据区域缩放（DataZoom）允许用户通过缩放或选择感兴趣的区域来聚焦特定数据范围。

主要功能

  • 多种类型：滑动条、内置（交互式）、选择
  • X/Y/双维度范围选择
  • 平移和缩放交互
  • 与坐标轴刻度联动
  • 基于选择的数据过滤

来源

地理可视化

ECharts 提供地图和地理组件，用于地理数据可视化。

主要功能

  • 地图数据加载和渲染
  • 区域高亮和选择
  • 地理坐标映射
  • 缩放和平移功能
  • 与各种图表类型（散点图、热力图、折线图）集成

来源

工具栏

工具栏组件提供了一组工具，供用户与图表进行交互。

主要功能

  • 数据导出（保存为图片）
  • 数据视图和编辑
  • 状态恢复
  • 缩放控制
  • 自定义功能扩展

来源

符号和视觉元素

组件通常使用符号和视觉元素来表示数据或交互式控件。

符号在多个组件中应用

  • 散点图和折线图中的数据点
  • 图例项
  • 提示框中的标记
  • 交互式组件中的控制点

来源

组件交互

ECharts 中的组件旨在相互之间以及与图表系列进行交互。

关键交互

  • 提示框显示悬停系列的数据
  • 图例切换系列的可见性
  • 数据区域缩放过滤系列中显示的数据
  • 坐标轴为系列数据定位提供刻度
  • 工具栏控制整体图表功能

来源

扩展和定制

ECharts 提供了扩展和定制组件的机制。

主要扩展点

  • 自定义组件模型和视图
  • 自定义渲染逻辑
  • 与现有组件集成
  • 自定义工具栏功能
  • 自定义提示框和格式化器

来源

组件选项结构

组件通过 ECharts 选项对象进行配置，每个组件都有自己的部分。

{
  tooltip: { ... },
  legend: { ... },
  xAxis: { ... },
  yAxis: { ... },
  dataZoom: [ ... ],
  toolbox: { ... },
  geo: { ... },
  // Chart series
  series: [ ... ]
}

每个组件都有自己的一组配置选项，用于控制其外观、行为和功能。

来源