themeRiverLayout.js
4.11 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
/**
* Transform the raw data to layout information.
*/
define(function (require) {
var zrUtil = require('zrender/core/util');
var numberUtil = require('../../util/number');
return function (ecModel, api) {
ecModel.eachSeriesByType('themeRiver', function (seriesModel) {
var data = seriesModel.getData();
var single = seriesModel.coordinateSystem;
var layoutInfo = {};
// use the axis boundingRect for view
var rect = single.getRect();
layoutInfo.rect = rect;
var boundaryGap = seriesModel.get('boundaryGap');
var axis = single.getAxis();
layoutInfo.boundaryGap = boundaryGap;
if (axis.orient === 'horizontal') {
boundaryGap[0] = numberUtil.parsePercent(boundaryGap[0], rect.height);
boundaryGap[1] = numberUtil.parsePercent(boundaryGap[1], rect.height);
var height = rect.height - boundaryGap[0] - boundaryGap[1];
themeRiverLayout(data, seriesModel, height);
}
else {
boundaryGap[0] = numberUtil.parsePercent(boundaryGap[0], rect.width);
boundaryGap[1] = numberUtil.parsePercent(boundaryGap[1], rect.width);
var width = rect.width - boundaryGap[0] - boundaryGap[1];
themeRiverLayout(data, seriesModel, width);
}
data.setLayout('layoutInfo', layoutInfo);
});
};
/**
* the layout information about themeriver
* @param {module:echarts/data/List} data
* @return
*/
function themeRiverLayout(data, seriesModel, height) {
if (!data.count()) {
return;
}
// the data in each layer are organized into a series.
var layerSeries = seriesModel.getLayerSeries();
//the points in each layer.
var layerPoints = zrUtil.map(layerSeries, function (singleLayer) {
return zrUtil.map(singleLayer.indices, function (idx) {
return seriesModel.coordinateSystem.dataToPoint([
data.get('time', idx), data.get('value', idx)
]);
});
});
var base = computeBaseline(layerPoints);
var baseLine = base.y0;
var ky = height / base.max;
//set layout information for each item.
var n = layerSeries.length;
var m = layerSeries[0].indices.length;
var baseY0;
for (var j = 0; j < m; ++j) {
baseY0 = baseLine[j] * ky;
data.setItemLayout(layerSeries[0].indices[j], {
layerIndex: 0,
x: layerPoints[0][j][0],
y0: baseY0,
y: layerPoints[0][j][1] * ky
});
for (var i = 1; i < n; ++i) {
baseY0 += layerPoints[i - 1][j][1] * ky;
data.setItemLayout(layerSeries[i].indices[j], {
layerIndex: i,
x: layerPoints[i][j][0],
y0: baseY0,
y: layerPoints[i][j][1] * ky
});
}
}
}
/**
* Compute the baseLine of the rawdata.
* Inspired by Lee Byron's paper Stacked Graphs - Geometry & Aesthetics.
* @param {Array.<Array>} data
* @return {Array}
*/
function computeBaseline(data) {
var layerNum = data.length;
var pointNum = data[0].length;
var sums = [];
var y0 = [];
var max = 0;
var temp;
var base = {};
for (var i = 0; i < pointNum; ++i) {
for (var j = 0, temp = 0; j < layerNum; ++j) {
temp += data[j][i][1];
}
if (temp > max) {
max = temp;
}
sums.push(temp);
}
for (var k = 0; k < pointNum; ++k) {
y0[k] = (max - sums[k]) / 2;
}
max = 0;
for (var l = 0; l < pointNum; ++l) {
var sum = sums[l] + y0[l];
if (sum > max) {
max = sum;
}
}
base.y0 = y0;
base.max = max;
return base;
}
});