[5.0] [FEATURE] more configurable styles for lineStyle & borderStyle.

src/chart/bar/BarView.ts

@@ -1054,4 +1054,4 @@ function createBackgroundEl(
 
 ChartView.registerClass(BarView);
 
-export default BarView;
+export default BarView;

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 emphasisItemStyle;
         let blurItemStyle;
         let selectItemStyle;
@@ -232,8 +231,8 @@ class Symbol extends graphic.Group {
         if (!seriesScope || data.hasItemOption) {
             const itemModel = (seriesScope && seriesScope.itemModel)
                 ? seriesScope.itemModel : data.getItemModel<SymbolDrawItemModelOption>(idx);
-
             const emphasisModel = itemModel.getModel('emphasis');
+
             emphasisItemStyle = emphasisModel.getModel('itemStyle').getItemStyle();
             selectItemStyle = itemModel.getModel(['select', 'itemStyle']).getItemStyle();
             blurItemStyle = itemModel.getModel(['blur', 'itemStyle']).getItemStyle();
@@ -383,4 +382,4 @@ function driftSymbol(this: ECSymbol, dx: number, dy: number) {
 }
 
 
-export default Symbol;
+export default Symbol;

src/chart/helper/SymbolDraw.ts

@@ -290,4 +290,4 @@ class SymbolDraw {
 
 }
 
-export default SymbolDraw;
+export default SymbolDraw;

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
-        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
     };

src/component/title.ts

@@ -189,7 +189,7 @@ class TitleView extends ComponentView {
         }
         if (sublink) {
             subTextEl.on('click', function () {
-                windowOpen(link, '_' + titleModel.get('subtarget'));
+                windowOpen(sublink, '_' + titleModel.get('subtarget'));
             });
         }
 
@@ -279,4 +279,4 @@ class TitleView extends ComponentView {
     }
 }
 
-ComponentView.registerClass(TitleView);
+ComponentView.registerClass(TitleView);

src/label/labelStyle.ts

@@ -20,7 +20,7 @@ import { deprecateReplaceLog } from '../util/log';
 
 type TextCommonParams = {
     /**
-     * Whether diable drawing box of block (outer most).
+     * Whether disable drawing box of block (outer most).
      */
     disableBox?: boolean
     /**
@@ -450,10 +450,27 @@ 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') {
+        textStyle.lineDash = [];
+    }
+    else {
+        let textBorderDashArray = retrieve2(textStyleModel.getShallow('textBorderDashArray'), globalTextStyle.textBorderDashArray);
+        // compatible with single number
+        if (textBorderDashArray != null && !isNaN(textBorderDashArray as number)) {
+            textBorderDashArray = [+textBorderDashArray];
+        }
+        textStyle.lineDash = textBorderDashArray as number[] || (textBorderType === 'dashed' ? [5, 5] : [1, 1]);
+    }
+    const textBorderDashOffset = retrieve2(textStyleModel.getShallow('textBorderDashOffset'), globalTextStyle.textBorderDashOffset);
+    if (textBorderDashOffset != null) {
+        textStyle.lineDashOffset = textBorderDashOffset;
+    }
+
     // TODO
     if (!isNotNormal && !isAttached) {
         // Set default finally.
@@ -493,6 +510,23 @@ function setTokenTextStyle(
             }
         }
 
+        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;
+        }
+
         if ((textStyle.backgroundColor === 'auto' || textStyle.backgroundColor === 'inherit') && inheritColor) {
             if (__DEV__) {
                 if (textStyle.backgroundColor === 'auto') {
@@ -511,6 +545,7 @@ function setTokenTextStyle(
         }
     }
 }
+
 export function getFont(
     opt: Pick<TextCommonOption, 'fontStyle' | 'fontWeight' | 'fontSize' | 'fontFamily'>,
     ecModel: GlobalModel

src/model/mixin/itemStyle.ts

@@ -30,7 +30,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 +47,12 @@ type ItemStyleKeys = 'fill'
     | 'shadowBlur'
     | 'shadowOffsetX'
     | 'shadowOffsetY'
-    | 'shadowColor';
+    | 'shadowColor'
+    | 'lineDash'
+    | 'lineDashOffset'
+    | 'lineCap'
+    | 'lineJoin'
+    | 'miterLimit';
 
 export type ItemStyleProps = Pick<PathStyleProps, ItemStyleKeys>;
 
@@ -54,15 +64,24 @@ 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): number[] {
         const lineType = this.get('borderType');
-        return (lineType === 'solid' || lineType == null) ? null
-            : (lineType === 'dashed' ? [5, 5] : [1, 1]);
+        if (lineType == null || lineType === 'solid') {
+            return [];
+        }
+
+        lineWidth = lineWidth || 0;
+
+        let dashArray = this.get('borderDashArray');
+        // compatible with single number
+        if (dashArray != null && !isNaN(dashArray)) {
+            dashArray = [+dashArray];
+        }
+        return dashArray || (lineType === 'dashed' ? [5, 5] : [1, 1]);
     }
 }
 

src/model/mixin/lineStyle.ts

@@ -29,7 +29,12 @@ export const LINE_STYLE_KEY_MAP = [
     ['shadowBlur'],
     ['shadowOffsetX'],
     ['shadowOffsetY'],
-    ['shadowColor']
+    ['shadowColor'],
+    ['lineDash', 'dashArray'],
+    ['lineDashOffset', 'dashOffset'],
+    ['lineCap', 'cap'],
+    ['lineJoin', 'join'],
+    ['miterLimit']
 ];
 
 const getLineStyle = makeStyleMapper(LINE_STYLE_KEY_MAP);
@@ -40,37 +45,49 @@ type LineStyleKeys = 'lineWidth'
     | 'shadowBlur'
     | 'shadowOffsetX'
     | 'shadowOffsetY'
-    | 'shadowColor';
+    | 'shadowColor'
+    | 'lineDash'
+    | 'lineDashOffset'
+    | 'lineCap'
+    | 'lineJoin'
+    | 'miterLimit';
 
 type LineStyleProps = Pick<PathStyleProps, LineStyleKeys>;
 
 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.
-        (style as any).lineDash = this.getLineDash((style as any).lineWidth);
+        style.lineDash = this.getLineDash(style.lineWidth);
         return style;
     }
 
-    getLineDash(this: Model, lineWidth?: number) {
-        if (lineWidth == null) {
-            lineWidth = 1;
-        }
+    getLineDash(this: Model, lineWidth?: number): false | number[] {
         const lineType = this.get('type');
-        const dotSize = Math.max(lineWidth, 2);
-        const dashSize = lineWidth * 4;
-        return (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
             // `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'
-            ? [dashSize, dashSize]
-            : [dotSize, dotSize];
+            return false;
+        }
+        if (lineWidth == null) {
+            lineWidth = 1;
+        }
+        let dashArray = this.get('dashArray');
+        // compatible with single number
+        if (dashArray != null && !isNaN(dashArray)) {
+            dashArray = [+dashArray];
+        }
+        return lineType === 'dashed'
+            ? dashArray || [lineWidth * 4]
+            : dashArray || [Math.max(lineWidth, 2)];
     }
 };
 

src/util/types.ts

@@ -655,6 +655,11 @@ export interface BorderOptionMixin {
     borderColor?: string
     borderWidth?: number
     borderType?: ZRLineType
+    borderCap?: CanvasLineCap
+    borderJoin?: CanvasLineJoin
+    borderDashArray?: number | number[]
+    borderDashOffset?: number
+    borderMiterLimit?: number
 }
 
 export type AnimationDelayCallbackParam = {
@@ -777,6 +782,11 @@ export interface LineStyleOption<Clr = ZRColor> extends ShadowOptionMixin {
     color?: Clr
     opacity?: number
     type?: ZRLineType
+    cap?: CanvasLineCap
+    join?: CanvasLineJoin
+    dashArray?: number | number[]
+    dashOffset?: number
+    miterLimit?: number
 }
 
 /**
@@ -848,13 +858,19 @@ export interface TextCommonOption extends ShadowOptionMixin {
     }
     borderColor?: string
     borderWidth?: number
+    borderType?: ZRLineType
+    borderDashArray?: number | number[]
+    borderDashOffset?: number
     borderRadius?: number | number[]
     padding?: number | number[]
 
     width?: number | string// Percent
     height?: number
     textBorderColor?: string
     textBorderWidth?: number
+    textBorderType?: ZRLineType
+    textBorderDashArray?: number | number[]
+    textBorderDashOffset?: number
 
     textShadowBlur?: number
     textShadowColor?: string