Skip to content

Commit fdf240f

Browse files
author
plainheart
committed
feat(scatter): make symbolRotate functional for scatter series.
1 parent 37dfd89 commit fdf240f

File tree

3 files changed

+118
-4
lines changed

3 files changed

+118
-4
lines changed

‎src/chart/helper/Symbol.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,6 @@ symbolProto._updateCommon = function (data, idx, symbolSize, seriesScope) {
248248

249249
var itemStyle = seriesScope && seriesScope.itemStyle;
250250
var hoverItemStyle = seriesScope && seriesScope.hoverItemStyle;
251-
var symbolRotate = seriesScope && seriesScope.symbolRotate;
252251
var symbolOffset = seriesScope && seriesScope.symbolOffset;
253252
var labelModel = seriesScope && seriesScope.labelModel;
254253
var hoverLabelModel = seriesScope && seriesScope.hoverLabelModel;
@@ -264,7 +263,6 @@ symbolProto._updateCommon = function (data, idx, symbolSize, seriesScope) {
264263
itemStyle = itemModel.getModel(normalStyleAccessPath).getItemStyle(['color']);
265264
hoverItemStyle = itemModel.getModel(emphasisStyleAccessPath).getItemStyle();
266265

267-
symbolRotate = itemModel.getShallow('symbolRotate');
268266
symbolOffset = itemModel.getShallow('symbolOffset');
269267

270268
labelModel = itemModel.getModel(normalLabelAccessPath);
@@ -278,6 +276,8 @@ symbolProto._updateCommon = function (data, idx, symbolSize, seriesScope) {
278276

279277
var elStyle = symbolPath.style;
280278

279+
var symbolRotate = data.getItemVisual(idx, 'symbolRotate');
280+
281281
symbolPath.attr('rotation', (symbolRotate || 0) * Math.PI / 180 || 0);
282282

283283
if (symbolOffset) {

‎src/visual/symbol.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,15 @@ export default function (seriesType, defaultSymbolType, legendSymbol) {
3333
var symbolType = seriesModel.get('symbol');
3434
var symbolSize = seriesModel.get('symbolSize');
3535
var keepAspect = seriesModel.get('symbolKeepAspect');
36+
var symbolRotate = seriesModel.get('symbolRotate');
3637

3738
var hasSymbolTypeCallback = isFunction(symbolType);
3839
var hasSymbolSizeCallback = isFunction(symbolSize);
39-
var hasCallback = hasSymbolTypeCallback || hasSymbolSizeCallback;
40+
var hasSymbolRotateCallback = isFunction(symbolRotate);
41+
var hasCallback = hasSymbolTypeCallback || hasSymbolSizeCallback || hasSymbolRotateCallback;
4042
var seriesSymbol = (!hasSymbolTypeCallback && symbolType) ? symbolType : defaultSymbolType;
4143
var seriesSymbolSize = !hasSymbolSizeCallback ? symbolSize : null;
44+
var seriesSymbolRotate = !hasSymbolRotateCallback ? seriesSymbolRotate : null;
4245

4346
data.setVisual({
4447
legendSymbol: legendSymbol || seriesSymbol,
@@ -48,7 +51,8 @@ export default function (seriesType, defaultSymbolType, legendSymbol) {
4851
// some cases but generally it is not recommanded.
4952
symbol: seriesSymbol,
5053
symbolSize: seriesSymbolSize,
51-
symbolKeepAspect: keepAspect
54+
symbolKeepAspect: keepAspect,
55+
symbolRotate: symbolRotate
5256
});
5357

5458
// Only visible series has each data be visual encoded
@@ -62,12 +66,14 @@ export default function (seriesType, defaultSymbolType, legendSymbol) {
6266
var params = seriesModel.getDataParams(idx);
6367
hasSymbolTypeCallback && data.setItemVisual(idx, 'symbol', symbolType(rawValue, params));
6468
hasSymbolSizeCallback && data.setItemVisual(idx, 'symbolSize', symbolSize(rawValue, params));
69+
hasSymbolRotateCallback && data.setItemVisual(idx, 'symbolRotate', symbolRotate(rawValue, params));
6570
}
6671

6772
if (data.hasItemOption) {
6873
var itemModel = data.getItemModel(idx);
6974
var itemSymbolType = itemModel.getShallow('symbol', true);
7075
var itemSymbolSize = itemModel.getShallow('symbolSize', true);
76+
var itemSymbolRotate = itemModel.getShallow('symbolRotate', true);
7177
var itemSymbolKeepAspect = itemModel.getShallow('symbolKeepAspect', true);
7278

7379
// If has item symbol
@@ -78,6 +84,9 @@ export default function (seriesType, defaultSymbolType, legendSymbol) {
7884
// PENDING Transform symbolSize ?
7985
data.setItemVisual(idx, 'symbolSize', itemSymbolSize);
8086
}
87+
if (itemSymbolRotate != null) {
88+
data.setItemVisual(idx, 'symbolRotate', itemSymbolRotate);
89+
}
8190
if (itemSymbolKeepAspect != null) {
8291
data.setItemVisual(idx, 'symbolKeepAspect', itemSymbolKeepAspect);
8392
}

‎test/symbol3.html‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Licensed to the Apache Software Foundation (ASF) under one
4+
or more contributor license agreements. See the NOTICE file
5+
distributed with this work for additional information
6+
regarding copyright ownership. The ASF licenses this file
7+
to you under the Apache License, Version 2.0 (the
8+
"License"); you may not use this file except in compliance
9+
with the License. You may obtain a copy of the License at
10+
11+
http://www.apache.org/licenses/LICENSE-2.0
12+
13+
Unless required by applicable law or agreed to in writing,
14+
software distributed under the License is distributed on an
15+
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
16+
KIND, either express or implied. See the License for the
17+
specific language governing permissions and limitations
18+
under the License.
19+
-->
20+
21+
22+
<html>
23+
<head>
24+
<meta charset="utf-8">
25+
<meta name="viewport" content="width=device-width, initial-scale=1" />
26+
<link rel="stylesheet" href="lib/reset.css" />
27+
<script src="lib/esl.js"></script>
28+
<script src="lib/config.js"></script>
29+
<script src="lib/jquery.min.js"></script>
30+
<script src="lib/facePrint.js"></script>
31+
<script src="lib/testHelper.js"></script>
32+
<script src="https://api.map.baidu.com/api?v=3.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&__ec_v__=20200330"></script>
33+
<!-- <script src="https://www.echartsjs.com/examples/vendors/echarts/extension/bmap.js?_ec_v__=20200330"></script> -->
34+
</head>
35+
<body>
36+
<div id="main0"></div>
37+
38+
<script>
39+
require([
40+
'echarts', 'extension/bmap'
41+
], function (echarts) {
42+
var symbolIcon = 'data:image/png;base64,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';
43+
var option = {
44+
bmap: {
45+
center: [116, 31],
46+
zoom: 7,
47+
roam: true
48+
},
49+
series: [{
50+
coordinateSystem: 'bmap',
51+
symbol: 'image://' + symbolIcon,
52+
symbolSize: [15, 30],
53+
symbolRotate: function(value, params) {
54+
return -value[2]
55+
},
56+
label: {
57+
show: true,
58+
position: 'top',
59+
distance: 15,
60+
formatter: function(params) {
61+
return params.name + '(' + params.value[2] + 'deg)'
62+
},
63+
verticalAlign: 'middle',
64+
align: 'center',
65+
borderWidth: 1.25,
66+
borderRadius: 2,
67+
borderColor: '#14c4ba',
68+
backgroundColor: '#fff',
69+
padding: [5, 8, 3, 8],
70+
color: '#000'
71+
},
72+
data: [
73+
{
74+
name: 'car1',
75+
value: [121.15, 31.89, 30]
76+
},
77+
{
78+
name: 'car2',
79+
value: [117.781327, 32.608266, 120]
80+
},
81+
{
82+
name: 'car3',
83+
value: [117.5, 30.608266, 90]
84+
},
85+
{
86+
name: 'car4',
87+
value: [115.5, 30.2, 180]
88+
}
89+
],
90+
encode: {
91+
value: 2
92+
},
93+
type: 'scatter'
94+
}]
95+
};
96+
97+
var chart = testHelper.create(echarts, 'main0', {
98+
title: 'Rotates the symbol as we need',
99+
option: option
100+
});
101+
});
102+
</script>
103+
104+
</body>
105+
</html>

0 commit comments

Comments
 (0)