2021SC@SDUSC
echarts源码分析
各个Component的渲染过程
在echarts中,Component(组件)是除Series(图表)外的其他配置项,有datazoom(区域缩放)、visualMap(视图映射)、tooltip(提示框组件)、toolbox(工具栏)、brush(区域选择组件)、timeline(时间轴)、graphic(原生图形组件)、dataset(数据集)、marker(包括markPoint(图标标注)、markLine(图表标线)、markArea(图表标域)等。用户通过传递option对象来设置相应的Component。
这篇文章中将介绍tooltip、dataZoom、visualMap这三项常用的组件。
区域缩放 DataZoom
dataZoom分为inside和slider两种类型。
公共文件
DataZoomModel通过extendComponentModel扩展自Component Model,重写了defaultOption属性以及init、mergeOption等方法。
DataZoomView通过extend扩展自Component View,重写了render方法并定义了getTargetCoordInfo方法。
Slider
SliderZoomModel通过extend扩展自DataZoomModel,重写了defaultOption属性
SliderZoomView通过extend扩展自DataZoomView,重写了render、remove、dispose等方法,主要实现代码如下:
render: function (dataZoomModel, ecModel, api, payload) {
// 调用DataZoomView中的render方法
SliderZoomView.superApply(this, 'render', arguments);
...
if (!payload || payload.type !== 'dataZoom' || payload.from !== this.uid) {
// 绘制
this._buildView();
}
// 更新
this._updateView();
}
_buildView: function () {
var thisGroup = this.group;
thisGroup.removeAll();
this._resetLocation();
this._resetInterval();
var barGroup = this._displayables.barGroup = new graphic.Group();
// 绘制背景,通过graphic.Rect绘制背景,包括可视层以及Click panel
this._renderBackground();
// 绘制handle,通过graphic.Rect绘制选择的区域,并绑定拖拽相关以及mouseover