LocalStorage保存ECharts配置项需先JSON.stringify序列化，读取时用try-catch处理JSON.parse异常并校验对象有效性，更新后及时保存且建议防抖；键名应具版本和业务标识，多图表需区分键名，升级时支持版本迁移。
LocalStorage 可以直接保存 ECharts 的配置项对象，但要注意序列化和反序列化、键名设计、错误处理这几个关键点。
保存配置项：先转成 JSON 字符串
LocalStorage 只支持字符串，不能直接存对象。ECharts 配置项（比如 option）是 JS 对象，必须用 JSON.stringify() 转换后再存：
- 推荐用有意义的键名，比如
"my-chart-option-v1"，避免硬编码或冲突 - 保存前建议做简单校验，防止空对象或无效结构导致后续报错
- 示例代码：
localStorage.setItem("my-chart-option", JSON.stringify(option));
读取并还原配置：记得 try-catch 处理解析失败
从 LocalStorage 读出的是字符串，需用 JSON.parse() 还原。但用户可能手动清空、篡改或存储损坏，所以必须加异常捕获：
- 用
try...catch包裹JSON.parse()，解析失败时返回默认配置或空对象 - 检查还原后的值是否为对象且非 null，避免后续
setOption()报错 - 示例代码：
const saved = localStorage.getItem("my-chart-option");<br>let option = {};<br>try { option = JSON.parse(saved) || {}; } catch (e) { console.warn("配置解析失败，使用默认项"); }
更新配置时同步写入：在 setOption 前或交互回调里触发
个性化通常来自用户操作，比如切换主题、调整颜色、显示/隐藏系列。这些动作发生后应立即保存最新配置：
立即学习“Java免费学习笔记（深入）”；
- 监听 ECharts 实例的事件（如
legendselectchanged、datazoom），在回调中调用保存逻辑 - 如果用 Vue/React，可在响应式数据变化后（如 computed 或 useEffect）触发保存
- 避免高频保存（如拖拽缩放中连续写入），可加防抖（debounce）控制频率
清理与兼容：注意跨页面/跨版本场景
同一个键名在不同页面或 ECharts 版本下可能不兼容，需要主动管理：
- 升级图表结构时，可增加版本号字段（如
option.version = "2.0"），读取时按版本迁移 - 提供“恢复默认”按钮，对应执行
localStorage.removeItem("my-chart-option") - 多图表共存时，用不同键名区分，例如
"dashboard-sales-option"和"dashboard-user-option"
不复杂但容易忽略细节，核心就三点：存前 stringify、取时 try-catch、变后及时存。
