在分析完echarts Component渲染过程之后,我们便开始进行echarts Series渲染过程的分析。
希望和小伙伴们一起进步呀!!加油!!
前言
在这篇博文中我们将探讨line(折线图)、bar(柱状图)、pie(饼图)等Series。
用户通过传递option对象来设置相应的Series。
在这部分中echarts采用了Model以及View的架构来管理Series:
- Model:model/Series.js 管理Series数据。
- View:view/Charts.js 负责渲染Chart视图,定义了init、render、highlight、downplay、remove等方法
Model层
model/Series.js。Series通过extend方法扩展自Component Model,重写了init等方法,并定义了getData、setData、getSource、getBaseAxis等方法。
View层
view/Charts.js。Charts中定义了init、render、highlight、downplay、remove等方法。
Line 折线图
LineSeries
LineSeries通过extend方法扩展自Series Model,重写了defaultOption属性以及getInitialData方法。
LineView
LineView通过extend方法扩展自Chart View,重写了init、render、highlight及downplay等方法,主要代码如下:
1 | init: function () { |
Bar 柱状图
BaseBarSeries
BaseBarSeries通过extend方法扩展自Series Model,重写了defaultOption属性,以及getMarkerPosition和getInitialData方法。
BarSeries
BarSeries通过extend方法扩展自BaseBarSeries,重写了getProgressive等方法。
BarView
BarView通过extendChartView方法扩展自Chart View,重写了render等方法,主要代码如下:
1 | render: function (seriesModel, ecModel, api) { |
Pie 饼图
Pie.js
pie.js中注册了pieToggleSelect、pieSelect、pieUnSelect等Action
PieSeries
PieSeries通过extendSeriesModel方法扩展自Series Model,重写了defaultOption属性,以及init、mergeOption、getInitialData等方法。
PieView
PieView通过extend方法扩展自Chart View,重写了init、render等方法,主要实现如下:
1 | render: function (seriesModel, ecModel, api, payload) { |
PieLayout
PieLayout为饼图的布局文件,通过setItemLayout方法来设置每个Sector绘制的属性信息,包括angle、startAngle、endAngle、cx、cy等。
LabelLayout
LabelLayout用于设置饼图中每个Sector的label属性信息,包括x、y、position、height等。
Scatter 散点图
ScatterSeries
ScatterSeries通过extend方法扩展自Series Model,重写了defaultOption属性以及getInitialData等方法。
ScatterView
ScatterView通过extendChartView方法扩展自Chart View,重写了render、updateTransform等方法,主要实现代码如下:
1 | render: function (seriesModel, ecModel, api) { |
EffectScatter 带涟漪效果的散点图
EffectScatterSeries
EffectScatterSeries通过extend方法扩展自Series Model,重写了defaultOption属性以及getInitialData方法。
EffectScatterView
EffectScatterView通过extendChartView方法扩展自Chart View,重写了init、render等方法,主要实现如下:
1 | render: function (seriesModel, ecModel, api) { |
Radar 雷达图
RadarSeries
RadarSeries通过extend方法扩展自Series Model,重写了defaultOption属性以及init、getInitialData、formatTooltip方法。
RadarView
RadarView通过extendChartView方法扩展自Chart View,重写了render方法,主要实现如下:
1 | render: function (seriesModel, ecModel, api) { |
RadarLayout
RadarLayout主要用于处理data数据,返回坐标信息。
Tree 树图
TreeAction
TreeAction注册了treeRoam及treeExpandAndCollapse等Action。
TreeSeries
TreeSeries通过extend方法扩展自Series Model,重写了defaultOption属性以及getInitialData、getOrient、setZoom、setCenter、formatTooltip等方法。
TreeLayout
TreeLayout处理data数据,返回layout属性信息。
TreeView
TreeView通过extendChartView方法扩展自Chart View,重写了init、render等方法,主要实现如下:
1 | render: function (seriesModel, ecModel, api, payload) { |
TreeMap 面积树状图
TreemapAction
TreemapAction注册了treemapZoomToNode、treemapRender、treemapMove、treemapRootToNode等Action。
TreemapSeries
TreemapSeries通过extend方法扩展自Series Model,重写了defaultOption属性以及getInitialData、formatTooltip等方法。
TreemapView
TreemapView通过extendChartView方法扩展自Chart View,重写了init、render等方法,主要实现如下:
1 | render: function (seriesModel, ecModel, api, payload) { |