ChordView.js
2.99 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
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import * as echarts from '../../echarts';
import RibbonPath from './Ribbon';
import * as graphic from '../../util/graphic';
export default echarts.extendChartView({
type: 'chord',
init: function (option) {
},
render: function (seriesModel, ecModel, api) {
var data = seriesModel.getData();
var graph = seriesModel.getGraph();
var edgeData = seriesModel.getEdgeData();
var group = this.group;
group.removeAll();
data.each(function (idx) {
var layout = data.getItemLayout(idx);
var sector = new graphic.Sector({
shape: {
cx: layout.cx,
cy: layout.cy,
clockwise: layout.clockwise,
r0: layout.r0,
r: layout.r,
startAngle: layout.startAngle,
endAngle: layout.endAngle
}
});
sector.setStyle({
fill: data.getItemVisual(idx, 'color')
});
data.setItemLayout(idx);
group.add(sector);
});
var edgeRendered = {};
edgeData.each(function (idx) {
if (edgeRendered[idx]) {
return;
}
var layout = edgeData.getItemLayout(idx);
var edge = graph.getEdgeByIndex(idx);
var otherEdge = graph.getEdge(edge.node2, edge.node1);
var otherEdgeLayout = otherEdge.getLayout();
edgeRendered[idx] = edgeRendered[otherEdge.dataIndex] = true;
var ribbon = new RibbonPath({
shape: {
cx: layout.cx,
cy: layout.cy,
r: layout.r,
s0: layout.startAngle,
s1: layout.endAngle,
t0: otherEdgeLayout.startAngle,
t1: otherEdgeLayout.endAngle,
clockwise: layout.clockwise
}
});
ribbon.setStyle({
// Use color of source
fill: edge.node1.getVisual('color'),
opacity: 0.5
});
group.add(ribbon);
});
},
dispose: function () {}
});