Echarts源码走读

Echarts源码走读

绘图语法

• 方形: []
• 圆角长方形: ()
• 圆形: (())
• 菱形: {}
• 更多画图技巧

图解，如下：

1、echarts 从setOption开始

2、echarts 实例化OptionManager(option管理者)

3、echarts 实例化GlobalModel(全局Model)

4、echarts makeDepndencyGraph构建可用组件之间的依赖关系图谱

4.1、组件依赖关系图谱

A是B的predecessor，C是B的successor，用数据可以描述如下：

{
	grid: {
		predecessor: ['dataset', 'xAxis', 'yAxis'],
		successor: ['series'],
		entryCount: 3
	},
	series: {...}
}

4.2、实例化组件步骤

1. dataset没有依赖其他组件，于是我们找到最顶部的组件，自上而下，开始实例化组件
2. option若没有配置使用某个组件，则该组件无须实例化直接删掉组件及其依赖关系
3. option配置使用了某个组件，则该组件实例化并删掉依赖关系，实例化操作在visitComponent函数中

4.2.1、不需要实例化的情况

dataset在option中没有进行配置使用，不需要实例化，而它遍历完成后，依赖关系如下：

4.2.2、需要实例化的情况

yAxis，series等在option中进行了配置使用，于是需要对其进行实例化

1. 重构组件的配置

yAxis原始的配置，如下：(xAxis同理)

yAxis: [{
   type: "value",
   axisLabel: {},
   axisTick: {},
   splitArea: {}
}]

yAxis重构成mapping，如下：(xAxis同理)

// yAxis
yAxis: [{
   brandNew: true,
   existing: null,
   keyInfo: {
   	mainType: "yAxis",
   	subType: "value"
   },
   newOption: {
   	type: "value",
   	axisLabel: {},
   	axisTick: {},
   	splitArea: {}
   }
}]

series原始的配置，如下：(grid同理)

series: [{
	name: "搜索引擎",
	type: "bar",
	itemStyle: {},
	data: []
}]

series重构成mapping，如下：(grid同理)

series: [{
	brandNew: true,
	existing: null,
	keyInfo: {
		mainType: "series",
		subType: "bar"
	},
	newOption: {
		name: "搜索引擎",
		type: "bar",
		itemStyle: {},
		data: []
	}
}]

4.3、实例化，通过getClass获取组件并new ComponentModelClass实例化

4.4、挂载实例化后的组件，将实例化后的组件挂载到ecModel._componentsMap下以便后续渲染