导语
产品经理在设计数据可视化功能时，往往需要了解 ECharts 能实现哪些能力、如何配置才能满足业务需求。本文从产品设计角度梳理 ECharts 的 8 大核心概念，包括图表容器管理、样式配置、数据处理、交互设计等，帮助产品经理在 PRD 中准确描述图表需求，避免因概念不清导致的开发返工。
TL;DR 快速结论
- 容器管理：图表需要绑定 HTML 容器，支持响应式调整，容器销毁时需释放资源避免内存泄漏
- 样式配置：提供主题、调色盘、直接样式设置三种方式，可灵活控制图表外观
- 数据管理：数据集（dataset）实现数据与配置分离，支持多格式数据源，便于数据复用和动态更新
- 数据转换：内置 filter、sort 等转换器，支持数据筛选、排序、统计运算，无需后端预处理
- 坐标轴设计：x 轴展示维度（类别），y 轴展示数值（指标），支持多轴、区域缩放、自定义样式
- 视觉映射：通过 visualMap 将数据维度映射到颜色、大小等视觉元素，实现多维数据展示
- 图例交互：支持点击显示/隐藏系列，可滚动翻页，适用于多系列图表
- 事件处理：支持鼠标事件和行为事件，可实现数据下钻、详情查看、自定义交互等产品功能
是什么：ECharts 核心概念的定义
ECharts 的核心概念是构建数据可视化图表的基础组件和能力，包括容器管理、样式配置、数据处理、视觉映射、交互设计等 8 个方面。理解这些概念有助于产品经理在设计 PRD 时准确描述图表需求。
图表容器及大小
图表容器是图表渲染的 DOM 节点，通常是一个 <code><div></code> 元素。容器必须有明确的宽度和高度，图表大小默认等于容器大小，也可以在初始化时指定独立大小。
关键要点：
- 容器通过 HTML 和 CSS 设置尺寸
- 支持响应式调整，需监听 resize 事件
- 容器销毁时需调用 dispose 释放资源
样式配置
ECharts 提供三种样式配置方式：颜色主题（全局样式）、调色盘（系列颜色）、直接样式设置（元素级样式）。产品经理可根据品牌统一性、个性化需求选择合适的配置方式。
数据集管理
数据集（dataset）是专门管理数据的组件，实现数据与配置分离。数据可以设置在系列中，也可以集中在数据集中，后者更符合数据可视化思维，支持数据复用和多格式导入。
为什么：核心概念的价值与应用场景
容器管理的必要性
问题场景：页面布局变化、窗口大小调整、标签页切换时，图表需要自适应调整或正确释放资源。
解决方案：
- 响应式布局：监听 resize 事件自动调整图表大小
- 生命周期管理：容器销毁时释放资源，重建时重新初始化
适用场景：响应式数据大屏、标签页图表、动态容器创建
数据集的价值
传统方式痛点：数据分散在各系列中，难以复用，数据格式转换繁琐。
数据集优势：
- 数据与配置分离，数据常变而配置常不变
- 支持多系列复用同一份数据
- 支持多种数据格式，减少格式转换
适用场景：多系列图表、动态数据更新、Excel/数据库数据导入
数据转换的应用
业务需求：原始数据不符合图表格式，需要筛选、排序、统计运算。
数据转换能力：
- filter：按条件筛选数据
- sort：单维度或多维度排序
- 外部转换器：回归、聚类、直方图等统计功能
适用场景：数据预处理、多图表展示、统计分析
怎么做：核心概念的使用方法
容器响应式处理
步骤：
- 容器使用百分比宽度或固定尺寸
- 监听 window resize 事件
- 调用 <code>myChart.resize()</code> 调整图表大小
注意事项：
- 如果容器大小通过 JS/CSS 改变但页面未变，resize 事件不会触发，需使用 ResizeObserver
- 标签页切换场景需在容器销毁时调用 dispose，重建时重新 init
样式配置选择
决策树：
- 需要全局统一风格 → 使用颜色主题
- 需要系列差异化颜色 → 使用调色盘
- 需要精细控制单个元素 → 使用直接样式设置
最佳实践：
- 深色背景建议使用浅色文字和半透明背景
- 图例较多时启用滚动模式
- 保持同一页面图例位置一致
数据集使用流程
推荐流程：
- 将数据统一放在 dataset 中
- 通过 encode 指定数据到视觉的映射
- 系列通过 datasetIndex 引用数据集
数据格式选择：
- Excel 导出 → 二维数组
- 数据库查询 → 对象数组（key-value）
- API 返回 → 按列的 key-value 形式
对比与取舍：不同配置方式的优劣
数据设置方式对比
| 方式 | 优势 | 劣势 | 适用场景 |
|---|---|---|---|
| series.data | 适合特殊数据结构，灵活 | 数据分散，难以复用 | 树图、关系图等特殊图表 |
| dataset | 数据集中管理，易于复用 | 部分图表不支持 | 柱状图、折线图等常规图表 |
建议：常规图表优先使用 dataset，特殊图表使用 series.data
样式配置方式对比
| 方式 | 适用场景 | 配置复杂度 |
|---|---|---|
| 颜色主题 | 全局统一风格，品牌一致性 | 低（一次配置） |
| 调色盘 | 系列差异化，多系列图表 | 中（按系列配置） |
| 直接样式 | 精细控制，特殊效果 | 高（逐个元素配置） |
建议：先配置主题和调色盘，再针对特殊需求使用直接样式
常见错误与排错
错误 1：容器无尺寸导致图表不显示
症状：图表区域空白，控制台无报错
原因：容器未设置宽度和高度，或初始化时容器尺寸为 0
解决方案：
- 检查容器 CSS 是否有 width 和 height
- 使用初始化参数指定图表大小
- 确认容器在 DOM 中已存在
错误 2：响应式失效
症状：窗口大小改变时图表不更新
原因：未监听 resize 事件，或容器大小改变但页面未变
解决方案：
- 添加 window resize 事件监听
- 使用 ResizeObserver 监听容器大小变化
- 手动调用 resize 方法
错误 3：内存泄漏
症状：标签页切换后图表消失，或页面卡顿
原因：容器销毁时未调用 dispose 释放资源
解决方案：
- 容器销毁时调用 <code>myChart.dispose()</code>
- 容器重建时重新 <code>init</code> 和 <code>setOption</code>
- 避免重复 init 同一 DOM 节点
错误 4：数据更新不生效
症状：数据变更后图表未刷新
原因：未使用 setOption 更新，或系列 name 未对齐
解决方案：
- 数据变更后调用 <code>setOption</code> 更新
- 使用系列 name 确保更新命中正确系列
- 检查数据格式是否正确
FAQ 常见问题
Q1：什么时候需要多个坐标轴？
A：当需要同时展示不同量纲的数据时（如销售额和用户数），或需要对比不同指标时，可以使用多个 y 轴。注意单个 grid 最多支持两个 x/y 轴，更多轴需配置 offset 防止重叠。
Q2：数据集和 series.data 可以混用吗？
A：可以，但如果系列已声明 series.data，则优先使用 series.data 而非 dataset。建议统一使用一种方式，避免混淆。
Q3：如何实现图表联动？
A：通过事件监听实现。监听一个图表的点击事件，在回调中更新另一个图表的数据，或使用 dispatchAction 程序化触发图表行为。
Q4：图例太多显示不下怎么办？
A：启用滚动模式（type: 'scroll'），支持横向或纵向滚动。也可以考虑将图例放在图表下方，或减少数据系列数量。
Q5：数据转换会影响原始数据吗？
A：不会。数据转换会生成新的数据集，原始数据保持不变。可以基于同一份原始数据生成多个转换后的数据集。
Q6：视觉映射和直接设置颜色有什么区别？
A：视觉映射是根据数据值自动映射颜色/大小，适合展示数据分布和相关性。直接设置颜色是固定颜色，适合强调特定数据或品牌一致性。
延伸阅读与引用
总结
ECharts 的 8 大核心概念构成了数据可视化的完整能力体系。产品经理在设计 PRD 时，应明确图表容器的响应式需求、样式配置方式、数据管理策略、交互设计需求等，避免因概念不清导致的开发返工。掌握这些核心概念，能够更准确地描述图表需求，提升产品设计效率。