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 <zwl.s...@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-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org