以下方法为Echarts实例原型内部方法，官方配置文档或者使用手册中并未给出相关说明。对于版本变更可能跟随变化，仅使用于一些复杂定制需求或者进一步自定义化使用。

1. getModel()

作用

获取 ECharts 实例的全局 GlobalModel 对象。在 ECharts 的 MVC 架构中，Model 层负责管理所有配置项（option），GlobalModel 是根 Model，内部聚合了所有组件 Model 和系列 Model。需要注意的是，该方法在 ECharts 源码中被修饰为 private，官方建议仅在只读场景下使用。在 TypeScript 中会报私有属性错误，可使用 (chartInstance as any).getModel() 绕过。

语法

const globalModel = chartInstance.getModel();

返回值：GlobalModel 实例。

下属方法与属性

GlobalModel 提供了批量访问内部 Model 的便捷 API：

方法	参数	返回值	说明
getComponent(type, idx?)	type: 组件类型字符串（如 'grid'、'tooltip'、'legend'）；idx（可选）: 索引	ComponentModel	获取指定类型的组件 Model。若组件不存在，可能返回 undefined或将报错
getSeries()	无	SeriesModel[]	获取所有系列 Model 的数组
getSeriesByType(type)	type: 系列类型字符串（如 'bar'、'line'）	SeriesModel[]	获取指定类型的所有系列 Model
getSeriesByIndex(idx)	idx: 系列索引（数字）	SeriesModel	按索引获取系列 Model
eachComponent(type, callback)	type: 组件类型；callback: (model, index) => void	void	遍历指定类型的组件 Model
eachSeriesByType(type, callback)	type: 系列类型；callback: (series, rawIndex) => void	void	遍历指定类型的所有系列 Model

SeriesModel 下属关键方法与属性

方法/属性	说明
getData()	返回 SeriesData 实例，用于访问该系列的数据项
seriesIndex	系列索引（来自 GlobalModel.getSeries() 返回的对象）

SeriesData 下属关键方法

方法	参数	说明
getRawDataItem(index)	index: 数据项索引	获取原始数据项对象
getItemModel(index)	index: 数据项索引	获取指定数据项的配置 Model
getVisual(key)	key: 视觉通道名称（如 'color'）	获取指定视觉编码的值
each(callback)	callback: (idx) => void	遍历所有数据项

使用示例

// 获取所有系列并收集颜色信息
const seriesColors = myChart.getModel().getSeries().map(s => ({
    seriesIndex: s.seriesIndex,
    color: myChart.getVisual({ seriesIndex: s.seriesIndex }, 'color')
}));

// 获取 grid 组件的坐标系统信息
const gridModel = myChart.getModel().getComponent('grid');
console.log(gridModel.coordinateSystem);

// 遍历所有柱状图系列
myChart.getModel().eachSeriesByType('bar', (series, rawIndex) => {
    const data = series.getData();
    data.each(idx => {
        console.log(data.getRawDataItem(idx));
    });
});

---

2. getViewOfComponentModel()

作用

根据组件 Model 实例获取对应的视图（View）实例。在 ECharts 的 MVC 设计中，View 层负责实际的渲染，包含底层的 group 图形容器，可以查询该组件渲染后的几何信息（如位置、尺寸等）。该方法同样被标记为私有方法，在 TypeScript 环境下访问可能遇到类型问题。

语法

const componentView = chartInstance.getViewOfComponentModel(componentModel);

参数：

• componentModel（ComponentModel）：通过 getModel().getComponent() 获取的组件 Model 实例。

返回值：ComponentView 实例。

下属关键属性

group（ZRender Group 元素）

返回的 View 实例上的 group 属性是一个 ZRender 的 Group 图形元素，包含了该组件的所有子图形元素。可通过以下方法获取几何信息：

方法	说明
getBoundingRect()	返回 { x, y, width, height }，表示该组件的包围盒

使用示例

// 获取图例组件的实际渲染高度
const legendModel = myChart.getModel().getComponent('legend');
const legendView = myChart.getViewOfComponentModel(legendModel);
const legendHeight = legendView.group.getBoundingRect().height;

此方法常用于动态调整 Grid 的 bottom 值，防止图例与绘图区域重叠。也可以用于获取 title、toolbox 等任意组件的实际布局尺寸以支持响应式布局。

---

3. getViewOfSeriesModel()

作用

与 getViewOfComponentModel() 类似，但专门用于获取系列（Series）对应的视图实例。该方法同样为私有方法。

语法

const seriesView = chartInstance.getViewOfSeriesModel(seriesModel);

参数：

• seriesModel（SeriesModel）：通过 getModel().getSeries() 等获取的系列 Model 实例。

返回值：ChartView 实例。

下属关键属性

同样包含 group 属性，可用于获取该系列渲染后的几何包围盒。

使用示例

// 获取第一个系列的视图及渲染尺寸
const seriesModel = myChart.getModel().getSeriesByIndex(0);
const seriesView = myChart.getViewOfSeriesModel(seriesModel);
const { x, y, width, height } = seriesView.group.getBoundingRect();

---

4. getVisual()

作用

获取由视觉映射（visualMap）或内置主题动态分配的视觉编码值，例如颜色、尺寸、透明度等。ECharts 内部有一套完整的视觉编码系统，getVisual 可以直接读取已经计算好的视觉通道值，无需自行解析配置。

语法

const visualValue = chartInstance.getVisual(target, visualType);

参数：

参数	类型	说明
target	{ seriesIndex?: number, dataIndex?: number }	目标对象：仅指定 seriesIndex 获取系列级别视觉编码；同时指定 dataIndex 可获取数据项级别视觉编码
visualType	string	视觉通道名称，如 'color'、'symbolSize'、'opacity' 等

返回值：对应的视觉通道值（类型视具体通道而定）。

注意：与 SeriesData 上的 getVisual() 不同，实例方法 chartInstance.getVisual() 支持仅传入 seriesIndex 来获取系列级别的视觉编码；而 seriesModel.getData().getVisual('color') 则用于获取数据项级别的视觉编码。

使用示例

// 获取所有系列的配色
const colors = myChart.getModel().getSeries().map(s => ({
    seriesIndex: s.seriesIndex,
    seriesColor: myChart.getVisual({ seriesIndex: s.seriesIndex }, 'color')
}));

// 获取某个数据项的视觉大小
const symbolSize = myChart.getVisual(
    { seriesIndex: 0, dataIndex: 3 },
    'symbolSize'
);

---

5. getZr()

作用

获取 ECharts 底层的 ZRender 渲染引擎实例。ZRender 是一个轻量级的 Canvas（或 SVG）绘图库，ECharts 依赖它完成所有图形绘制。通过 getZr() 可以直接在底层画布上绑定事件、添加自定义图形或执行动画等。

语法

const zr = chartInstance.getZr();

返回值：ZRender 实例。

ZRender 下属关键方法

方法	参数	说明
on(eventName, handler)	eventName: 事件名（'click'、'mousemove'、'contextmenu' 等）；handler: (params) => void	注册底层事件监听器
off(eventName)	eventName: 事件名	移除指定事件的所有监听器
add(el)	el: ZRender 图形元素	添加自定义图形元素到画布
remove(el)	el: ZRender 图形元素	移除图形元素
setCursorStyle(style)	style: CSS 光标样式字符串（如 'pointer'、'default'）	设置鼠标悬停在图表画布上时的光标样式

handler 回调参数

底层事件的 params 对象中常用的属性包括：

属性	说明
target	被点击的底层图形元素，其上可能挂载 __ec_inner_3?.dataIndex 等内部属性
offsetX / offsetY	相对于图表容器左上角的像素坐标

使用示例

// 监听图表空白区域的点击
myChart.getZr().off('click');
myChart.getZr().on('click', (params) => {
    const pointInPixel = [params.offsetX, params.offsetY];
    // 坐标转换等处理...
});

// 设置光标为手型
myChart.getZr().setCursorStyle('pointer');

注意：getZr() 绑定的是底层画布的全局事件，不会自动附带 ECharts 图表事件中的 seriesIndex、dataIndex 等业务信息。优先选择内置事件系统，仅在有特殊底层交互需求时才使用此方法。

---

6. makeActionFromEvent()

作用

将 ECharts 事件对象转换为对应的 action 对象，可用于图表间的联动操作。例如在某图表中执行了缩放操作，可将该事件转换为 action 后通过 dispatchAction 分发给另一图表，实现同步缩放。

语法

const action = chartInstance.makeActionFromEvent(event);

参数：

• event：ECharts 事件对象（通过 .on() 监听的各类组件交互事件，如 'datazoom'、'legendselectchanged' 等）。

返回值：action 对象，可直接传递给 dispatchAction()。

使用示例

// 两个图表同步 dataZoom 和 legend 操作
['datazoom', 'legendselectchanged'].forEach(eventType => {
    myChart1.on(eventType, (event) => {
        const action = myChart1.makeActionFromEvent(event);
        myChart2.dispatchAction(action);
    });
});

此方法是 echarts.connect() 的底层实现机制——connect 会自动实现多图联动，但如果需要精细控制哪些事件同步或者将缩放事件转发到完全独立的无关联图表实例上，则可使用 makeActionFromEvent + dispatchAction 方案。

---

7. updateLabelLayout()

作用

手动触发 ECharts 的标签布局（Label Layout）重新计算。ECharts 5.0+ 内置了标签防重叠系统，可自动隐藏重叠标签或调整其位置。updateLabelLayout() 用于在数据动态更新后强制重新计算标签位置。

语法

chartInstance.updateLabelLayout();

参数：无。

返回值：无。

使用场景

• 调用 setOption 更新数据后，标签未及时刷新

• 容器尺寸变化后需要重新布局标签

• 数据删除后图表未正确更新时辅助刷新

使用示例

// 数据更新后刷新标签布局
myChart.setOption(newOption, true);
myChart.updateLabelLayout();

注意：setOption 的第二个参数需设为 true（表示不合并配置，全量替换），updateLabelLayout() 才能正确生效。

总结

方法	核心用途	返回值类型	私有？
getModel()	获取全局 Model，查询组件/系列配置数据	GlobalModel	是
getViewOfComponentModel()	获取组件 View，查询渲染后几何信息	ComponentView	是
getViewOfSeriesModel()	获取系列 View，查询渲染后几何信息	ChartView	是
getVisual()	获取视觉映射通道值（颜色、尺寸等）	视通道而定	否
getZr()	获取底层 ZRender 实例，处理画布级事件	ZRender 实例	否
makeActionFromEvent()	将事件转为 action，实现图间联动	Action 对象	否
updateLabelLayout()	手动触发标签布局重新计算	void	否

这些方法覆盖了从数据查询（Model 层）到视图查询（View 层）再到底层渲染（ZRender 层）的完整链路，掌握了它们就能在复杂场景下进行深度的图表定制和交互开发。