diff --git a/src/chart/line/LineSeries.ts b/src/chart/line/LineSeries.ts
index 9faf5c5175..a0804099e6 100644
--- a/src/chart/line/LineSeries.ts
+++ b/src/chart/line/LineSeries.ts
@@ -69,6 +69,10 @@ export interface LineEndLabelOption extends SeriesLabelOption {
     valueAnimation?: boolean
 }
 
+export interface LinePiece {
+    startDataIndices: number[]
+    lineStyle: LineStyleOption[]
+}
 
 export interface LineSeriesOption extends SeriesOption<LineStateOption<CallbackDataParams>, LineStateOptionMixin & {
     emphasis?: {
@@ -99,6 +103,7 @@ export interface LineSeriesOption extends SeriesOption<LineStateOption<CallbackD
     endLabel?: LineEndLabelOption
 
     lineStyle?: LineStyleOption
+    linePieces?: LinePiece[]
 
     areaStyle?: AreaStyleOption & {
         origin?: 'auto' | 'start' | 'end' | number
diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts
index be4ff3571e..d9ae451734 100644
--- a/src/chart/line/LineView.ts
+++ b/src/chart/line/LineView.ts
@@ -29,7 +29,7 @@ import { ECPolyline, ECPolygon } from './poly';
 import ChartView from '../../view/Chart';
 import { prepareDataCoordInfo, getStackedOnPoint } from './helper';
 import { createGridClipPath, createPolarClipPath } from '../helper/createClipPathFromCoordSys';
-import LineSeriesModel, { LineSeriesOption } from './LineSeries';
+import LineSeriesModel, { LineSeriesOption, LinePiece } from './LineSeries';
 import type GlobalModel from '../../model/Global';
 import type ExtensionAPI from '../../core/ExtensionAPI';
 // TODO
@@ -605,6 +605,7 @@ class LineView extends ChartView {
 
     _polyline: ECPolyline;
     _polygon: ECPolygon;
+    _linePieces: graphic.CompoundPath[];
 
     _stackedOnPoints: ArrayLike<number>;
     _points: ArrayLike<number>;
@@ -624,6 +625,7 @@ class LineView extends ChartView {
 
         this._symbolDraw = symbolDraw;
         this._lineGroup = lineGroup;
+        this._linePieces = [];
 
         this._changePolyState = zrUtil.bind(this._changePolyState, this);
     }
@@ -644,6 +646,9 @@ class LineView extends ChartView {
         let polyline = this._polyline;
         let polygon = this._polygon;
 
+        const linePieces = seriesModel.get('linePieces');
+        const useCompoundPaths = linePieces && linePieces.length;
+
         const lineGroup = this._lineGroup;
 
         const hasAnimation = !ecModel.ssr && seriesModel.get('animation');
@@ -727,15 +732,29 @@ class LineView extends ChartView {
                 }
             }
 
-            polyline = this._newPolyline(points);
-            if (isAreaChart) {
-                polygon = this._newPolygon(
-                    points, stackedOnPoints
+            if (useCompoundPaths) {
+                this._newCompoundLines(
+                    seriesModel,
+                    linePieces,
+                    coordSys,
+                    api,
+                    hasAnimation,
+                    points,
+                    valueOrigin
                 );
-            }// If areaStyle is removed
-            else if (polygon) {
-                lineGroup.remove(polygon);
-                polygon = this._polygon = null;
+                return;
+            }
+            else {
+                polyline = this._newPolyline(points);
+                if (isAreaChart) {
+                    polygon = this._newPolygon(
+                        points, stackedOnPoints
+                    );
+                }// If areaStyle is removed
+                else if (polygon) {
+                    lineGroup.remove(polygon);
+                    polygon = this._polygon = null;
+                }
             }
 
             // NOTE: Must update _endLabel before setClipPath.
@@ -1062,6 +1081,67 @@ class LineView extends ChartView {
         return polygon;
     }
 
+    _newCompoundLines(
+        seriesModel: LineSeriesModel,
+        linePieces: LinePiece[],
+        coordSys: Cartesian2D | Polar,
+        api: ExtensionAPI,
+        hasAnimation: boolean,
+        points: ArrayLike<number>,
+        valueOrigin: LineSeriesOption['areaStyle']['origin']
+    ) {
+        this._linePieces = [];
+        const dataCount = seriesModel.getData().count();
+        // The segments that are not in pieces takes the last piece index
+        const NOT_IN_PIECES_INDEX = linePieces.length;
+        const paths: number[][][] = []
+        for (let i = 0; i < dataCount - 1; ++i) {
+            let pieceId = NOT_IN_PIECES_INDEX;
+            for (let j = 0; j < linePieces.length; ++j) {
+                if (linePieces[j].startDataIndices.indexOf(i) >= 0) {
+                    pieceId = j;
+                    break;
+                }
+            }
+            if (paths[pieceId] == null) {
+                paths[pieceId] = [];
+            }
+            paths[pieceId].push([
+                points[i * 2],
+                points[i * 2 + 1],
+                points[i * 2 + 2],
+                points[i * 2 + 3]
+            ])
+        }
+
+        const excludeLast = true; // TODO: only for debug
+        for (let i = 0; i < paths.length - (excludeLast ? 1 : 0); ++i) {
+            if (paths[i]) {
+                const lineStyle = i === NOT_IN_PIECES_INDEX
+                    ? seriesModel.getLineStyle()
+                    : new Model(linePieces[i].lineStyle).getLineStyle();
+                // console.log(lineStyle)
+                const path = new graphic.CompoundPath({
+                    shape: {
+                        paths: zrUtil.map(paths[i], p => new graphic.Line({
+                            shape: {
+                                x1: p[0],
+                                y1: p[1],
+                                x2: p[2],
+                                y2: p[3]
+                            }
+                        }))
+                    },
+                    style: lineStyle, // TODO: only for debug
+                    segmentIgnoreThreshold: 2,
+                    z2: 10
+                });
+                this._linePieces.push(path);
+                this._lineGroup.add(path);
+            }
+        }
+    }
+
     _initSymbolLabelAnimation(
         data: SeriesData,
         coordSys: Polar | Cartesian2D,
diff --git a/test/line-pieces.html b/test/line-pieces.html
new file mode 100644
index 0000000000..a4e314e2a5
--- /dev/null
+++ b/test/line-pieces.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="lib/simpleRequire.js"></script>
+        <script src="lib/config.js"></script>
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/facePrint.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <!-- <script src="ut/lib/canteen.js"></script> -->
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+        </style>
+
+
+
+        <div id="main0"></div>
+
+
+
+
+
+
+        <script>
+        require([
+            'echarts',
+            // 'map/js/china',
+            // './data/nutrients.json'
+        ], function (echarts) {
+            var option;
+
+            option = {
+                xAxis: {},
+                yAxis: {},
+                series: {
+                    type: 'line',
+                    // data: [[10, 23], [20, 44], [60, 16], [30, 50], [40, 10]],
+                    data: [[0, 10], [10, 23], [20, 44], [30, 16], [40, 50], [50, 10]],
+                    linePieces: [{
+                        startDataIndices: [1, 3],
+                        lineStyle: {
+                            color: 'red',
+                            width: 4
+                        }
+                    }, {
+                        startDataIndices: [4],
+                        lineStyle: {
+                            color: 'blue',
+                            type: 'dash'
+                        }
+                    }]
+                }
+            };
+
+            var chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'Test Case Description of main0',
+                    '(Muliple lines and **emphasis** are supported in description)'
+                ],
+                option: option
+                // height: 300,
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // recordCanvas: true,
+            });
+        });
+        </script>
+
+
+    </body>
+</html>