You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2021/05/06 08:23:59 UTC
[echarts] 01/02: feat(legend): supporting legend.symbolRotate #11995
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-legend-rotate
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 923f84fa43dda815ae8d3f556ff2802b0ab988aa
Author: Ovilia <zw...@gmail.com>
AuthorDate: Thu May 6 16:09:44 2021 +0800
feat(legend): supporting legend.symbolRotate #11995
---
src/chart/line/LineSeries.ts | 10 ++++--
src/chart/map/MapSeries.ts | 9 +++--
src/component/legend/LegendModel.ts | 8 ++---
src/component/legend/LegendView.ts | 20 ++++++-----
test/legend-style.html | 66 ++++++++++++++++++++++++++++++++++---
5 files changed, 92 insertions(+), 21 deletions(-)
diff --git a/src/chart/line/LineSeries.ts b/src/chart/line/LineSeries.ts
index 3b20536..0e58598 100644
--- a/src/chart/line/LineSeries.ts
+++ b/src/chart/line/LineSeries.ts
@@ -226,6 +226,7 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
line.setStyle(opt.lineStyle);
const visualType = this.getData().getVisual('symbol');
+ const visualRotate = this.getData().getVisual('symbolRotate');
const symbolType = visualType === 'none' ? 'circle' : visualType;
// Symbol size is 80% when there is a line
@@ -236,13 +237,18 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
(opt.itemHeight - size) / 2,
size,
size,
- opt.itemStyle.fill,
- opt.symbolKeepAspect
+ opt.itemStyle.fill
);
group.add(symbol);
symbol.setStyle(opt.itemStyle);
+ const symbolRotate = opt.symbolRotate === 'inherit'
+ ? visualRotate
+ : (opt.symbolRotate || 0);
+ symbol.rotation = symbolRotate * Math.PI / 180;
+ symbol.setOrigin([opt.itemWidth / 2, opt.itemHeight / 2]);
+
if (symbolType.indexOf('empty') > -1) {
symbol.style.stroke = symbol.style.fill;
symbol.style.fill = '#fff';
diff --git a/src/chart/map/MapSeries.ts b/src/chart/map/MapSeries.ts
index bd7a3a2..cf08391 100644
--- a/src/chart/map/MapSeries.ts
+++ b/src/chart/map/MapSeries.ts
@@ -235,14 +235,19 @@ class MapSeries extends SeriesModel<MapSeriesOption> {
0,
opt.itemWidth,
opt.itemHeight,
- opt.itemStyle.fill,
- opt.symbolKeepAspect
+ opt.itemStyle.fill
);
symbol.setStyle(opt.itemStyle);
// Map do not use itemStyle.borderWidth as border width
symbol.style.stroke = 'none';
+ const symbolRotate = opt.symbolRotate === 'inherit'
+ ? 0
+ : (opt.symbolRotate || 0);
+ symbol.rotation = symbolRotate * Math.PI / 180;
+ symbol.setOrigin([opt.itemWidth / 2, opt.itemHeight / 2]);
+
if (symbolType.indexOf('empty') > -1) {
symbol.style.stroke = symbol.style.fill;
symbol.style.fill = '#fff';
diff --git a/src/component/legend/LegendModel.ts b/src/component/legend/LegendModel.ts
index ccf5ba8..c7b9408 100644
--- a/src/component/legend/LegendModel.ts
+++ b/src/component/legend/LegendModel.ts
@@ -114,9 +114,7 @@ export interface LegendStyleOption {
textStyle?: LabelOption
- symbolKeepAspect?: boolean
-
- symbolSize?: number | 'auto' | 'inherit'
+ symbolRotate?: number | 'inherit'
}
interface DataItem extends LegendStyleOption {
@@ -142,7 +140,7 @@ export interface LegendSymbolParams {
* symbolType is from legend.icon, legend.data.icon, or series visual
*/
symbolType: string,
- symbolKeepAspect: boolean,
+ symbolRotate: number | 'inherit',
itemStyle: PathStyleProps,
lineStyle: LineStyleProps
}
@@ -455,7 +453,7 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
itemGap: 10,
itemWidth: 25,
itemHeight: 14,
- symbolSize: 'auto',
+ symbolRotate: 'inherit',
inactiveColor: '#ccc',
inactiveBorderColor: '#ccc',
diff --git a/src/component/legend/LegendView.ts b/src/component/legend/LegendView.ts
index 7d7cab4..217fd44 100644
--- a/src/component/legend/LegendView.ts
+++ b/src/component/legend/LegendView.ts
@@ -215,8 +215,6 @@ class LegendView extends ComponentView {
*/
const style = data.getVisual('style');
- data.getVisual('symbolSize');
-
const itemGroup = this._createItem(
seriesModel, name, dataIndex,
legendItemModel, legendModel, itemAlign,
@@ -349,7 +347,8 @@ class LegendView extends ComponentView {
const itemHeight = legendModel.get('itemHeight');
const isSelected = legendModel.isSelected(name);
- const symbolKeepAspect = itemModel.get('symbolKeepAspect');
+ let symbolRotate = itemModel.get('symbolRotate');
+
const legendIconType = itemModel.get('icon');
symbolType = legendIconType || symbolType || 'roundRect';
@@ -369,25 +368,28 @@ class LegendView extends ComponentView {
const textStyleModel = itemModel.getModel('textStyle');
if (typeof seriesModel.getLegendIcon === 'function'
- && !legendIconType
+ && (!legendIconType || legendIconType === 'inherit')
) {
// Series has specific way to define legend icon
itemGroup.add(seriesModel.getLegendIcon({
itemWidth,
itemHeight,
symbolType,
- symbolKeepAspect,
+ symbolRotate,
itemStyle: style.itemStyle,
lineStyle: style.lineStyle
}));
}
else {
// Use default legend icon policy for most series
+ const rotate = symbolRotate === 'inherit'
+ ? seriesModel.get('symbolRotate')
+ : symbolRotate;
itemGroup.add(getDefaultLegendIcon({
itemWidth,
itemHeight,
symbolType,
- symbolKeepAspect,
+ symbolRotate: rotate,
itemStyle: style.itemStyle,
lineStyle: style.lineStyle
}));
@@ -652,12 +654,14 @@ function getDefaultLegendIcon(opt: LegendSymbolParams): ECSymbol {
0,
opt.itemWidth,
opt.itemHeight,
- opt.itemStyle.fill,
- opt.symbolKeepAspect
+ opt.itemStyle.fill
);
symbol.setStyle(opt.itemStyle);
+ symbol.rotation = (opt.symbolRotate as number || 0) * Math.PI / 180;
+ symbol.setOrigin([opt.itemWidth / 2, opt.itemHeight / 2]);
+
if (symboType.indexOf('empty') > -1) {
symbol.style.stroke = symbol.style.fill;
symbol.style.fill = '#fff';
diff --git a/test/legend-style.html b/test/legend-style.html
index a285ccb..b56b774 100644
--- a/test/legend-style.html
+++ b/test/legend-style.html
@@ -75,7 +75,7 @@ under the License.
bottom: 10,
data: [{
name: 'Line D',
- icon: 'rect'
+ icon: 'arrow'
}, {
name: 'Line E',
itemStyle: {
@@ -100,7 +100,8 @@ under the License.
borderWidth: 5
},
symbolSize: 15,
- symbol: 'emptyTriangle'
+ symbol: 'emptyTriangle',
+ symbolRotate: 15
}, {
data: getData(2),
type: 'line',
@@ -201,8 +202,8 @@ under the License.
'Line A: the style of the line and items should be the same in those in legend; all colored in the first theme color',
'Line B: the style of the line and items should be the same in those in legend; all colored in red',
'Line C: the style of the line and items should be the same in those in legend; items colored in red and line colored in green',
- 'Line D: the style of the line should be the same in that in the legend; items colored orange in legend and blue in series',
- 'Line E: the style of the line should be the same in that in the legend; items colored pink in legend and green in series',
+ 'Line D: orange arrow in legend and blue empty triangle in series',
+ 'Line E: pink empty rectangale in legend and green empty circle in series',
'Line F: the colors in the legend should be blue'
],
option: option
@@ -211,5 +212,62 @@ under the License.
</script>
+ <script>
+ require(['echarts'], function (echarts) {
+ var option = {
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ legend: [{
+ data: [
+ 'Line A',
+ 'Line B',
+ {
+ name: 'Line C',
+ symbolRotate: -30,
+ icon: 'emptyTriangle'
+ }
+ ],
+ symbolRotate: 30,
+ itemWidth: 100
+ }],
+ series: [{
+ data: getData(0),
+ type: 'line',
+ name: 'Line A',
+ symbol: 'emptyRect'
+ }, {
+ data: getData(1),
+ type: 'line',
+ name: 'Line B',
+ symbol: 'emptyTriangle',
+ symbolRotate: 15,
+ symbolSize: 10,
+ symbolKeepAspect: true
+ }, {
+ data: getData(2),
+ type: 'line',
+ name: 'Line C',
+ symbol: 'emptyTriangle',
+ symbolKeepAspect: true
+ }],
+ animation: 0
+ };
+
+ var chart = testHelper.create(echarts, 'main2', {
+ title: [
+ '**Legend options should work**',
+ 'Line A: the rect in the legend should be placed at the center with rotation of 30 degrees',
+ 'Line B: the triangle in the legend should be placed at the center with rotation of 30 degrees',
+ 'Line C: the triangle in the legend should be placed at the center with rotation of -30 degrees'
+ ],
+ option: option
+ });
+ });
+ </script>
</body>
</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org