diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts
index d3482529dc..5b7729ada9 100644
--- a/src/chart/bar/BarView.ts
+++ b/src/chart/bar/BarView.ts
@@ -1061,4 +1061,4 @@ function createBackgroundEl(
 
 ChartView.registerClass(BarView);
 
-export default BarView;
\ No newline at end of file
+export default BarView;
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/chart/helper/Symbol.ts b/src/chart/helper/Symbol.ts
index ba6e84e39f..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 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;
\ No newline at end of file
+export default Symbol;
diff --git a/src/chart/helper/SymbolDraw.ts b/src/chart/helper/SymbolDraw.ts
index 1fd78ae5ec..fd864e6021 100644
--- a/src/chart/helper/SymbolDraw.ts
+++ b/src/chart/helper/SymbolDraw.ts
@@ -290,4 +290,4 @@ class SymbolDraw {
 
 }
 
-export default SymbolDraw;
\ No newline at end of file
+export default SymbolDraw;
diff --git a/src/component/axis/SingleAxisView.ts b/src/component/axis/SingleAxisView.ts
index 582fe2eb5e..6bfb8007d5 100644
--- a/src/component/axis/SingleAxisView.ts
+++ b/src/component/axis/SingleAxisView.ts
@@ -93,7 +93,6 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
 
         const splitLineModel = axisModel.getModel('splitLine');
         const lineStyleModel = splitLineModel.getModel('lineStyle');
-        const lineWidth = lineStyleModel.get('width');
         let lineColors = lineStyleModel.get('color');
 
         lineColors = lineColors instanceof Array ? lineColors : [lineColors];
@@ -135,20 +134,16 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
                     x2: p2[0],
                     y2: p2[1]
                 },
-                style: {
-                    lineWidth: lineWidth
-                },
                 silent: true
             }));
         }
 
+        const lineStyle = lineStyleModel.getLineStyle(['color']);
         for (let i = 0; i < splitLines.length; ++i) {
             group.add(graphic.mergePath(splitLines[i], {
-                style: {
-                    stroke: lineColors[i % lineColors.length],
-                    lineDash: lineStyleModel.getLineDash(lineWidth),
-                    lineWidth: lineWidth
-                },
+                style: zrUtil.defaults({
+                    stroke: lineColors[i % lineColors.length]
+                }, lineStyle),
                 silent: true
             }));
         }
diff --git a/src/component/axisPointer/viewHelper.ts b/src/component/axisPointer/viewHelper.ts
index 611eac2fa8..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
-        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/src/component/title.ts b/src/component/title.ts
index 07a7a39a39..22d392c79f 100644
--- a/src/component/title.ts
+++ b/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);
\ No newline at end of file
+ComponentView.registerClass(TitleView);
diff --git a/src/label/labelStyle.ts b/src/label/labelStyle.ts
index 2a12570316..6e03db04a6 100644
--- a/src/label/labelStyle.ts
+++ b/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
     /**
@@ -393,7 +393,7 @@ const TEXT_PROPS_SELF = [
     'align', 'lineHeight', 'width', 'height', 'tag', 'verticalAlign'
 ] as const;
 const TEXT_PROPS_BOX = [
-    'padding', 'borderWidth', 'borderRadius',
+    'padding', 'borderWidth', 'borderRadius', 'borderDashOffset',
     'backgroundColor', 'borderColor',
     'shadowColor', 'shadowBlur', 'shadowOffsetX', 'shadowOffsetY'
 ] as const;
@@ -450,10 +450,19 @@ 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 != null) {
+        textStyle.lineDash = textBorderType as any;
+    }
+    const textBorderDashOffset = retrieve2(textStyleModel.getShallow('textBorderDashOffset'), globalTextStyle.textBorderDashOffset);
+    if (textBorderDashOffset != null) {
+        textStyle.lineDashOffset = textBorderDashOffset;
+    }
+
     // TODO
     if (!isNotNormal && !isAttached) {
         // Set default finally.
@@ -493,6 +502,11 @@ function setTokenTextStyle(
             }
         }
 
+        const borderType = textStyleModel.getShallow('borderType');
+        if (borderType != null) {
+            textStyle.borderDash = borderType as any;
+        }
+
         if ((textStyle.backgroundColor === 'auto' || textStyle.backgroundColor === 'inherit') && inheritColor) {
             if (__DEV__) {
                 if (textStyle.backgroundColor === 'auto') {
@@ -511,6 +525,7 @@ function setTokenTextStyle(
         }
     }
 }
+
 export function getFont(
     opt: Pick<TextCommonOption, 'fontStyle' | 'fontWeight' | 'fontSize' | 'fontFamily'>,
     ecModel: GlobalModel
diff --git a/src/model/mixin/itemStyle.ts b/src/model/mixin/itemStyle.ts
index c3c2ad2159..959ecc49ee 100644
--- a/src/model/mixin/itemStyle.ts
+++ b/src/model/mixin/itemStyle.ts
@@ -30,7 +30,12 @@ export const ITEM_STYLE_KEY_MAP = [
     ['shadowBlur'],
     ['shadowOffsetX'],
     ['shadowOffsetY'],
-    ['shadowColor']
+    ['shadowColor'],
+    ['lineDash', 'borderType'],
+    ['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>;
 
@@ -53,17 +63,9 @@ class ItemStyleMixin {
         excludes?: readonly (keyof ItemStyleOption)[],
         includes?: readonly (keyof ItemStyleOption)[]
     ): ItemStyleProps {
-        const style = getItemStyle(this, excludes, includes);
-        const lineDash = this.getBorderLineDash();
-        lineDash && (style.lineDash = lineDash);
-        return style;
+        return getItemStyle(this, excludes, includes);
     }
 
-    getBorderLineDash(this: Model): number[] {
-        const lineType = this.get('borderType');
-        return (lineType === 'solid' || lineType == null) ? null
-            : (lineType === 'dashed' ? [5, 5] : [1, 1]);
-    }
 }
 
 export {ItemStyleMixin};
diff --git a/src/model/mixin/lineStyle.ts b/src/model/mixin/lineStyle.ts
index 88512debda..9062308ff8 100644
--- a/src/model/mixin/lineStyle.ts
+++ b/src/model/mixin/lineStyle.ts
@@ -29,7 +29,12 @@ export const LINE_STYLE_KEY_MAP = [
     ['shadowBlur'],
     ['shadowOffsetX'],
     ['shadowOffsetY'],
-    ['shadowColor']
+    ['shadowColor'],
+    ['lineDash', 'type'],
+    ['lineDashOffset', 'dashOffset'],
+    ['lineCap', 'cap'],
+    ['lineJoin', 'join'],
+    ['miterLimit']
 ];
 
 const getLineStyle = makeStyleMapper(LINE_STYLE_KEY_MAP);
@@ -40,38 +45,24 @@ 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 {
-        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);
-        return style;
+    getLineStyle(
+        this: Model,
+        excludes?: readonly (keyof LineStyleOption)[]
+    ): LineStyleProps {
+        return getLineStyle(this, excludes);
     }
 
-    getLineDash(this: Model, lineWidth?: number) {
-        if (lineWidth == null) {
-            lineWidth = 1;
-        }
-        const lineType = this.get('type');
-        const dotSize = Math.max(lineWidth, 2);
-        const dashSize = lineWidth * 4;
-        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'
-            ? [dashSize, dashSize]
-            : [dotSize, dotSize];
-    }
 };
 
 export {LineStyleMixin};
diff --git a/src/util/types.ts b/src/util/types.ts
index 52b490612c..1b3707e93f 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -64,7 +64,7 @@ export type VerticalAlign = 'top' | 'middle' | 'bottom';
 // Types from zrender
 export type ColorString = string;
 export type ZRColor = ColorString | LinearGradientObject | RadialGradientObject | PatternObject;
-export type ZRLineType = 'solid' | 'dotted' | 'dashed';
+export type ZRLineType = 'solid' | 'dotted' | 'dashed' | number | number[];
 
 export type ZRFontStyle = 'normal' | 'italic' | 'oblique';
 export type ZRFontWeight = 'normal' | 'bold' | 'bolder' | 'lighter' | number;
@@ -655,6 +655,10 @@ export interface BorderOptionMixin {
     borderColor?: string
     borderWidth?: number
     borderType?: ZRLineType
+    borderCap?: CanvasLineCap
+    borderJoin?: CanvasLineJoin
+    borderDashOffset?: number
+    borderMiterLimit?: number
 }
 
 export type AnimationDelayCallbackParam = {
@@ -777,6 +781,10 @@ export interface LineStyleOption<Clr = ZRColor> extends ShadowOptionMixin {
     color?: Clr
     opacity?: number
     type?: ZRLineType
+    cap?: CanvasLineCap
+    join?: CanvasLineJoin
+    dashOffset?: number
+    miterLimit?: number
 }
 
 /**
@@ -848,6 +856,8 @@ export interface TextCommonOption extends ShadowOptionMixin {
     }
     borderColor?: string
     borderWidth?: number
+    borderType?: ZRLineType
+    borderDashOffset?: number
     borderRadius?: number | number[]
     padding?: number | number[]
 
@@ -855,6 +865,8 @@ export interface TextCommonOption extends ShadowOptionMixin {
     height?: number
     textBorderColor?: string
     textBorderWidth?: number
+    textBorderType?: ZRLineType
+    textBorderDashOffset?: number
 
     textShadowBlur?: number
     textShadowColor?: string
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 92c6a574e2..875dacb683 100644
--- a/test/line-style.html
+++ b/test/line-style.html
@@ -31,10 +31,9 @@
 
 <body>
     <div id="main0"></div>
-    <div></div>
+    <div id="main1"></div>
     <script>
-        var chart;
-        var myChart;
+        var chart1;
 
         require([
             'echarts'
@@ -121,7 +120,7 @@
                 ]
             };
 
-            chart = myChart = testHelper.create(echarts, 'main0', {
+            chart1 = testHelper.create(echarts, 'main0', {
                 title: [
                     'Test itemStyle.color and lineStyle.color',
                     'The colors should follow what the legend described.'
@@ -131,6 +130,380 @@
         });
 
     </script>
+
+    <script>
+        var chart2;
+
+        require([
+            'echarts'
+        ], function (echarts) {
+            var option = {
+                // textStyle: {
+                //     color: 'red',
+                //     textBorderWidth: 5,
+                //     textBorderColor: 'red',
+                //     textBorderType: 'dashed',
+                //     textBorderType: [2, 2]
+                // },
+                title: {
+                    text: '这是标题~',
+                    borderColor: 'red',
+                    borderWidth: 1,
+                    borderType: 'dashed',
+                    textStyle: {
+                        textBorderWidth: 1,
+                        textBorderColor: 'red',
+                        textBorderType: 'dotted'
+                    },
+                    subtext: '这是副标题',
+                    subtextStyle: {
+                        textBorderWidth: 1,
+                        textBorderColor: 'cyan',
+                        textBorderType: [15, 3, 3]
+                    }
+                },
+                legend: {
+                    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'
+                    }
+                },
+                tooltip: {
+                    formatter: '{c}'
+                },
+                axisPointer: {
+                    show: false,
+                    type: 'line',
+                    lineStyle: {
+                        type: 'dotted',
+                        color: 'cyan',
+                        width: 2
+                    },
+                    label: {
+                        //show: false,
+                        fontWeight: 'bold',
+                        precision: 2,
+                        fontSize: '1rem',
+                        textShadowBlur: 10,
+                        //textShadowOffsetX: 2,
+                        //textShadowOffsetY: 2,
+                        textShadowColor: 'red',
+                        textBorderColor: 'cyan',
+                        textBorderWidth: 2,
+                        textBorderType: 'dotted',
+                        //textBorderType: [5, 5],
+                        borderWidth: 1,
+                        borderColor: 'black',
+                        borderType: [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',
+                    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: [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: 180
+                },
+                series: [
+                    {
+                        name: 'lineStyle.type is [10, 5]',
+                        type: 'line',
+                        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: [10, 5]
+                        },
+                        symbol: 'circle',
+                        //symbolRotate: 60,
+                        itemStyle: {
+                            color: 'red',
+                            borderType: 'dashed',
+                            borderWidth: 1,
+                            borderColor: 'purple'
+                        },
+                        emphasis: {
+                            lineStyle: {
+                                type: 'dotted'
+                            },
+                            itemStyle: {
+                                borderType: [12, 3, 3],
+                                borderWidth: 2,
+                                borderColor: '#000'
+                            }
+                        }
+                    },
+                    {
+                        name: 'lineStyle.type is [12, 3, 3]',
+                        type: 'line',
+                        data: [6200, 6210, 6200, 6220, 6200, 6230],
+                        symbolSize: 10,
+                        smooth: true,
+                        lineStyle: {
+                            type: [12, 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: [20, 3, 3, 3, 3, 3, 3, 3]
+                        }
+                    },
+                    {
+                        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: [20, 3, 3, 3, 3, 3, 3, 3],
+                            dashOffset: 20
+                        }
+                    },
+                    {
+                        name: 'lineStyle.type is [2, 6]',
+                        type: 'line',
+                        data: [3250, 3260, 3250, 3270, 3250, 3280],
+                        symbolSize: 10,
+                        smooth: true,
+                        lineStyle: {
+                            type: [2, 6]
+                        }
+                    },
+                    {
+                        name: 'lineStyle.type is [2, 2]',
+                        type: 'line',
+                        data: [2200, 2210, 2200, 2220, 2200, 2230],
+                        symbolSize: 10,
+                        smooth: true,
+                        lineStyle: {
+                            type: [2, 2]
+                        }
+                    },
+                    {
+                        name: 'lineStyle.cap is butt',
+                        type: 'line',
+                        data: [1200, 1210, 1200, 1240, 1210, 1230],
+                        symbolSize: 4,
+                        smooth: true,
+                        lineStyle: {
+                            width: 8,
+                            type: 'solid',
+                            cap: 'butt'
+                        },
+                        smooth: false
+                    },
+                    {
+                        name: 'lineStyle.cap is square',
+                        type: 'line',
+                        data: [200, 230, 300, 340, 310, 330],
+                        symbolSize: 4,
+                        smooth: true,
+                        lineStyle: {
+                            width: 8,
+                            type: 'solid',
+                            cap: 'square'
+                        },
+                        smooth: false
+                    },
+                    {
+                        name: 'lineStyle.cap is round',
+                        type: 'line',
+                        data: [-1000, -970, -900, -860, -890, -870],
+                        symbolSize: 4,
+                        smooth: true,
+                        lineStyle: {
+                            width: 8,
+                            type: 'solid',
+                            cap: 'round'
+                        },
+                        smooth: false
+                    },
+                    {
+                        name: 'lineStyle.join is bevel',
+                        type: 'line',
+                        data: [-1800, -3800, -1800, -3800, -1800, -3800],
+                        symbolSize: 5,
+                        smooth: true,
+                        lineStyle: {
+                            width: 10,
+                            type: 'solid',
+                            join: 'bevel'
+                        },
+                        smooth: false
+                    },
+                    {
+                        name: 'lineStyle.join is round',
+                        type: 'line',
+                        data: [-2800, -4800, -2800, -4800, -2800, -4800],
+                        symbolSize: 5,
+                        smooth: true,
+                        lineStyle: {
+                            width: 10,
+                            type: 'solid',
+                            join: 'round'
+                        },
+                        smooth: false
+                    }
+                ]
+            };
+
+            chart2 = testHelper.create(echarts, 'main1', {
+                title: [
+                    'Test lineStyle.cap, lineStyle.join, lineStyle.dashArray and lineStyle.dashOffset'
+                ],
+                option: option
+            });
+
+            // setTimeout(function() {
+            //     option.series[0].symbol = 'emptyCircle';
+            //     chart2.setOption(option);
+            // }, 2000);
+        });
+    </script>
 </body>
 
 </html>