Echarts支持哪些交互功能

ECharts交互功能全览

核心交互能力

• 鼠标悬停与高亮：支持将鼠标悬停的数据项高亮，含系列的聚焦与邻接高亮（如关系图的相邻节点/边高亮），提升可读性与聚焦分析效率。
• 提示框 Tooltip：在悬停时展示维度与数值明细，可配置触发方式（如按坐标轴或数据项）、轴指示器样式等。
• 数据区域缩放 DataZoom：内置型（滚轮/手势）与滑动条型两种，支持对坐标轴范围进行放大缩小，便于在大数据量下聚焦细节。
• 刷选 Brush：通过框选、多边形、横向/纵向选择等方式圈定数据区域，用于筛选、高亮或联动分析。
• 图例交互：点击图例可显示/隐藏对应系列，支持多系列对比与聚焦。
• 工具箱 Toolbox：提供常用工具，如保存为图片、数据视图（查看/编辑数据）、动态类型切换（如折线/柱状）、数据区域缩放、重置等。
• 图表联动：多图表之间可基于事件进行联动（如框选后同步高亮/过滤），用于构建仪表板与多维分析视图。
• 视觉映射 VisualMap：通过颜色/尺寸映射将数据值映射为视觉通道，支持交互式的范围选择与高亮。

典型交互组件与配置要点

• DataZoom 数据区域缩放
  • 类型：内置型（inside）与滑动条型（slider），可同时配置多个作用于不同坐标轴。
  • 常用配置：start/end（百分比范围）、startValue/endValue（数值范围）、filterMode（如 ‘filter’、‘weakFilter’）、zoomOnMouseWheel、moveOnMouseMove、realtime 等。
• Brush 刷选
  • 类型：支持rect（矩形）、polygon（多边形）、lineX/lineY（横向/纵向）。
  • 模式与行为：brushMode（‘single’/‘multiple’）、brushType（默认刷选形状）、transformable（是否可移动/缩放）、throttleType/throttleDelay（节流/防抖）、removeOnClick 等。
• Tooltip 提示框
  • 触发与指示：trigger（如 ‘axis’）、axisPointer（指示器类型，如 ‘shadow’/‘line’/‘cross’），可自定义内容模板与富文本样式。
• Legend 图例
  • 交互：点击切换系列可见性，配合高亮策略实现聚焦分析。
• Toolbox 工具箱
  • 内置工具：saveAsImage、dataView、magicType（如切换 line/bar）、dataZoom、restore；支持自定义工具与图标。

事件与编程式交互

• 事件监听：通过 chart.on(‘click’/‘mouseover’ 等, handler) 捕获用户行为，执行自定义逻辑（跳转、弹窗、联动等）。
• 编程式操作：通过 dispatchAction 触发内置行为（如高亮、框选、显示/隐藏提示框），实现复杂交互流程编排。
• 动态数据更新：结合 setOption 增量更新数据或配置，实现实时/增量渲染与交互反馈。

典型场景与选型建议

• 大数据量浏览：启用 dataZoom（inside + slider） 进行缩放和平移，结合 throttle 控制性能。
• 多维筛选分析：使用 brush 圈定数据区域，联动其他图表或下钻明细。
• 仪表板联动：通过事件监听与 dispatchAction 实现多图联动、统一高亮与筛选。
• 导出与审阅：开启 toolbox.saveAsImage、dataView，便于报告输出与数据核对。