请简述使用 ECharts 接收后端动态 JSON 数据并自动渲染可视化图表的完整流程。
考察说明
考察候选人使用 ECharts 处理异步数据并动态更新图表的实际能力，包括数据格式约定、初始化与更新机制。
回答思路
- 【回答框架 1】流程核心分三步：获取数据、转换数据、渲染图表。先通过 AJAX 或 fetch 请求后端接口，拿到 JSON 格式的响应数据；再根据 ECharts 的 option 结构，将数据映射到 series 和 xAxis 等字段；最后调用 chart.setOption(option) 完成渲染，首次加载和后续更新都通过 setOption 实现。
- 【回答框架 2】数据格式约定很关键：需要与后端约定统一的 JSON 结构，例如 { categories: [], series: [{ name, type, data }] }。前端拿到数据后做解析和转换，尽量保持一个独立的 transform 函数，便于测试和复用。
- 【回答框架 3】自动渲染的实现：初始化时先调用 echarts.init 获取实例，然后发送请求，在回调中把动态数据装配成 option 后 setOption。若数据不完整，可先给空数组或默认值，避免渲染异常。
- 【回答框架 4】后续动态更新：当后端数据变化时，可通过轮询、WebSocket 或用户操作触发重新获取，再次调用 setOption 即可。ECharts 会 diff 新旧 option，只更新变化部分，性能较高，但需注意设置 notMerge 或 replaceMerge 以处理结构变化。
- 【关键点 1】使用 axios 或 fetch 发起请求获取 JSON 数据，再通过 setOption 传入完整 option 渲染图表。
- 【关键点 2】前后端需约定清晰的 JSON 数据结构，便于前端映射到 ECharts 的系列 data。
- 【关键点 3】初始化仅在 DOM 元素上调用一次 echarts.init，后续更新复用实例调用 setOption。
- 【关键点 4】动态更新依赖 setOption 的合并机制，适时使用 notMerge 或 replaceMerge 以覆盖旧数据。
- 【易错点 1】直接使用后端原始 JSON 作为 option，若格式不符会导致渲染失败，必须做数据转换。
- 【易错点 2】忽略图表实例销毁和 resize，在页面切换或窗口缩放时可能造成事件绑定泄漏或显示异常。
- 【易错点 3】setOption 时默认是合并模式，若数据结构变化较大，可能导致残留旧数据，需明确 merge 模式。