ECharts 源码解读 二

源码结构和打包

源码使用webpack打包，查看文件webpack.config.js可知，将echarts源码编译成三个版本，分别为常用版本,精简版本，完整版本，分别对应webpack入口文件为：index.common.js、index.simple.js、index.js。

执行命令：

npm install //安装所有依赖包
webpack //打包
web pack -p//打包成压缩包（.min.js）
最后生成的文件在dist文件夹下

源码结构

charts是指各种类型的图表，例如line，bar，pie等，在配置项中指的是series对应的配置

components组件是在配置项中除了serie的其余项，例如title，legend，toobox等

源码的重要目录及说明如下(注：dist为编译后生成的文件夹)

extension （扩展中使用）
lib （源码中没有，执行webpack编译后才存在）
map （世界地图，中国地图及中国各个省份地图的js和json两种格式的文件）
src （核心源码）
test （示例demo）
theme （主题）

入口

使用init方法进行初始化

echarts.init = function(dom, theme, opts) {
if (__DEV__) {//是否是debug模式
//... //错误判断这部分内容省略
}

var chart = new ECharts(dom, theme, opts);//实例化ECharts
chart.id = 'ec_' + idBase++;//chart实例的id号，唯一，逐一递增
instances[chart.id] = chart;//唯一instance(实例)对象

dom.setAttribute &&
dom.setAttribute(DOM_ATTRIBUTE_KEY, chart.id);//为外层dom设置了一个属性，属性值等于chart.id

enableConnect(chart);//按照顺序更新状态，一共三个状态
/*var STATUS_PENDING = 0;
var STATUS_UPDATING = 1;
var STATUS_UPDATED = 2;*/

return chart;
};

参数说明：

/**
* @param {HTMLDomElement} dom 实例容器，一般是一个具有高宽的div元素
* @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)
*/
主题theme

/*theme主题，可以在官网下载(http://echarts.baidu.com/download-theme.html),或者自己构建
* 使用：
* <script src="theme/vintage.js"></script>
* <script>
* // 第二个参数可以指定前面引入的主题
* var chart = echarts.init(document.getElementById('main'), 'vintage');
* </script>
*/

使用：

var chart = echarts.init(document.getElementById('main'), null, {
renderer: 'canvas'});
构造函数
function ECharts(dom, theme, opts) {
opts = opts || {};
if (typeof theme === 'string') {
theme = themeStorage[theme];
}
this.id;
this.group;
this._dom = dom;
var zr = this._zr = zrender.init(dom, {
renderer: opts.renderer || 'canvas',
devicePixelRatio: opts.devicePixelRatio,
 opts.width,
height: opts.height
});//构造函数第三个参数使用的zrender处理的

this._throttledZrFlush = throttle.throttle(zrUtil.bind(zr.flush, zr), 17);
this._theme = zrUtil.clone(theme);
this._chartsViews = [];//存储所有的charts，为后面便利该变量渲染之
this._chartsMap = {};
this._componentsViews = [];//存储配置项组件的属性，为后面便利该变量渲染之
this._componentsMap = {};
this._api = new ExtensionAPI(this);
//this._api是有'getDom', 'getZr', 'getWidth', 'getHeight', 'dispatchAction', 'isDisposed',
//'on', 'off', 'getDataURL', 'getConnectedDataURL', 'getModel', 'getOption'方法的对象
this._coordSysMgr = new CoordinateSystemManager();
Eventful.call(this);
this._messageCenter = new MessageCenter();
this._initEvents();//初始化鼠标事件
this.resize = zrUtil.bind(this.resize, this);

this._pendingActions = [];
function prioritySortFunc(a, b) {
return a.prio - b.prio;
}
timsort(visualFuncs, prioritySortFunc);
timsort(dataProcessorFuncs, prioritySortFunc);
zr.animation.on('frame', this._onframe, this);
}

echarts使用小案例（分析源码要先会使用嘛，就在官网案例基础上自己改代码写了个渐变南丁格尔玫瑰图表）

效果图：

源码：直接在网页修改实时生成即可Examples - Apache ECharts

var colorList = [{
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(51,192,205,0.01)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(51,192,205,0.57)' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
{
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(115,172,255,0.02)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(115,172,255,0.67)' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
{
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(158,135,255,0.02)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(158,135,255,0.57)' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
{
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(252,75,75,0.01)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(252,75,75,0.57)' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
{
type: 'linear',
x: 1,
y: 1,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(253,138,106,0.01)' // 0% 处的颜色
},
{
offset: 1,
color: '#FDB36ac2' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
{
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(254,206,67,0.12)' // 0% 处的颜色
},
{
offset: 1,
color: '#FECE4391' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
]
var colorLine = ['#33C0CD', '#73ACFF', '#9E87FF', '#FE6969', '#FDB36A', '#FECE43']

option = {
title: {
text: '流浪猫的外来输入',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
top: 'bottom',
data: [
'野生流浪猫迁移',
'弃养的宠物猫',
'商家大量繁殖遗弃的后院猫',
'散养走丢的宠物猫',
'领养后二次遗弃的流浪猫',
'生物实验的猫咪'
]
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: 'Area Mode',
type: 'pie',
radius: [20, 140],
center: ['50%', '50%'],
roseType: 'area',

itemStyle: {
borderRadius: 5
},
data: [
{ value: 30, name: '野生流浪猫迁移',itemStyle:{color :colorList[5]}},
{ value: 28, name: '弃养的宠物猫',itemStyle:{color :colorList[4]}},
{ value: 26, name: '商家大量繁殖遗弃的后院猫',itemStyle:{color :colorList[3]}},
{ value: 24, name: '散养走丢的宠物猫',itemStyle:{color :colorList[2]}},
{ value: 22, name: '领养后二次遗弃的流浪猫',itemStyle:{color :colorList[1]}},
{ value: 20, name: '生物实验的猫咪',itemStyle:{color :colorList[0]}}

]
}
]
}