From 536212569e7e291246b196c3bce97900599224cb Mon Sep 17 00:00:00 2001 From: plainheart Date: Mon, 13 Jul 2020 17:56:54 +0800 Subject: [PATCH 01/19] feat: more styles for line type. --- src/model/mixin/lineStyle.ts | 17 +++- src/util/types.ts | 4 + test/line-style.html | 173 ++++++++++++++++++++++++++++++++++- 3 files changed, 185 insertions(+), 9 deletions(-) diff --git a/src/model/mixin/lineStyle.ts b/src/model/mixin/lineStyle.ts index 88512debda..84d22fb2ac 100644 --- a/src/model/mixin/lineStyle.ts +++ b/src/model/mixin/lineStyle.ts @@ -29,7 +29,11 @@ export const LINE_STYLE_KEY_MAP = [ ['shadowBlur'], ['shadowOffsetX'], ['shadowOffsetY'], - ['shadowColor'] + ['shadowColor'], + ['lineDashOffset', 'dashOffset'], + ['lineDash', 'dashArray'], + ['lineCap', 'cap'], + ['lineJoin', 'join'] ]; const getLineStyle = makeStyleMapper(LINE_STYLE_KEY_MAP); @@ -59,8 +63,11 @@ class LineStyleMixin { lineWidth = 1; } const lineType = this.get('type'); - const dotSize = Math.max(lineWidth, 2); - const dashSize = lineWidth * 4; + let dashArray = this.get('dashArray'); + // compatible with single number + if (dashArray != null && !isNaN(dashArray)) { + dashArray = [+dashArray]; + } return (lineType === 'solid' || lineType == null) // Use `false` but not `null` for the solid line here, because `null` might be // ignored when assigning to `el.style`. e.g., when setting `lineStyle.type` as @@ -69,8 +76,8 @@ class LineStyleMixin { // one if using `null` here according to the emhpsis strategy in `util/graphic.js`. ? false : lineType === 'dashed' - ? [dashSize, dashSize] - : [dotSize, dotSize]; + ? dashArray || [lineWidth * 4] + : dashArray || [Math.max(lineWidth, 2)]; } }; diff --git a/src/util/types.ts b/src/util/types.ts index 50b7f7ce72..6577ac1400 100644 --- a/src/util/types.ts +++ b/src/util/types.ts @@ -660,6 +660,10 @@ export interface LineStyleOption extends ShadowOptionMixin { color?: Clr opacity?: number type?: ZRLineType + cap?: CanvasLineCap + join?: CanvasLineJoin + dashArray?: number[] + dashOffset?: number } /** diff --git a/test/line-style.html b/test/line-style.html index 92c6a574e2..0c3319160e 100644 --- a/test/line-style.html +++ b/test/line-style.html @@ -31,10 +31,9 @@
-
+
+ + From b3011d35d36948046fc2e4fba0a4129973625ff0 Mon Sep 17 00:00:00 2001 From: plainheart Date: Mon, 13 Jul 2020 23:43:44 +0800 Subject: [PATCH 02/19] tweak: lineStyle.dashArray can be a single number. --- src/model/mixin/lineStyle.ts | 10 +++++++--- src/util/types.ts | 2 +- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/model/mixin/lineStyle.ts b/src/model/mixin/lineStyle.ts index 84d22fb2ac..e20d057529 100644 --- a/src/model/mixin/lineStyle.ts +++ b/src/model/mixin/lineStyle.ts @@ -30,8 +30,8 @@ export const LINE_STYLE_KEY_MAP = [ ['shadowOffsetX'], ['shadowOffsetY'], ['shadowColor'], - ['lineDashOffset', 'dashOffset'], ['lineDash', 'dashArray'], + ['lineDashOffset', 'dashOffset'], ['lineCap', 'cap'], ['lineJoin', 'join'] ]; @@ -44,7 +44,11 @@ type LineStyleKeys = 'lineWidth' | 'shadowBlur' | 'shadowOffsetX' | 'shadowOffsetY' - | 'shadowColor'; + | 'shadowColor' + | 'lineDash' + | 'lineDashOffset' + | 'lineCap' + | 'lineJoin'; type LineStyleProps = Pick; @@ -54,7 +58,7 @@ class LineStyleMixin { const style = getLineStyle(this, excludes); // Always set lineDash whether dashed, otherwise we can not // erase the previous style when assigning to el.style. - (style as any).lineDash = this.getLineDash((style as any).lineWidth); + style.lineDash = this.getLineDash(style.lineWidth); return style; } diff --git a/src/util/types.ts b/src/util/types.ts index 6577ac1400..f4e8c3a8c1 100644 --- a/src/util/types.ts +++ b/src/util/types.ts @@ -662,7 +662,7 @@ export interface LineStyleOption extends ShadowOptionMixin { type?: ZRLineType cap?: CanvasLineCap join?: CanvasLineJoin - dashArray?: number[] + dashArray?: number | number[] dashOffset?: number } From 35b90484d716e36a2d9372cffa56634d19b613bf Mon Sep 17 00:00:00 2001 From: plainheart Date: Thu, 16 Jul 2020 10:11:44 +0800 Subject: [PATCH 03/19] feat: support for miterLimit. --- src/model/mixin/lineStyle.ts | 6 ++++-- src/util/types.ts | 1 + 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/model/mixin/lineStyle.ts b/src/model/mixin/lineStyle.ts index e20d057529..1d82c8699b 100644 --- a/src/model/mixin/lineStyle.ts +++ b/src/model/mixin/lineStyle.ts @@ -33,7 +33,8 @@ export const LINE_STYLE_KEY_MAP = [ ['lineDash', 'dashArray'], ['lineDashOffset', 'dashOffset'], ['lineCap', 'cap'], - ['lineJoin', 'join'] + ['lineJoin', 'join'], + ['miterLimit'] ]; const getLineStyle = makeStyleMapper(LINE_STYLE_KEY_MAP); @@ -48,7 +49,8 @@ type LineStyleKeys = 'lineWidth' | 'lineDash' | 'lineDashOffset' | 'lineCap' - | 'lineJoin'; + | 'lineJoin' + | 'miterLimit'; type LineStyleProps = Pick; diff --git a/src/util/types.ts b/src/util/types.ts index 4b99e6e246..ddc52d59d2 100644 --- a/src/util/types.ts +++ b/src/util/types.ts @@ -685,6 +685,7 @@ export interface LineStyleOption extends ShadowOptionMixin { join?: CanvasLineJoin dashArray?: number | number[] dashOffset?: number + miterLimit?: number } /** From 868dfc196a61946f2296565a1d3d5418f0a4b23c Mon Sep 17 00:00:00 2001 From: plainheart Date: Thu, 16 Jul 2020 18:14:07 +0800 Subject: [PATCH 04/19] feat: support for border. --- src/chart/helper/Symbol.ts | 7 ++++++- src/model/mixin/itemStyle.ts | 40 +++++++++++++++++++++++++++++------- src/model/mixin/lineStyle.ts | 26 +++++++++++++---------- src/util/types.ts | 5 +++++ test/line-style.html | 14 +++++++++++++ 5 files changed, 73 insertions(+), 19 deletions(-) diff --git a/src/chart/helper/Symbol.ts b/src/chart/helper/Symbol.ts index e67e654e5a..d9c3ff8099 100644 --- a/src/chart/helper/Symbol.ts +++ b/src/chart/helper/Symbol.ts @@ -243,6 +243,11 @@ class Symbol extends graphic.Group { symbolPath.setColor(visualColor, seriesScope && seriesScope.symbolInnerColor); symbolPath.style.strokeNoScale = true; + const itemModel = (seriesScope && seriesScope.itemModel) + ? seriesScope.itemModel + : data.getItemModel(idx); + symbolPath.style.lineDash = itemModel.getModel('itemStyle').getBorderLineDash(symbolStyle.lineWidth); + const liftZ = data.getItemVisual(idx, 'liftZ'); const z2Origin = this._z2; if (liftZ != null) { @@ -338,4 +343,4 @@ function driftSymbol(this: ECSymbol, dx: number, dy: number) { } -export default Symbol; \ No newline at end of file +export default Symbol; diff --git a/src/model/mixin/itemStyle.ts b/src/model/mixin/itemStyle.ts index c3c2ad2159..73afbf1201 100644 --- a/src/model/mixin/itemStyle.ts +++ b/src/model/mixin/itemStyle.ts @@ -21,6 +21,7 @@ import makeStyleMapper from './makeStyleMapper'; import Model from '../Model'; import { ItemStyleOption } from '../../util/types'; import { PathStyleProps } from 'zrender/src/graphic/Path'; +import { map } from 'zrender/src/core/util'; export const ITEM_STYLE_KEY_MAP = [ ['fill', 'color'], @@ -30,7 +31,12 @@ export const ITEM_STYLE_KEY_MAP = [ ['shadowBlur'], ['shadowOffsetX'], ['shadowOffsetY'], - ['shadowColor'] + ['shadowColor'], + ['lineDash', 'borderDashArray'], + ['lineDashOffset', 'borderDashOffset'], + ['lineCap', 'borderCap'], + ['lineJoin', 'borderJoin'], + ['miterLimit', 'borderMiterLimit'] ]; const getItemStyle = makeStyleMapper(ITEM_STYLE_KEY_MAP); @@ -42,7 +48,12 @@ type ItemStyleKeys = 'fill' | 'shadowBlur' | 'shadowOffsetX' | 'shadowOffsetY' - | 'shadowColor'; + | 'shadowColor' + | 'lineDash' + | 'lineDashOffset' + | 'lineCap' + | 'lineJoin' + | 'miterLimit'; export type ItemStyleProps = Pick; @@ -54,15 +65,30 @@ class ItemStyleMixin { includes?: readonly (keyof ItemStyleOption)[] ): ItemStyleProps { const style = getItemStyle(this, excludes, includes); - const lineDash = this.getBorderLineDash(); - lineDash && (style.lineDash = lineDash); + style.lineDash = this.getBorderLineDash(style.lineWidth); return style; } - getBorderLineDash(this: Model): number[] { + getBorderLineDash(this: Model, lineWidth?: number): false | number[] { const lineType = this.get('borderType'); - return (lineType === 'solid' || lineType == null) ? null - : (lineType === 'dashed' ? [5, 5] : [1, 1]); + if (lineType === 'solid' || lineType == null) { + return false; + } + + lineWidth = lineWidth || 0; + + let dashArray = this.get('borderDashArray'); + // compatible with single number + if (dashArray != null && !isNaN(dashArray)) { + dashArray = [+dashArray]; + } + return map( + dashArray || (lineType === 'dashed' ? [5, 5] : [1, 1]), + function (raw): number { + // compute real dash array + return raw * 0.5 * lineWidth * 0.1; + } + );; } } diff --git a/src/model/mixin/lineStyle.ts b/src/model/mixin/lineStyle.ts index 1d82c8699b..fde525ce18 100644 --- a/src/model/mixin/lineStyle.ts +++ b/src/model/mixin/lineStyle.ts @@ -56,7 +56,10 @@ type LineStyleProps = Pick; class LineStyleMixin { - getLineStyle(this: Model, excludes?: readonly (keyof LineStyleOption)[]): LineStyleProps { + getLineStyle( + this: Model, + excludes?: readonly (keyof LineStyleOption)[] + ): LineStyleProps { const style = getLineStyle(this, excludes); // Always set lineDash whether dashed, otherwise we can not // erase the previous style when assigning to el.style. @@ -64,24 +67,25 @@ class LineStyleMixin { return style; } - getLineDash(this: Model, lineWidth?: number) { + getLineDash(this: Model, lineWidth?: number): false | number[] { + const lineType = this.get('type'); + if (lineType === 'solid' || lineType == null) { + // Use `false` but not `null` for the solid line here, because `null` might be + // ignored when assigning to `el.style`. e.g., when setting `lineStyle.type` as + // `'dashed'` and `emphasis.lineStyle.type` as `'solid'` in graph series, the + // `lineDash` gotten form the latter one is not able to erase that from the former + // one if using `null` here according to the emhpsis strategy in `util/graphic.js`. + return false; + } if (lineWidth == null) { lineWidth = 1; } - const lineType = this.get('type'); let dashArray = this.get('dashArray'); // compatible with single number if (dashArray != null && !isNaN(dashArray)) { dashArray = [+dashArray]; } - return (lineType === 'solid' || lineType == null) - // Use `false` but not `null` for the solid line here, because `null` might be - // ignored when assigning to `el.style`. e.g., when setting `lineStyle.type` as - // `'dashed'` and `emphasis.lineStyle.type` as `'solid'` in graph series, the - // `lineDash` gotten form the latter one is not able to erase that from the former - // one if using `null` here according to the emhpsis strategy in `util/graphic.js`. - ? false - : lineType === 'dashed' + return lineType === 'dashed' ? dashArray || [lineWidth * 4] : dashArray || [Math.max(lineWidth, 2)]; } diff --git a/src/util/types.ts b/src/util/types.ts index ddc52d59d2..b1a522692c 100644 --- a/src/util/types.ts +++ b/src/util/types.ts @@ -559,6 +559,11 @@ export interface BorderOptionMixin { borderColor?: string borderWidth?: number borderType?: ZRLineType + borderCap?: CanvasLineCap + borderJoin?: CanvasLineJoin + borderDashArray?: number | number[] + borderDashOffset?: number + borderMiterLimit?: number } export type AnimationDelayCallbackParam = { diff --git a/test/line-style.html b/test/line-style.html index 0c3319160e..19a1b2b2b3 100644 --- a/test/line-style.html +++ b/test/line-style.html @@ -162,6 +162,20 @@ lineStyle: { type: 'dashed', dashArray: [10, 5] + }, + itemStyle: { + borderType: 'dashed', + borderWidth: 1, + borderColor: 'cyan', + borderDashArray: [2, 2] + }, + emphasis: { + itemStyle: { + borderType: 'dashed', + borderWidth: 2, + borderColor: '#000', + borderDashArray: [12, 3, 3] + } } }, { From 666142d66787ba3a9c57ac2327ebe9b171dbccf3 Mon Sep 17 00:00:00 2001 From: plainheart Date: Sun, 19 Jul 2020 18:13:30 +0800 Subject: [PATCH 05/19] fix: remove redundant semicolon --- src/model/mixin/itemStyle.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/model/mixin/itemStyle.ts b/src/model/mixin/itemStyle.ts index 73afbf1201..b800009c98 100644 --- a/src/model/mixin/itemStyle.ts +++ b/src/model/mixin/itemStyle.ts @@ -88,7 +88,7 @@ class ItemStyleMixin { // compute real dash array return raw * 0.5 * lineWidth * 0.1; } - );; + ); } } From d83022807616e8fc62dc939c5a7223737c85f1b9 Mon Sep 17 00:00:00 2001 From: plainheart Date: Mon, 20 Jul 2020 18:20:39 +0800 Subject: [PATCH 06/19] tweak: tweak `getBorderLineDash` for item style. --- src/model/mixin/itemStyle.ts | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/model/mixin/itemStyle.ts b/src/model/mixin/itemStyle.ts index b800009c98..c2fed82b10 100644 --- a/src/model/mixin/itemStyle.ts +++ b/src/model/mixin/itemStyle.ts @@ -21,7 +21,6 @@ import makeStyleMapper from './makeStyleMapper'; import Model from '../Model'; import { ItemStyleOption } from '../../util/types'; import { PathStyleProps } from 'zrender/src/graphic/Path'; -import { map } from 'zrender/src/core/util'; export const ITEM_STYLE_KEY_MAP = [ ['fill', 'color'], @@ -82,13 +81,7 @@ class ItemStyleMixin { if (dashArray != null && !isNaN(dashArray)) { dashArray = [+dashArray]; } - return map( - dashArray || (lineType === 'dashed' ? [5, 5] : [1, 1]), - function (raw): number { - // compute real dash array - return raw * 0.5 * lineWidth * 0.1; - } - ); + return dashArray || (lineType === 'dashed' ? [5, 5] : [1, 1]); } } From a3c341f03339536c7dfff49438e3627a2b1e8b2e Mon Sep 17 00:00:00 2001 From: plainheart Date: Mon, 20 Jul 2020 18:56:15 +0800 Subject: [PATCH 07/19] fix: compatible with bar series. --- src/chart/bar/BarView.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts index eecb05dc41..3294db0e1b 100644 --- a/src/chart/bar/BarView.ts +++ b/src/chart/bar/BarView.ts @@ -748,7 +748,7 @@ function updateStyle( (el as Rect).setShape('r', itemModel.get(BAR_BORDER_RADIUS_QUERY) || 0); } - el.useStyle(style); + el.useStyle(extend(style, itemModel.getModel('itemStyle').getItemStyle())); el.ignore = isZeroOnPolar(layout as SectorLayout); @@ -1005,4 +1005,4 @@ function createBackgroundEl( ChartView.registerClass(BarView); -export default BarView; \ No newline at end of file +export default BarView; From 09c65197fdd5d46144f9cb4eb0b299126a92ecf5 Mon Sep 17 00:00:00 2001 From: plainheart Date: Wed, 22 Jul 2020 11:17:42 +0800 Subject: [PATCH 08/19] tweak: tweak the logic of border style for line series and bar series. --- src/chart/bar/BarView.ts | 10 ++++++---- src/chart/helper/Symbol.ts | 24 ++++++------------------ src/chart/helper/SymbolDraw.ts | 4 +++- test/line-style.html | 19 ++++++++++++++++++- 4 files changed, 33 insertions(+), 24 deletions(-) diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts index 3294db0e1b..d639f9a750 100644 --- a/src/chart/bar/BarView.ts +++ b/src/chart/bar/BarView.ts @@ -748,7 +748,7 @@ function updateStyle( (el as Rect).setShape('r', itemModel.get(BAR_BORDER_RADIUS_QUERY) || 0); } - el.useStyle(extend(style, itemModel.getModel('itemStyle').getItemStyle())); + el.useStyle(extend(style, itemModel.getModel('itemStyle').getItemStyle(['color']))); el.ignore = isZeroOnPolar(layout as SectorLayout); @@ -807,7 +807,7 @@ class LargePath extends Path { type = 'largeBar'; shape: LagePathShape; -; + __startPoint: number[]; __baseDimIdx: number; __largeDataIndices: ArrayLike; @@ -940,10 +940,12 @@ function setLargeStyle( ) { const globalStyle = data.getVisual('style'); + console.log(globalStyle) + el.useStyle(extend({}, globalStyle)); // Use stroke instead of fill. - el.style.fill = null; - el.style.stroke = globalStyle.fill; + //el.style.fill = null; + //el.style.stroke = globalStyle.fill; el.style.lineWidth = data.getLayout('barWidth'); } diff --git a/src/chart/helper/Symbol.ts b/src/chart/helper/Symbol.ts index b7c07987c1..fc54dc6140 100644 --- a/src/chart/helper/Symbol.ts +++ b/src/chart/helper/Symbol.ts @@ -198,7 +198,7 @@ class Symbol extends graphic.Group { const symbolPath = this.childAt(0) as ECSymbol; const seriesModel = data.hostModel as SeriesModel; - + let itemStyle; let emphasisItemStyle; let blurItemStyle; let selectItemStyle; @@ -213,6 +213,7 @@ class Symbol extends graphic.Group { let cursorStyle; if (seriesScope) { + itemStyle = seriesScope.itemStyle; emphasisItemStyle = seriesScope.emphasisItemStyle; blurItemStyle = seriesScope.blurItemStyle; selectItemStyle = seriesScope.selectItemStyle; @@ -230,8 +231,9 @@ class Symbol extends graphic.Group { if (!seriesScope || data.hasItemOption) { const itemModel = (seriesScope && seriesScope.itemModel) ? seriesScope.itemModel : data.getItemModel(idx); - const emphasisModel = itemModel.getModel('emphasis'); + + itemStyle = itemModel.getModel('itemStyle').getItemStyle(['color']); emphasisItemStyle = emphasisModel.getModel('itemStyle').getItemStyle(); selectItemStyle = itemModel.getModel(['select', 'itemStyle']).getItemStyle(); blurItemStyle = itemModel.getModel(['blur', 'itemStyle']).getItemStyle(); @@ -257,26 +259,12 @@ class Symbol extends graphic.Group { } cursorStyle && symbolPath.attr('cursor', cursorStyle); - - const symbolStyle = data.getItemVisual(idx, 'style'); + const symbolStyle = extend(extend({}, data.getItemVisual(idx, 'style')), itemStyle); const visualColor = symbolStyle.fill; - if (symbolPath.__isEmptyBrush) { - // fill and stroke will be swapped if it's empty. - // So we cloned a new style to avoid it affecting the original style in visual storage. - // TODO Better implementation. No empty logic! - symbolPath.useStyle(extend({}, symbolStyle)); - } - else { - symbolPath.useStyle(symbolStyle); - } + symbolPath.useStyle(symbolStyle); symbolPath.setColor(visualColor, opts && opts.symbolInnerColor); symbolPath.style.strokeNoScale = true; - const itemModel = (seriesScope && seriesScope.itemModel) - ? seriesScope.itemModel - : data.getItemModel(idx); - symbolPath.style.lineDash = itemModel.getModel('itemStyle').getBorderLineDash(symbolStyle.lineWidth); - const liftZ = data.getItemVisual(idx, 'liftZ'); const z2Origin = this._z2; if (liftZ != null) { diff --git a/src/chart/helper/SymbolDraw.ts b/src/chart/helper/SymbolDraw.ts index 756a15dad9..b8b9e66b60 100644 --- a/src/chart/helper/SymbolDraw.ts +++ b/src/chart/helper/SymbolDraw.ts @@ -105,6 +105,7 @@ export interface SymbolDrawItemModelOption extends SymbolOptionMixin, } export interface SymbolDrawSeriesScope { + itemStyle?: ZRStyleProps emphasisItemStyle?: ZRStyleProps blurItemStyle?: ZRStyleProps selectItemStyle?: ZRStyleProps @@ -129,6 +130,7 @@ function makeSeriesScope(data: List): SymbolDrawSeriesScope { const seriesModel = data.hostModel as Model; const emphasisModel = seriesModel.getModel('emphasis'); return { + itemStyle: seriesModel.getModel('itemStyle').getItemStyle(['color']), emphasisItemStyle: emphasisModel.getModel('itemStyle').getItemStyle(), blurItemStyle: seriesModel.getModel(['blur', 'itemStyle']).getItemStyle(), selectItemStyle: seriesModel.getModel(['select', 'itemStyle']).getItemStyle(), @@ -289,4 +291,4 @@ class SymbolDraw { } -export default SymbolDraw; \ No newline at end of file +export default SymbolDraw; diff --git a/test/line-style.html b/test/line-style.html index 19a1b2b2b3..22a3bd08be 100644 --- a/test/line-style.html +++ b/test/line-style.html @@ -156,14 +156,26 @@ { name: 'lineStyle.dashArray is [10, 5]', type: 'line', - data: [7200, 7210, 7200, 7220, 7200, 7230], + data: [{ + value: 7200, + itemStyle: { + color: 'cyan', + //borderWidth: 10, + borderType: 'solid', + borderColor: 'red' + }, + //symbolRotate: 45 + }, 7210, 7200, 7220, 7200, 7230], symbolSize: 10, smooth: true, lineStyle: { type: 'dashed', dashArray: [10, 5] }, + symbol: 'circle', + //symbolRotate: 60, itemStyle: { + color: 'red', borderType: 'dashed', borderWidth: 1, borderColor: 'cyan', @@ -308,6 +320,11 @@ ], option: option }); + + setTimeout(function() { + option.series[0].symbol = 'emptyCircle'; + chart2.setOption(option); + }, 2000); }); From c9c8060363b227f984fad9e0aca5f0e550b90820 Mon Sep 17 00:00:00 2001 From: plainheart Date: Wed, 22 Jul 2020 11:26:11 +0800 Subject: [PATCH 09/19] tweak: remove dev code. --- src/chart/bar/BarView.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts index d639f9a750..6432ad12f4 100644 --- a/src/chart/bar/BarView.ts +++ b/src/chart/bar/BarView.ts @@ -748,7 +748,7 @@ function updateStyle( (el as Rect).setShape('r', itemModel.get(BAR_BORDER_RADIUS_QUERY) || 0); } - el.useStyle(extend(style, itemModel.getModel('itemStyle').getItemStyle(['color']))); + el.useStyle(extend(extend({}, style), itemModel.getModel('itemStyle').getItemStyle(['color']))); el.ignore = isZeroOnPolar(layout as SectorLayout); @@ -807,7 +807,7 @@ class LargePath extends Path { type = 'largeBar'; shape: LagePathShape; - +; __startPoint: number[]; __baseDimIdx: number; __largeDataIndices: ArrayLike; @@ -940,12 +940,10 @@ function setLargeStyle( ) { const globalStyle = data.getVisual('style'); - console.log(globalStyle) - el.useStyle(extend({}, globalStyle)); // Use stroke instead of fill. - //el.style.fill = null; - //el.style.stroke = globalStyle.fill; + el.style.fill = null; + el.style.stroke = globalStyle.fill; el.style.lineWidth = data.getLayout('barWidth'); } From 02fcba33cb680f73fe7d065fb4d689c6b73278dd Mon Sep 17 00:00:00 2001 From: plainheart Date: Wed, 22 Jul 2020 13:53:10 +0800 Subject: [PATCH 10/19] feat: support for text dash line. --- src/label/labelStyle.ts | 17 +++++++++++++++++ src/util/types.ts | 6 ++++++ 2 files changed, 23 insertions(+) diff --git a/src/label/labelStyle.ts b/src/label/labelStyle.ts index 731d1bb4f2..90303f189b 100644 --- a/src/label/labelStyle.ts +++ b/src/label/labelStyle.ts @@ -434,6 +434,23 @@ function setTokenTextStyle( if (lineWidth != null) { textStyle.lineWidth = lineWidth; } + const lineType = retrieve2(textStyleModel.getShallow('textBorderType'), globalTextStyle.textBorderType); + if (!lineType || lineType === 'solid') { + textStyle.lineDash = []; + } + else { + let lineDashArray = retrieve2(textStyleModel.getShallow('textBorderDashArray'), globalTextStyle.textBorderDashArray); + // compatible with single number + if (lineDashArray != null && !isNaN(lineDashArray as number)) { + lineDashArray = [+lineDashArray]; + } + textStyle.lineDash = lineDashArray as number[] || (lineType === 'dashed' ? [5, 5] : [1, 1]); + } + const lineDashOffset = retrieve2(textStyleModel.getShallow('textBorderDashOffset'), globalTextStyle.textBorderDashOffset); + if (lineDashOffset != null) { + textStyle.lineDashOffset = lineDashOffset; + } + // TODO if (!isNotNormal && !isAttached) { // Set default finally. diff --git a/src/util/types.ts b/src/util/types.ts index 272a0eac92..5499e44323 100644 --- a/src/util/types.ts +++ b/src/util/types.ts @@ -791,6 +791,9 @@ export interface TextCommonOption extends ShadowOptionMixin { } borderColor?: string borderWidth?: number + borderType?: ZRLineType + borderDashArray?: number | number[] + borderDashOffset?: number borderRadius?: number | number[] padding?: number | number[] @@ -798,6 +801,9 @@ export interface TextCommonOption extends ShadowOptionMixin { height?: number textBorderColor?: string textBorderWidth?: number + textBorderType?: ZRLineType + textBorderDashArray?: number | number[] + textBorderDashOffset?: number textShadowBlur?: number textShadowColor?: string From e8df502e95d16a0847f2396726a9631b2f98adb8 Mon Sep 17 00:00:00 2001 From: plainheart Date: Wed, 22 Jul 2020 15:15:42 +0800 Subject: [PATCH 11/19] fix: tweak label style. --- src/label/labelStyle.ts | 34 +++++++++++++++++++++++++--------- 1 file changed, 25 insertions(+), 9 deletions(-) diff --git a/src/label/labelStyle.ts b/src/label/labelStyle.ts index 90303f189b..af1c573b12 100644 --- a/src/label/labelStyle.ts +++ b/src/label/labelStyle.ts @@ -434,21 +434,37 @@ function setTokenTextStyle( if (lineWidth != null) { textStyle.lineWidth = lineWidth; } - const lineType = retrieve2(textStyleModel.getShallow('textBorderType'), globalTextStyle.textBorderType); - if (!lineType || lineType === 'solid') { + const textBorderType = retrieve2(textStyleModel.getShallow('textBorderType'), globalTextStyle.textBorderType); + if (!textBorderType || textBorderType === 'solid') { textStyle.lineDash = []; } else { - let lineDashArray = retrieve2(textStyleModel.getShallow('textBorderDashArray'), globalTextStyle.textBorderDashArray); + let textBorderDashArray = retrieve2(textStyleModel.getShallow('textBorderDashArray'), globalTextStyle.textBorderDashArray); // compatible with single number - if (lineDashArray != null && !isNaN(lineDashArray as number)) { - lineDashArray = [+lineDashArray]; + if (textBorderDashArray != null && !isNaN(textBorderDashArray as number)) { + textBorderDashArray = [+textBorderDashArray]; } - textStyle.lineDash = lineDashArray as number[] || (lineType === 'dashed' ? [5, 5] : [1, 1]); + textStyle.lineDash = textBorderDashArray as number[] || (textBorderType === 'dashed' ? [5, 5] : [1, 1]); } - const lineDashOffset = retrieve2(textStyleModel.getShallow('textBorderDashOffset'), globalTextStyle.textBorderDashOffset); - if (lineDashOffset != null) { - textStyle.lineDashOffset = lineDashOffset; + const textBorderDashOffset = retrieve2(textStyleModel.getShallow('textBorderDashOffset'), globalTextStyle.textBorderDashOffset); + if (textBorderDashOffset != null) { + textStyle.lineDashOffset = textBorderDashOffset; + } + const borderType = retrieve2(textStyleModel.getShallow('borderType'), globalTextStyle.borderType); + if (!borderType || borderType === 'solid') { + textStyle.borderDash = []; + } + else { + let borderDashArray = retrieve2(textStyleModel.getShallow('borderDashArray'), globalTextStyle.borderDashArray); + // compatible with single number + if (borderDashArray != null && !isNaN(borderDashArray as number)) { + borderDashArray = [+borderDashArray]; + } + textStyle.borderDash = borderDashArray as number[] || (textBorderType === 'dashed' ? [5, 5] : [1, 1]); + } + const borderDashOffset = retrieve2(textStyleModel.getShallow('borderDashOffset'), globalTextStyle.borderDashOffset); + if (borderDashOffset != null) { + textStyle.borderDashOffset = borderDashOffset; } // TODO From a17d2a0917d3ead43d9252971db773ce63100c8b Mon Sep 17 00:00:00 2001 From: plainheart Date: Wed, 22 Jul 2020 16:34:47 +0800 Subject: [PATCH 12/19] fix: border line dash bug in itemStyle. --- src/label/labelStyle.ts | 40 ++++++++++++++++++------------------ src/model/mixin/itemStyle.ts | 6 +++--- src/model/mixin/lineStyle.ts | 2 +- 3 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/label/labelStyle.ts b/src/label/labelStyle.ts index af1c573b12..61c30f14fb 100644 --- a/src/label/labelStyle.ts +++ b/src/label/labelStyle.ts @@ -19,7 +19,7 @@ import { SPECIAL_STATES, DISPLAY_STATES } from '../util/states'; type TextCommonParams = { /** - * Whether diable drawing box of block (outer most). + * Whether disable drawing box of block (outer most). */ disableBox?: boolean /** @@ -430,9 +430,9 @@ function setTokenTextStyle( if (strokeColor != null) { textStyle.stroke = strokeColor; } - const lineWidth = retrieve2(textStyleModel.getShallow('textBorderWidth'), globalTextStyle.textBorderWidth); - if (lineWidth != null) { - textStyle.lineWidth = lineWidth; + const textBorderWidth = retrieve2(textStyleModel.getShallow('textBorderWidth'), globalTextStyle.textBorderWidth); + if (textBorderWidth != null) { + textStyle.lineWidth = textBorderWidth; } const textBorderType = retrieve2(textStyleModel.getShallow('textBorderType'), globalTextStyle.textBorderType); if (!textBorderType || textBorderType === 'solid') { @@ -450,22 +450,6 @@ function setTokenTextStyle( if (textBorderDashOffset != null) { textStyle.lineDashOffset = textBorderDashOffset; } - const borderType = retrieve2(textStyleModel.getShallow('borderType'), globalTextStyle.borderType); - if (!borderType || borderType === 'solid') { - textStyle.borderDash = []; - } - else { - let borderDashArray = retrieve2(textStyleModel.getShallow('borderDashArray'), globalTextStyle.borderDashArray); - // compatible with single number - if (borderDashArray != null && !isNaN(borderDashArray as number)) { - borderDashArray = [+borderDashArray]; - } - textStyle.borderDash = borderDashArray as number[] || (textBorderType === 'dashed' ? [5, 5] : [1, 1]); - } - const borderDashOffset = retrieve2(textStyleModel.getShallow('borderDashOffset'), globalTextStyle.borderDashOffset); - if (borderDashOffset != null) { - textStyle.borderDashOffset = borderDashOffset; - } // TODO if (!isNotNormal && !isAttached) { @@ -511,6 +495,22 @@ function setTokenTextStyle( (textStyle as any)[key] = val; } } + const borderType = retrieve2(textStyleModel.getShallow('borderType'), globalTextStyle.borderType); + if (!borderType || borderType === 'solid') { + textStyle.borderDash = []; + } + else { + let borderDashArray = retrieve2(textStyleModel.getShallow('borderDashArray'), globalTextStyle.borderDashArray); + // compatible with single number + if (borderDashArray != null && !isNaN(borderDashArray as number)) { + borderDashArray = [+borderDashArray]; + } + textStyle.borderDash = borderDashArray as number[] || (borderType === 'dashed' ? [5, 5] : [1, 1]); + } + const borderDashOffset = retrieve2(textStyleModel.getShallow('borderDashOffset'), globalTextStyle.borderDashOffset); + if (borderDashOffset != null) { + textStyle.borderDashOffset = borderDashOffset; + } } } export function getFont( diff --git a/src/model/mixin/itemStyle.ts b/src/model/mixin/itemStyle.ts index c2fed82b10..77619547d6 100644 --- a/src/model/mixin/itemStyle.ts +++ b/src/model/mixin/itemStyle.ts @@ -68,10 +68,10 @@ class ItemStyleMixin { return style; } - getBorderLineDash(this: Model, lineWidth?: number): false | number[] { + getBorderLineDash(this: Model, lineWidth?: number): number[] { const lineType = this.get('borderType'); - if (lineType === 'solid' || lineType == null) { - return false; + if (lineType == null || lineType === 'solid') { + return []; } lineWidth = lineWidth || 0; diff --git a/src/model/mixin/lineStyle.ts b/src/model/mixin/lineStyle.ts index fde525ce18..923c89dcb0 100644 --- a/src/model/mixin/lineStyle.ts +++ b/src/model/mixin/lineStyle.ts @@ -69,7 +69,7 @@ class LineStyleMixin { getLineDash(this: Model, lineWidth?: number): false | number[] { const lineType = this.get('type'); - if (lineType === 'solid' || lineType == null) { + if (lineType == null || lineType === 'solid') { // Use `false` but not `null` for the solid line here, because `null` might be // ignored when assigning to `el.style`. e.g., when setting `lineStyle.type` as // `'dashed'` and `emphasis.lineStyle.type` as `'solid'` in graph series, the From 85494bc90a60657d86b180db1db4c6d33d325513 Mon Sep 17 00:00:00 2001 From: plainheart Date: Tue, 28 Jul 2020 15:42:44 +0800 Subject: [PATCH 13/19] test: added more test cases for components. --- src/component/axisPointer/viewHelper.ts | 2 +- src/component/title.ts | 4 +- test/line-style.html | 157 ++++++++++++++++++++++-- 3 files changed, 153 insertions(+), 10 deletions(-) diff --git a/src/component/axisPointer/viewHelper.ts b/src/component/axisPointer/viewHelper.ts index d379c1a027..47abec0447 100644 --- a/src/component/axisPointer/viewHelper.ts +++ b/src/component/axisPointer/viewHelper.ts @@ -121,7 +121,7 @@ export function buildLabelElOption( // shape: {x: 0, y: 0, width: width, height: height, r: labelModel.get('borderRadius')}, x: position[0], y: position[1], - // TODO: rich + // TODO: rich & borderType style: { text: text, textFont: font, diff --git a/src/component/title.ts b/src/component/title.ts index 9b41939d4a..13a13062c4 100644 --- a/src/component/title.ts +++ b/src/component/title.ts @@ -187,7 +187,7 @@ class TitleView extends ComponentView { } if (sublink) { subTextEl.on('click', function () { - windowOpen(link, '_' + titleModel.get('subtarget')); + windowOpen(sublink, '_' + titleModel.get('subtarget')); }); } @@ -277,4 +277,4 @@ class TitleView extends ComponentView { } } -ComponentView.registerClass(TitleView); \ No newline at end of file +ComponentView.registerClass(TitleView); diff --git a/test/line-style.html b/test/line-style.html index 22a3bd08be..6443cb6c34 100644 --- a/test/line-style.html +++ b/test/line-style.html @@ -138,19 +138,162 @@ 'echarts' ], function (echarts) { var option = { + title: { + text: '这是标题~', + borderColor: 'red', + borderWidth: 1, + borderType: 'dashed', + textStyle: { + textBorderWidth: 1, + textBorderColor: 'red', + textBorderType: 'dotted' + }, + subtext: '这是副标题', + subtextStyle: { + textBorderWidth: 1, + textBorderColor: 'cyan', + textBorderType: 'dashed', + textBorderDash: [15, 3, 3] + } + }, legend: { - left: 'center', - bottom: 'bottom' + left: '10%', + bottom: '2%', + right: '10%', + borderWidth: 1, + borderColor: 'blue', + borderType: 'dotted', + textStyle: { + textBorderWidth: 1, + textBorderColor: 'green', + textBorderType: 'dotted' + } + }, + toolbox: { + show: true, + feature: { + dataZoom: { + yAxisIndex: "none" + }, + dataView: { + readOnly: false + }, + magicType: { + type: ["line", "bar"] + }, + restore: {}, + saveAsImage: {} + }, + iconStyle: { + borderType: 'dotted', + borderWidth: 1, + borderColor: 'cyan' + } + }, + axisPointer: { + show: true, + type: 'line', + lineStyle: { + type: 'dotted', + color: 'cyan', + width: 2 + }, + // TODO + // label: { + // borderWidth: 1, + // borderColor: 'blue', + // borderType: 'dashed', + // backgroundColor: 'transparent' + // } }, xAxis: { type: 'category', data: [100, 200, 20, 30, 60, 89], + name: 'X轴', + nameTextStyle: { + borderWidth: 1, + borderColor: 'red', + borderType: 'dashed', + textBorderWidth: 1, + textBorderColor: 'green', + //textBorderType: 'dashed' + }, + splitLine: { + show: true, + lineStyle: { + width: 2, + type: 'dotted' + } + } }, yAxis: { type: 'value', + name: 'Y轴', + nameTextStyle: { + borderWidth: 1, + borderColor: 'black' + }, + splitLine: { + lineStyle: { + type: 'dashed', + dashArray: [20, 5, 5] + } + } + }, + graphic: { + elements: [{ + type: 'group', + left: '10%', + top: 'center', + children: [ + { + type: 'rect', + z: 100, + left: 'center', + top: 'middle', + shape: { + width: 190, + height: 90 + }, + style: { + fill: '#fff', + stroke: '#555', + lineWidth: 2, + lineDash: [5, 5], + shadowBlur: 8, + shadowOffsetX: 3, + shadowOffsetY: 3, + shadowColor: 'rgba(0,0,0,0.3)' + } + }, + { + type: 'text', + z: 100, + left: 'center', + top: 'middle', + style: { + fill: '#333', + text: [ + '横轴表示温度，单位是°C', + '纵轴表示高度，单位是km', + '右上角有一个图片做的水印', + '这个文本块可以放在图中各', + '种位置' + ].join('\n'), + stroke: 'red', + lineDash: [2], + lineWidth: 1, + borderWidth: 2, + borderColor: 'blue', + borderDash: [5, 5], + font: '14px Microsoft YaHei' + } + } + ] + }] }, grid: { - bottom: 120 + bottom: 180 }, series: [ { @@ -321,10 +464,10 @@ option: option }); - setTimeout(function() { - option.series[0].symbol = 'emptyCircle'; - chart2.setOption(option); - }, 2000); + // setTimeout(function() { + // option.series[0].symbol = 'emptyCircle'; + // chart2.setOption(option); + // }, 2000); }); From 4ffd0fa6162b2644e8d9f340c812d24a2581e471 Mon Sep 17 00:00:00 2001 From: plainheart Date: Fri, 31 Jul 2020 13:21:48 +0800 Subject: [PATCH 14/19] fix(axisPointer): improve the style of axisPointer label and support dash style. --- src/component/axisPointer/viewHelper.ts | 17 +++------ test/line-style.html | 48 +++++++++++++++++++++---- 2 files changed, 47 insertions(+), 18 deletions(-) diff --git a/src/component/axisPointer/viewHelper.ts b/src/component/axisPointer/viewHelper.ts index 9db6b24867..f00a78d329 100644 --- a/src/component/axisPointer/viewHelper.ts +++ b/src/component/axisPointer/viewHelper.ts @@ -38,6 +38,7 @@ import ExtensionAPI from '../../ExtensionAPI'; import CartesianAxisModel from '../../coord/cartesian/AxisModel'; import Model from '../../model/Model'; import { PathStyleProps } from 'zrender/src/graphic/Path'; +import { createTextStyle } from '../../label/labelStyle'; interface LayoutInfo { position: VectorArray @@ -121,21 +122,13 @@ export function buildLabelElOption( // shape: {x: 0, y: 0, width: width, height: height, r: labelModel.get('borderRadius')}, x: position[0], y: position[1], - // TODO: rich & borderType - style: { + style: createTextStyle(labelModel, { text: text, - textFont: font, + font: font, fill: labelModel.getTextColor(), padding: paddings, - backgroundColor: bgColor as ColorString, - borderColor: labelModel.get('borderColor') || 'transparent', - borderRadius: labelModel.get('borderRadius'), - borderWidth: labelModel.get('borderWidth') || 0, - shadowBlur: labelModel.get('shadowBlur'), - shadowColor: labelModel.get('shadowColor'), - shadowOffsetX: labelModel.get('shadowOffsetX'), - shadowOffsetY: labelModel.get('shadowOffsetY') - }, + backgroundColor: bgColor as ColorString + }), // Lable should be over axisPointer. z2: 10 }; diff --git a/test/line-style.html b/test/line-style.html index 6443cb6c34..7f32b95348 100644 --- a/test/line-style.html +++ b/test/line-style.html @@ -190,6 +190,9 @@ borderColor: 'cyan' } }, + tooltip: { + formatter: '{c}' + }, axisPointer: { show: true, type: 'line', @@ -199,12 +202,45 @@ width: 2 }, // TODO - // label: { - // borderWidth: 1, - // borderColor: 'blue', - // borderType: 'dashed', - // backgroundColor: 'transparent' - // } + label: { + //show: false, + fontWeight: 'bold', + precision: 2, + fontSize: '1rem', + textShadowBlur: 10, + //textShadowOffsetX: 2, + //textShadowOffsetY: 2, + textShadowColor: 'red', + textBorderColor: 'cyan', + textBorderWidth: 2, + textBorderType: 'dotted', + //textBorderDashArray: [5, 5], + borderWidth: 1, + borderColor: 'black', + borderType: 'dashed', + borderDashArray: [15, 3, 3], + borderRadius: 20, + backgroundColor: 'yellow', + padding: 10, + shadowColor: 'green', + shadowBlur: 5, + //shadowOffsetX: 10, + //shadowOffsetY: 10, + color: '#fff', + fontFamily: 'SimHei', + rich: { + name: { + textBorderColor: 'purple', + fontSize: 12, + fontFamily: 'Courier New' + } + }, + //formatter: '{name|{value}}', + //width: 120, + //height: 30, + //lineHeight: 30 + //opacity: 0.5 + } }, xAxis: { type: 'category', From db9d0b1384f3012317ab519241ad7c0fd8e0b65a Mon Sep 17 00:00:00 2001 From: plainheart Date: Sun, 9 Aug 2020 10:05:54 +0800 Subject: [PATCH 15/19] fix: simplify the merging logic of item style. --- src/chart/bar/BarView.ts | 2 +- src/chart/helper/Symbol.ts | 5 +---- src/chart/helper/SymbolDraw.ts | 2 -- test/line-style.html | 8 +++++++- 4 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts index d88708ac91..029a6c344d 100644 --- a/src/chart/bar/BarView.ts +++ b/src/chart/bar/BarView.ts @@ -797,7 +797,7 @@ function updateStyle( (el as Rect).setShape('r', itemModel.get(BAR_BORDER_RADIUS_QUERY) || 0); } - el.useStyle(extend(extend({}, style), itemModel.getModel('itemStyle').getItemStyle(['color']))); + el.useStyle(style); el.ignore = isZeroOnPolar(layout as SectorLayout); diff --git a/src/chart/helper/Symbol.ts b/src/chart/helper/Symbol.ts index 4317474412..0ddb15788f 100644 --- a/src/chart/helper/Symbol.ts +++ b/src/chart/helper/Symbol.ts @@ -200,7 +200,6 @@ class Symbol extends graphic.Group { const symbolPath = this.childAt(0) as ECSymbol; const seriesModel = data.hostModel as SeriesModel; - let itemStyle; let emphasisItemStyle; let blurItemStyle; let selectItemStyle; @@ -215,7 +214,6 @@ class Symbol extends graphic.Group { let cursorStyle; if (seriesScope) { - itemStyle = seriesScope.itemStyle; emphasisItemStyle = seriesScope.emphasisItemStyle; blurItemStyle = seriesScope.blurItemStyle; selectItemStyle = seriesScope.selectItemStyle; @@ -235,7 +233,6 @@ class Symbol extends graphic.Group { ? seriesScope.itemModel : data.getItemModel(idx); const emphasisModel = itemModel.getModel('emphasis'); - itemStyle = itemModel.getModel('itemStyle').getItemStyle(['color']); emphasisItemStyle = emphasisModel.getModel('itemStyle').getItemStyle(); selectItemStyle = itemModel.getModel(['select', 'itemStyle']).getItemStyle(); blurItemStyle = itemModel.getModel(['blur', 'itemStyle']).getItemStyle(); @@ -262,7 +259,7 @@ class Symbol extends graphic.Group { cursorStyle && symbolPath.attr('cursor', cursorStyle); - const symbolStyle = extend(extend({}, data.getItemVisual(idx, 'style')), itemStyle); + const symbolStyle = data.getItemVisual(idx, 'style'); const visualColor = symbolStyle.fill; if (symbolPath instanceof ZRImage) { diff --git a/src/chart/helper/SymbolDraw.ts b/src/chart/helper/SymbolDraw.ts index 027749cdb8..fd864e6021 100644 --- a/src/chart/helper/SymbolDraw.ts +++ b/src/chart/helper/SymbolDraw.ts @@ -105,7 +105,6 @@ export interface SymbolDrawItemModelOption extends SymbolOptionMixin, } export interface SymbolDrawSeriesScope { - itemStyle?: ZRStyleProps emphasisItemStyle?: ZRStyleProps blurItemStyle?: ZRStyleProps selectItemStyle?: ZRStyleProps @@ -130,7 +129,6 @@ function makeSeriesScope(data: List): SymbolDrawSeriesScope { const seriesModel = data.hostModel as Model; const emphasisModel = seriesModel.getModel('emphasis'); return { - itemStyle: seriesModel.getModel('itemStyle').getItemStyle(['color']), emphasisItemStyle: emphasisModel.getModel('itemStyle').getItemStyle(), blurItemStyle: seriesModel.getModel(['blur', 'itemStyle']).getItemStyle(), selectItemStyle: seriesModel.getModel(['select', 'itemStyle']).getItemStyle(), diff --git a/test/line-style.html b/test/line-style.html index 7f32b95348..6f2cc8e260 100644 --- a/test/line-style.html +++ b/test/line-style.html @@ -138,6 +138,13 @@ 'echarts' ], function (echarts) { var option = { + // textStyle: { + // color: 'red', + // textBorderWidth: 5, + // textBorderColor: 'red', + // textBorderType: 'dashed', + // textBorderDash: [2, 2] + // }, title: { text: '这是标题~', borderColor: 'red', @@ -201,7 +208,6 @@ color: 'cyan', width: 2 }, - // TODO label: { //show: false, fontWeight: 'bold', From 9279f7535ac369b0b423b1bf0700ce7eb87513c9 Mon Sep 17 00:00:00 2001 From: plainheart Date: Mon, 17 Aug 2020 13:50:35 +0800 Subject: [PATCH 16/19] refact(dash): normalize dash style in zrender. --- src/chart/helper/Line.ts | 2 +- src/component/axis/SingleAxisView.ts | 3 +- src/label/labelStyle.ts | 32 +++------------- src/model/mixin/itemStyle.ts | 21 +---------- src/model/mixin/lineStyle.ts | 30 +-------------- src/util/types.ts | 6 +-- src/visual/style.ts | 2 +- test/line-style.html | 56 ++++++++++++---------------- 8 files changed, 39 insertions(+), 113 deletions(-) diff --git a/src/chart/helper/Line.ts b/src/chart/helper/Line.ts index 6062891f1a..dbc09c0350 100644 --- a/src/chart/helper/Line.ts +++ b/src/chart/helper/Line.ts @@ -460,4 +460,4 @@ class Line extends graphic.Group { } } -export default Line; \ No newline at end of file +export default Line; diff --git a/src/component/axis/SingleAxisView.ts b/src/component/axis/SingleAxisView.ts index 582fe2eb5e..3b968ef2b2 100644 --- a/src/component/axis/SingleAxisView.ts +++ b/src/component/axis/SingleAxisView.ts @@ -146,7 +146,8 @@ const axisElementBuilders: Record extends ShadowOptionMixin { type?: ZRLineType cap?: CanvasLineCap join?: CanvasLineJoin - dashArray?: number | number[] dashOffset?: number miterLimit?: number } @@ -859,7 +857,6 @@ export interface TextCommonOption extends ShadowOptionMixin { borderColor?: string borderWidth?: number borderType?: ZRLineType - borderDashArray?: number | number[] borderDashOffset?: number borderRadius?: number | number[] padding?: number | number[] @@ -869,7 +866,6 @@ export interface TextCommonOption extends ShadowOptionMixin { textBorderColor?: string textBorderWidth?: number textBorderType?: ZRLineType - textBorderDashArray?: number | number[] textBorderDashOffset?: number textShadowBlur?: number diff --git a/src/visual/style.ts b/src/visual/style.ts index 1d52fcf605..2b3d006e15 100644 --- a/src/visual/style.ts +++ b/src/visual/style.ts @@ -213,4 +213,4 @@ export { seriesStyleTask, dataStyleTask, dataColorPaletteTask -}; \ No newline at end of file +}; diff --git a/test/line-style.html b/test/line-style.html index 6f2cc8e260..875dacb683 100644 --- a/test/line-style.html +++ b/test/line-style.html @@ -143,7 +143,7 @@ // textBorderWidth: 5, // textBorderColor: 'red', // textBorderType: 'dashed', - // textBorderDash: [2, 2] + // textBorderType: [2, 2] // }, title: { text: '这是标题~', @@ -159,8 +159,7 @@ subtextStyle: { textBorderWidth: 1, textBorderColor: 'cyan', - textBorderType: 'dashed', - textBorderDash: [15, 3, 3] + textBorderType: [15, 3, 3] } }, legend: { @@ -201,7 +200,7 @@ formatter: '{c}' }, axisPointer: { - show: true, + show: false, type: 'line', lineStyle: { type: 'dotted', @@ -220,11 +219,10 @@ textBorderColor: 'cyan', textBorderWidth: 2, textBorderType: 'dotted', - //textBorderDashArray: [5, 5], + //textBorderType: [5, 5], borderWidth: 1, borderColor: 'black', - borderType: 'dashed', - borderDashArray: [15, 3, 3], + borderType: [15, 3, 3], borderRadius: 20, backgroundColor: 'yellow', padding: 10, @@ -277,8 +275,7 @@ }, splitLine: { lineStyle: { - type: 'dashed', - dashArray: [20, 5, 5] + type: [20, 5, 5] } } }, @@ -339,7 +336,7 @@ }, series: [ { - name: 'lineStyle.dashArray is [10, 5]', + name: 'lineStyle.type is [10, 5]', type: 'line', data: [{ value: 7200, @@ -354,8 +351,7 @@ symbolSize: 10, smooth: true, lineStyle: { - type: 'dashed', - dashArray: [10, 5] + type: [10, 5] }, symbol: 'circle', //symbolRotate: 60, @@ -363,72 +359,68 @@ color: 'red', borderType: 'dashed', borderWidth: 1, - borderColor: 'cyan', - borderDashArray: [2, 2] + borderColor: 'purple' }, emphasis: { + lineStyle: { + type: 'dotted' + }, itemStyle: { - borderType: 'dashed', + borderType: [12, 3, 3], borderWidth: 2, - borderColor: '#000', - borderDashArray: [12, 3, 3] + borderColor: '#000' } } }, { - name: 'lineStyle.dashArray is [12, 3, 3]', + name: 'lineStyle.type is [12, 3, 3]', type: 'line', data: [6200, 6210, 6200, 6220, 6200, 6230], symbolSize: 10, smooth: true, lineStyle: { - type: 'dashed', - dashArray: [12, 3, 3] + type: [12, 3, 3] } }, { - name: 'lineStyle.dashArray is [20, 3, 3, 3, 3, 3, 3, 3]', + name: 'lineStyle.type is [20, 3, 3, 3, 3, 3, 3, 3]', type: 'line', data: [5200, 5210, 5200, 5220, 5200, 5230], symbolSize: 10, smooth: true, lineStyle: { - type: 'dashed', - dashArray: [20, 3, 3, 3, 3, 3, 3, 3] + type: [20, 3, 3, 3, 3, 3, 3, 3] } }, { - name: 'lineStyle.dashArray is [20, 3, 3, 3, 3, 3, 3, 3]\nlineStyle.dashOffset is 20', + name: 'lineStyle.type is [20, 3, 3, 3, 3, 3, 3, 3]\nlineStyle.dashOffset is 20', type: 'line', data: [4200, 4210, 4200, 4220, 4200, 4230], symbolSize: 10, smooth: true, lineStyle: { - type: 'dashed', - dashArray: [20, 3, 3, 3, 3, 3, 3, 3], + type: [20, 3, 3, 3, 3, 3, 3, 3], dashOffset: 20 } }, { - name: 'lineStyle.dashArray is [2, 6]\nlineStyle.type is dotted', + name: 'lineStyle.type is [2, 6]', type: 'line', data: [3250, 3260, 3250, 3270, 3250, 3280], symbolSize: 10, smooth: true, lineStyle: { - type: 'dotted', - dashArray: [2, 6] + type: [2, 6] } }, { - name: 'lineStyle.dashArray is [2, 2]\nlineStyle.type is dotted', + name: 'lineStyle.type is [2, 2]', type: 'line', data: [2200, 2210, 2200, 2220, 2200, 2230], symbolSize: 10, smooth: true, lineStyle: { - type: 'dotted', - dashArray: [2, 2] + type: [2, 2] } }, { From c05642b1d72edb8264183dd3a47c170caae78b20 Mon Sep 17 00:00:00 2001 From: plainheart Date: Mon, 24 Aug 2020 11:48:43 +0800 Subject: [PATCH 17/19] fix(axis): tweak line dash fetcher for SingleAxisView. --- src/component/axis/SingleAxisView.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/axis/SingleAxisView.ts b/src/component/axis/SingleAxisView.ts index 3b968ef2b2..034426ad35 100644 --- a/src/component/axis/SingleAxisView.ts +++ b/src/component/axis/SingleAxisView.ts @@ -147,7 +147,7 @@ const axisElementBuilders: Record Date: Mon, 24 Aug 2020 12:22:12 +0800 Subject: [PATCH 18/19] fix: merge defined line style. --- src/component/axis/SingleAxisView.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/component/axis/SingleAxisView.ts b/src/component/axis/SingleAxisView.ts index 034426ad35..b3c4575b99 100644 --- a/src/component/axis/SingleAxisView.ts +++ b/src/component/axis/SingleAxisView.ts @@ -142,14 +142,12 @@ const axisElementBuilders: Record Date: Mon, 24 Aug 2020 12:26:04 +0800 Subject: [PATCH 19/19] fix(axis): tweak line width set logic. --- src/component/axis/SingleAxisView.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/component/axis/SingleAxisView.ts b/src/component/axis/SingleAxisView.ts index b3c4575b99..6bfb8007d5 100644 --- a/src/component/axis/SingleAxisView.ts +++ b/src/component/axis/SingleAxisView.ts @@ -93,7 +93,6 @@ const axisElementBuilders: Record