Pinia通过结构化range和filters字段管理图表缩放与筛选状态，支持联动更新、防抖重绘、本地持久化及跨组件共享。
Pinia 结合图表组件管理数据缩放与筛选状态，关键在于将这些交互行为抽象为可复用、可追踪、可持久化的状态字段，并通过响应式机制驱动图表实时重绘。它不是简单存个数字，而是把“用户当前看到什么、按什么条件看”变成结构化、带上下文的状态对象。
缩放状态：用连续数值 + 作用范围建模
图表缩放（如时间轴缩放、坐标轴缩放）本质是视图范围的变更。Pinia 中应定义明确的 range 类型字段，而非仅存 zoomLevel：
-
推荐结构：在图表 store（如
useChartStore）中定义xRange: [number, number]和yRange: [number, number]，对应当前可视区间边界值 -
联动逻辑：ECharts 的
dataZoom或 D3 的 scale 变更后，通过事件回调同步更新 store 中的 range；反过来，store 更新也触发setOption({ dataZoom: [...] }) -
避免陷阱：不直接存缩放比例（如
scaleX = 2.5），因为比例依赖初始范围，跨图表/重载时易失真；用绝对区间值更稳定、可序列化
筛选状态：结构化保存维度+值，支持组合与回溯
筛选不是“开了/关了”，而是多维条件的快照。Pinia 应以键值对形式组织，便于扩展和 UI 映射：
-
字段设计：定义
filters: Record<string string number></string>，例如{ category: 'sales', year: [2024, 2025], region: ['East', 'West'] } -
操作封装：在 actions 中提供
setFilter(key, value)、clearFilter(key)、resetAllFilters()，内部自动触发数据重请求或本地过滤 -
历史支持：配合
chartHistoryStore（如 GoView 中的实现），每次筛选变更都 push 一条快照，实现“撤销筛选”或“对比上一状态”
状态同步：绑定图表实例与 store 响应式字段
图表组件本身不维护状态，只消费 store 数据并反馈变更：
-
初始化绑定：组件 setup 中调用
const chartStore = useChartStore()，将chartStore.xRange和chartStore.filters作为计算属性传入图表配置 -
事件代理：监听图表的
datazoom、legendselectchanged等事件，在回调中调用chartStore.updateXRange(...)或chartStore.setFilter(...) -
防抖与节流：高频缩放（如鼠标拖拽）下，用
useDebounce包裹 store 更新，避免连续触发重绘或请求
持久化与共享：让筛选缩放“不丢失”
用户刷新页面或切换图表后，仍需恢复上次视图：
-
自动保存：在 store 的
actions中，updateXRange或setFilter执行后，调用localStorage.setItem('chart-state-v1', JSON.stringify(this.$state)) -
启动恢复：store 的
state初始化函数中读取 localStorage，若存在则合并覆盖默认值（注意类型校验，防止旧格式崩坏） - 跨组件同步：多个图表共用同一份筛选（如主表联动子图），只需它们使用同一个 store 实例——Pinia 天然单例，无需额外处理
