From 48472ee85d66d7a4986812a610fab9151508d456 Mon Sep 17 00:00:00 2001
From: jiawulin001 <jiawulin@vip.qq.com>
Date: Tue, 22 Mar 2022 15:32:35 +0800
Subject: [PATCH 1/2] feat: allow areaStyle.origin to take number as input

---
 src/chart/line/LineSeries.ts | 2 +-
 src/chart/line/helper.ts     | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)
diff --git a/src/chart/line/LineSeries.ts b/src/chart/line/LineSeries.ts
index 7a3774e666..d46640bbc3 100644
--- a/src/chart/line/LineSeries.ts
+++ b/src/chart/line/LineSeries.ts
@@ -101,7 +101,7 @@ export interface LineSeriesOption extends SeriesOption<LineStateOption<CallbackD
     lineStyle?: LineStyleOption
 
     areaStyle?: AreaStyleOption & {
-        origin?: 'auto' | 'start' | 'end'
+        origin?: 'auto' | 'start' | 'end' | number
     }
 
     step?: false | 'start' | 'end' | 'middle'
diff --git a/src/chart/line/helper.ts b/src/chart/line/helper.ts
index e58d2e70e0..fa4da433cb 100644
--- a/src/chart/line/helper.ts
+++ b/src/chart/line/helper.ts
@@ -18,7 +18,7 @@
 */
 
 import {isDimensionStacked} from '../../data/helper/dataStackHelper';
-import {map} from 'zrender/src/core/util';
+import {isNumber, map} from 'zrender/src/core/util';
 import type Polar from '../../coord/polar/Polar';
 import type Cartesian2D from '../../coord/cartesian/Cartesian2D';
 import SeriesData from '../../data/SeriesData';
@@ -90,6 +90,11 @@ function getValueStart(valueAxis: Axis, valueOrigin: LineSeriesOption['areaStyle
     else if (valueOrigin === 'end') {
         valueStart = extent[1];
     }
+    // If origin is specified as a number, use it as
+    // valueStart directly
+    else if (isNumber(valueOrigin) && !isNaN(valueOrigin)){
+        valueStart = valueOrigin;
+    }
     // auto
     else {
         // Both positive

From 0e5e896eff3516e72a020f24ab215b803bd9c3a9 Mon Sep 17 00:00:00 2001
From: jiawulin001 <jiawulin@vip.qq.com>
Date: Wed, 23 Mar 2022 14:45:06 +0800
Subject: [PATCH 2/2] An example of origin Updated

---
 test/area-origin.html | 180 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 180 insertions(+)
 create mode 100644 test/area-origin.html

diff --git a/test/area-origin.html b/test/area-origin.html
new file mode 100644
index 0000000000..b70b1689fc
--- /dev/null
+++ b/test/area-origin.html
@@ -0,0 +1,180 @@
+<!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">
+        <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>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="stylesheet" href="lib/reset.css">
+    </head>
+    <body>
+        <style>
+            h1 {
+                line-height: 60px;
+                height: 60px;
+                background: #146402;
+                text-align: center;
+                font-weight: bold;
+                color: #eee;
+                font-size: 14px;
+            }
+        </style>
+
+        <div id="main0"></div>
+        <div id="main1"></div>
+        <div id="main2"></div>
+        <div id="main3"></div>
+
+        <script>
+            var echarts;
+            var chart;
+
+            require(['echarts'], function (ec) {
+                echarts = ec;
+
+                var base = +new Date(1968, 9, 3);
+                var oneDay = 24 * 3600 * 1000;
+                var date = [];
+
+                var data = [Math.random() * 300];
+
+                for (var i = 1; i < 20000; i++) {
+                    var now = new Date(base += oneDay);
+                    date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
+                    data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
+                }
+
+                let option = {
+                    tooltip: {
+                        trigger: 'axis',
+                        position: function (pt) {
+                            return [pt[0], '10%'];
+                        }
+                    },
+                    legend: {
+                        data: ['data']
+                    },
+                    toolbox: {
+                        feature: {
+                            dataZoom: {
+                                yAxisIndex: 'none'
+                            },
+                            restore: {},
+                            saveAsImage: {}
+                        }
+                    },
+                    grid: {
+                        containLabel: true
+                    },
+                    xAxis: {
+                        type: 'category',
+                        boundaryGap: false,
+                        data: date
+                    },
+                    yAxis: {
+                        type: 'value',
+                        boundaryGap: [0, '100%']
+                    },
+                    dataZoom: [{
+                        type: 'inside',
+                        start: 0,
+                        end: 10
+                    }, {
+                        start: 0,
+                        end: 10,
+                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+                        handleSize: '80%',
+                        handleStyle: {
+                            color: '#fff',
+                            shadowBlur: 3,
+                            shadowColor: 'rgba(0, 0, 0, 0.6)',
+                            shadowOffsetX: 2,
+                            shadowOffsetY: 2
+                        }
+                    }],
+                    series: [
+                        {
+                            name:'data',
+                            type:'line',
+                            smooth:true,
+                            symbol: 'none',
+                            sampling: 'average',
+                            itemStyle: {
+                                normal: {
+                                    color: 'rgb(255, 70, 131)'
+                                }
+                            },
+                            areaStyle: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: 'rgb(255, 158, 68)'
+                                }, {
+                                    offset: 1,
+                                    color: 'rgb(255, 70, 131)'
+                                }]),
+                                origin:200
+                            },
+                            data: data
+                        }
+                    ]
+                };
+
+                chart = echarts.init(document.getElementById('main0'));
+                option.series[0].areaStyle.origin = 'auto';
+                testHelper.create(echarts, 'main0', {
+                    title: 'areaStyle.origin = "auto": Base line set at axis',
+                    option: option,
+                    height: 600
+                });
+
+                chart = echarts.init(document.getElementById('main1'));
+                option.series[0].areaStyle.origin = 'start';
+                testHelper.create(echarts, 'main1', {
+                    title: 'areaStyle.origin = "start": Base line set at the bottom',
+                    option: option,
+                    height: 600
+                });
+
+                chart = echarts.init(document.getElementById('main2'));
+                option.series[0].areaStyle.origin = 'end';
+                testHelper.create(echarts, 'main2', {
+                    title: 'areaStyle.origin = "end": Base line set at the top',
+                    option: option,
+                    height: 600
+                });
+
+                chart = echarts.init(document.getElementById('main3'));
+                option.series[0].areaStyle.origin = 200;
+                testHelper.create(echarts, 'main3', {
+                    title: 'areaStyle.origin = 200: Base line set at 200',
+                    option: option,
+                    height: 600
+                });
+            });
+
+        </script>
+    </body>
+</html>
\ No newline at end of file
