echarts源码解析

2026-04-25 02:40:53 156
分类:echarts

一、echarts全局对象

引入echarts.js文件后全局对象echarts,它没有原型对象。以下是它所有的属性和方法:

image.png

对应的源码:

src/echarts.js

/**
 * @param {HTMLElement} dom
 * @param {Object} [theme]
 * @param {Object} opts
 * @param {number} [opts.devicePixelRatio] Use window.devicePixelRatio by default
 * @param {string} [opts.renderer] Currently only 'canvas' is supported.
 * @param {number} [opts.width] Use clientWidth of the input `dom` by default.
 *                              Can be 'auto' (the same as null/undefined)
 * @param {number} [opts.height] Use clientHeight of the input `dom` by default.
 *                               Can be 'auto' (the same as null/undefined)
 */
export function init(dom, theme, opts){}
...

二、echats实例化对象

通过let myChart = echarts.init(document.getElementById('myChart'));实例化一个echarts对象。

1. echarts实例化对象

下图是myChart对象的属性,里面基本都是私有方法。公共方法在__proto__中:

image.png

对应的源码:

src/echarts.js

/**
 * @module echarts~ECharts
 */
function ECharts(dom, theme, opts){
    opts = opts || {};
    this.id;
    this.group;
    this._dom = dom;
    ...
}

2. echarts实例化对象原型

下面是echarts对象的原型(echarts实例化对象原型只有一级),提供一些公共方法:

image.png

对应的源码:

src/echarts.js

var echartsProto = ECharts.prototype;
echartsProto.getDom=function(){}
...

3. echarts实例化对象常用函数