Chart 图表

基于 ECharts 封装的图表组件。组件本身不绑定任何图表类型，传入不同的 option 配置即可渲染出折线图、柱状图、饼图等不同图表。

依赖说明

echarts 作为可选 peerDependency，使用图表组件前需要在你的项目中单独安装：

npm install echarts
# 或
pnpm add echarts

基础用法

把一份标准的 ECharts option 传给 option 属性即可。组件会在挂载后自动初始化图表，并在容器尺寸变化时自动 resize。

配置驱动：切换图表类型

同一个组件，只需改变传入的 option，即可在不同图表之间切换。切换整张配置时建议带上 :update-options="{ notMerge: true }"，避免上一张图的 series 残留。

加载状态

通过 loading 控制加载动画，loading-options 可自定义加载文案与样式。

监听事件

组件会把绑定的 @click、@legendselectchanged、@datazoom 等监听器，自动注册为对应的 ECharts 原生事件，回调参数与 ECharts 一致。

获取 ECharts 实例

通过模板 ref 拿到组件实例后，可调用 getInstance() 获取底层 ECharts 实例，从而使用任意原生 API（如导出图片、dispatchAction 等）。

多图联动

为多个图表设置相同的 group，它们的 tooltip 与 dataZoom 会自动联动（鼠标在一个图表上移动，另一个图表的提示框同步显示）。

性能与自适应

• 自适应：组件内置 ResizeObserver，容器尺寸变化时自动重绘，并对 resize 做了节流（默认 100ms），容器隐藏（0 尺寸）时自动跳过。可通过 :autoresize="{ throttle: 200, onResize: fn }" 自定义。
• 大数据量：开启 manual-update 后，组件不再深度监听 option，改由你通过 ref 的 setOption 主动更新，避免大对象的响应式遍历开销。
• 无内存泄漏：组件卸载时会自动销毁 ECharts 实例、断开 ResizeObserver 并清理节流定时器。

API

属性 Props

属性名	说明	类型	默认值
option	图表配置项，即标准的 ECharts option，传不同配置渲染不同图表	object	{}
theme	主题：内置主题名称（如 dark）或自定义主题对象	string | object	''
init-options	echarts.init 的初始化参数（renderer、devicePixelRatio 等）	object	{}
update-options	setOption 的更新参数（notMerge、lazyUpdate、replaceMerge）	object	{}
autoresize	容器尺寸变化时自动 resize；可传对象配置节流间隔与回调	boolean | { throttle?: number; onResize?: (size) => void }	true
manual-update	手动更新模式，开启后 option 变化不再自动 setOption，由 ref 驱动（适合超大数据量）	boolean	false
loading	是否显示加载动画	boolean	false
loading-options	加载动画配置（text、color、maskColor 等）	object	{}
group	分组名称，相同 group 的图表会通过 ECharts connect 自动联动 tooltip / dataZoom	string	''

事件 Events

组件会将所有 on* 监听器透传为同名（小写）的 ECharts 原生事件，回调参数与 ECharts 保持一致。常用事件如下：

事件名	说明	回调参数
click	点击图形元素时触发	params
dblclick	双击图形元素时触发	params
mouseover	鼠标移入图形元素时触发	params
mouseout	鼠标移出图形元素时触发	params
legendselectchanged	图例选中状态变化时触发	params
datazoom	数据区域缩放时触发	params
finished	渲染完成时触发	—

更多事件请参考 ECharts 事件文档。

方法 Expose

通过模板 ref 调用：

方法名	说明	参数
getInstance	获取底层 ECharts 实例	—
setOption	手动设置图表配置	(option, opts?)
resize	手动触发重绘	(opts?)
clear	清空当前图表	—
dispose	销毁图表实例	—
showLoading	显示加载动画	—
hideLoading	隐藏加载动画	—