From d86c0e26a26435fc7fd84c7dfbfd107be70afe24 Mon Sep 17 00:00:00 2001
From: jiawulin001 <jiawulin001@163.com>
Date: Wed, 15 Jun 2022 10:19:52 +0800
Subject: [PATCH 1/3] fix: fix the error caused by markArea x/y

---
 src/component/marker/markerHelper.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/component/marker/markerHelper.ts b/src/component/marker/markerHelper.ts
index 480a0345e5..d8838d176c 100644
--- a/src/component/marker/markerHelper.ts
+++ b/src/component/marker/markerHelper.ts
@@ -147,6 +147,9 @@ export function dataTransform(
             item.coord = coord;
         }
     }
+    if (item.coord == null) {
+        item.coord = [];
+    }
     return item;
 }
 

From 32382f18932876f1a60628255788078ed4e6ffc2 Mon Sep 17 00:00:00 2001
From: plainheart <yhen@all-my-life.cn>
Date: Thu, 10 Nov 2022 16:17:41 +0800
Subject: [PATCH 2/3] fix(marker): fix magic marker statistic type is not
 respected in `coord` array.

---
 src/component/marker/MarkAreaView.ts | 11 +++++++++--
 src/component/marker/markerHelper.ts | 28 +++++++++++++++++-----------
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/component/marker/MarkAreaView.ts b/src/component/marker/MarkAreaView.ts
index dcaa4b1c78..4623709cf9 100644
--- a/src/component/marker/MarkAreaView.ts
+++ b/src/component/marker/MarkAreaView.ts
@@ -66,8 +66,15 @@ const markAreaTransform = function (
     maModel: MarkAreaModel,
     item: MarkArea2DDataItemOption
 ): MarkAreaMergedItemOption {
-    const lt = markerHelper.dataTransform(seriesModel, item[0]);
-    const rb = markerHelper.dataTransform(seriesModel, item[1]);
+    // item may be null
+    const item0 = item[0];
+    const item1 = item[1];
+    if (!item0 || !item1) {
+        return;
+    }
+
+    const lt = markerHelper.dataTransform(seriesModel, item0);
+    const rb = markerHelper.dataTransform(seriesModel, item1);
 
     // FIXME make sure lt is less than rb
     const ltCoord = lt.coord;
diff --git a/src/component/marker/markerHelper.ts b/src/component/marker/markerHelper.ts
index d8838d176c..e0f7c338c5 100644
--- a/src/component/marker/markerHelper.ts
+++ b/src/component/marker/markerHelper.ts
@@ -99,16 +99,20 @@ export function dataTransform(
     seriesModel: SeriesModel,
     item: MarkerPositionOption
 ) {
+    if (!item) {
+        return;
+    }
+
     const data = seriesModel.getData();
     const coordSys = seriesModel.coordinateSystem;
+    const dims = coordSys.dimensions;
 
     // 1. If not specify the position with pixel directly
     // 2. If `coord` is not a data array. Which uses `xAxis`,
     // `yAxis` to specify the coord on each dimension
 
     // parseFloat first because item.x and item.y can be percent string like '20%'
-    if (item && !hasXAndY(item) && !isArray(item.coord) && coordSys) {
-        const dims = coordSys.dimensions;
+    if (!hasXAndY(item) && !isArray(item.coord) && coordSys) {
         const axisInfo = getAxisInfo(item, data, coordSys, seriesModel);
 
         // Clone the option
@@ -130,26 +134,28 @@ export function dataTransform(
             // Force to use the value of calculated value.
             // let item use the value without stack.
             item.value = coordInfo[1];
-
         }
         else {
             // FIXME Only has one of xAxis and yAxis.
-            const coord = [
+            item.coord = [
                 item.xAxis != null ? item.xAxis : item.radiusAxis,
                 item.yAxis != null ? item.yAxis : item.angleAxis
             ];
-            // Each coord support max, min, average
-            for (let i = 0; i < 2; i++) {
-                if (markerTypeCalculator[coord[i] as MarkerStatisticType]) {
-                    coord[i] = numCalculate(data, data.mapDimension(dims[i]), coord[i] as MarkerStatisticType);
-                }
-            }
-            item.coord = coord;
         }
     }
+    // x y is provided
     if (item.coord == null) {
         item.coord = [];
     }
+    else {
+        // Each coord support max, min, average
+        const coord = item.coord;
+        for (let i = 0; i < 2; i++) {
+            if (markerTypeCalculator[coord[i] as MarkerStatisticType]) {
+                coord[i] = numCalculate(data, data.mapDimension(dims[i]), coord[i] as MarkerStatisticType);
+            }
+        }
+    }
     return item;
 }
 

From f0f2f7dcaf61d039d5e96f7cabd99e9ceb223a3f Mon Sep 17 00:00:00 2001
From: plainheart <yhen@all-my-life.cn>
Date: Thu, 10 Nov 2022 16:31:35 +0800
Subject: [PATCH 3/3] test(marker): add test case for `markArea`

---
 test/markArea.html | 157 +++++++++++++++++++++++++++++++++++++++------
 1 file changed, 139 insertions(+), 18 deletions(-)

diff --git a/test/markArea.html b/test/markArea.html
index 8ec2352e10..d19744c8e7 100644
--- a/test/markArea.html
+++ b/test/markArea.html
@@ -23,24 +23,19 @@
         <meta charset="utf-8">
         <script src="lib/simpleRequire.js"></script>
         <script src="lib/config.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <link rel="stylesheet" href="lib/reset.css" />
     </head>
     <body>
-        <style>
-            html, body, #main {
-                width: 100%;
-                height: 100%;
-            }
-        </style>
-        <div id="main0" style="height:500px"></div>
-        <div id="main1" style="height:500px"></div>
+        <div id="main0"></div>
+        <div id="main1"></div>
+        <div id="main2"></div>
         <script>
 
             require([
                 'echarts'
             ], function (echarts) {
 
-                var chart = echarts.init(document.getElementById('main0'));
-
                 var xAxisData = [];
                 var data1 = [];
                 var data2 = [];
@@ -51,7 +46,7 @@
                     data2.push(+Math.random().toFixed(2));
                 }
 
-                chart.setOption({
+                option = {
                     legend: {
                         data: ['line', 'line2']
                     },
@@ -135,8 +130,11 @@
                     grid: {
                         right: 300
                     }
-                });
+                };
 
+                var chart = testHelper.create(echarts, 'main0', {
+                    option: option
+                });
             });
 
         </script>
@@ -146,7 +144,7 @@
                 'echarts'
             ], function (echarts) {
 
-                let option = {
+                var option = {
                     title: {
                         text: 'Distribution of Electricity',
                         subtext: 'Fake Data'
@@ -220,13 +218,136 @@
                     ]
                 };
 
-                var chartDom = document.getElementById('main1');
-                var myChart = echarts.init(chartDom);
-
-                option && myChart.setOption(option);
+                var chart = testHelper.create(echarts, 'main1', {
+                    option: option
+                });
 
             });
 
         </script>
+
+        <script>
+            require([
+                'echarts',
+            ], function (echarts) {
+                var option = {
+                    xAxis: {
+                        type: 'category',
+                        data: ['a', 'b', 'c', 'd', 'e', 'f', 'g']
+                    },
+                    yAxis: {
+                        type: 'value'
+                    },
+                    series: [{
+                        type: 'bar',
+                        data: [10, 52, 200, 334, 390, 330, 220],
+                        itemStyle: {
+                            opacity: .1
+                        },
+                        markArea: {
+                            data: [
+                                [
+                                    {
+                                        name: '所有数据范围区间',
+                                        coord: ['min', 'min'],
+                                        itemStyle: {
+                                            color: 'lightgray',
+                                            borderWidth: 2,
+                                            borderColor: 'gray'
+                                        },
+                                        label: {
+                                            position: 'insideLeft',
+                                        }
+                                    },
+                                    {
+                                        coord: ['max', 'max']
+                                    }
+                                ],
+                                [
+                                    {
+                                        name: '[average, min] to [max, median]',
+                                        coord: ['average', 'min'],
+                                        itemStyle: {
+                                            color: '#14c4ba',
+                                            opacity: .5
+                                        }
+                                    },
+                                    {
+                                        coord: ['max', 'median']
+                                    }
+                                ],
+                                [
+                                    {
+                                        name: '平均值到最大值',
+                                        type: 'average',
+                                        itemStyle: {
+                                            color: 'lightblue',
+                                            borderWidth: 2,
+                                            borderColor: 'lightblue'
+                                        }
+                                    },
+                                    {
+                                        type: 'max'
+                                    }
+                                ],
+                                [
+                                    {
+                                        name: '两个坐标之间的标域',
+                                        coord: [1, 20]
+                                    },
+                                    {
+                                        coord: ['c', 30]
+                                    }
+                                ],
+                                [
+                                    {
+                                        name: 'yAxis 120~130',
+                                        yAxis: 120
+                                    },
+                                    {
+                                        yAxis: 130
+                                    }
+                                ],
+                                [
+                                    {
+                                        name: '两个屏幕坐标之间的标域 px',
+                                        x: 80,
+                                        y: 50,
+                                        itemStyle: {
+                                            color: 'lightgreen'
+                                        }
+                                    },
+                                    {
+                                        x: 100,
+                                        y: 100
+                                    }
+                                ],
+                                [
+                                    {
+                                        name: '两个屏幕坐标之间的标域 px & %',
+                                        x: 100,
+                                        y: '20%'
+                                    },
+                                    {
+                                        x: '90%',
+                                        y: '30%'
+                                    }
+                                ]
+                            ]
+                        }
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'main2', {
+                    title: [
+                        '**两个屏幕坐标之间的标域** should be displayed',
+                        '**所有数据范围区间** should be displayed',
+                        'Other mark areas should also be displayed',
+                        'should have no errors in the console'
+                    ],
+                    option: option
+                });
+            });
+            </script>
     </body>
-</html>
\ No newline at end of file
+</html>