diff --git a/src/chart/bar/BaseBarSeries.ts b/src/chart/bar/BaseBarSeries.ts
index bff11b8837..81d3415202 100644
--- a/src/chart/bar/BaseBarSeries.ts
+++ b/src/chart/bar/BaseBarSeries.ts
@@ -94,20 +94,77 @@ class BaseBarSeriesModel<Opts extends BaseBarSeriesOption<unknown> = BaseBarSeri
         const coordSys = this.coordinateSystem;
         if (coordSys && coordSys.clampData) {
             // PENDING if clamp ?
-            const pt = coordSys.dataToPoint(coordSys.clampData(value));
+            const clampData = coordSys.clampData(value);
+            const pt = coordSys.dataToPoint(clampData);
             if (startingAtTick) {
                 each(coordSys.getAxes(), function (axis: Axis2D, idx: number) {
                     // If axis type is category, use tick coords instead
-                    if (axis.type === 'category') {
+                    if (axis.type === 'category' && dims != null) {
                         const tickCoords = axis.getTicksCoords();
-                        let tickIdx = coordSys.clampData(value)[idx];
+
+                        let targetTickId = clampData[idx];
                         // The index of rightmost tick of markArea is 1 larger than x1/y1 index
-                        if (dims && (dims[idx] === 'x1' || dims[idx] === 'y1')) {
-                            tickIdx += 1;
+                        const isEnd = dims[idx] === 'x1' || dims[idx] === 'y1';
+                        if (isEnd) {
+                            targetTickId += 1;
+                        }
+
+                        // The only contains one tick, tickCoords is
+                        // like [{coord: 0, tickValue: 0}, {coord: 0}]
+                        // to the length should always be larger than 1
+                        if (tickCoords.length < 2) {
+                            return;
+                        }
+                        else if (tickCoords.length === 2) {
+                            // The left value and right value of the axis are
+                            // the same. coord is 0 in both items. Use the max
+                            // value of the axis as the coord
+                            pt[idx] = axis.toGlobalCoord(
+                                axis.getExtent()[isEnd ? 1 : 0]
+                            );
+                            return;
+                        }
+
+                        let leftCoord;
+                        let coord;
+                        let stepTickValue = 1;
+                        for (let i = 0; i < tickCoords.length; i++) {
+                            const tickCoord = tickCoords[i].coord;
+                            // The last item of tickCoords doesn't contain
+                            // tickValue
+                            const tickValue = i === tickCoords.length - 1
+                                ? tickCoords[i - 1].tickValue + stepTickValue
+                                : tickCoords[i].tickValue;
+                            if (tickValue === targetTickId) {
+                                coord = tickCoord;
+                                break;
+                            }
+                            else if (tickValue < targetTickId) {
+                                leftCoord = tickCoord;
+                            }
+                            else if (leftCoord != null && tickValue > targetTickId) {
+                                coord = (tickCoord + leftCoord) / 2;
+                                break;
+                            }
+                            if (i === 1) {
+                                // Here we assume the step of category axes is
+                                // the same
+                                stepTickValue = tickValue - tickCoords[0].tickValue;
+                            }
+                        }
+                        if (coord == null) {
+                            if (!leftCoord) {
+                                // targetTickId is smaller than all tick ids in the
+                                // visible area, use the leftmost tick coord
+                                coord = tickCoords[0].coord;
+                            }
+                            else if (leftCoord) {
+                                // targetTickId is larger than all tick ids in the
+                                // visible area, use the rightmost tick coord
+                                coord = tickCoords[tickCoords.length - 1].coord;
+                            }
                         }
-                        (tickIdx > tickCoords.length - 1) && (tickIdx = tickCoords.length - 1);
-                        (tickIdx < 0) && (tickIdx = 0);
-                        tickCoords[tickIdx] && (pt[idx] = axis.toGlobalCoord(tickCoords[tickIdx].coord));
+                        pt[idx] = axis.toGlobalCoord(coord);
                     }
                 });
             }
diff --git a/src/component/marker/markerHelper.ts b/src/component/marker/markerHelper.ts
index 2777b137f4..f5e5b7ddf3 100644
--- a/src/component/marker/markerHelper.ts
+++ b/src/component/marker/markerHelper.ts
@@ -105,14 +105,14 @@ export function dataTransform(
 
     const data = seriesModel.getData();
     const coordSys = seriesModel.coordinateSystem;
-    const dims = coordSys.dimensions;
+    const dims = coordSys && 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 (!hasXAndY(item) && !isArray(item.coord) && coordSys) {
+    if (!hasXAndY(item) && !isArray(item.coord) && isArray(dims)) {
         const axisInfo = getAxisInfo(item, data, coordSys, seriesModel);
 
         // Clone the option
@@ -144,7 +144,7 @@ export function dataTransform(
         }
     }
     // x y is provided
-    if (item.coord == null) {
+    if (item.coord == null || !isArray(dims)) {
         item.coord = [];
     }
     else {
diff --git a/test/bar-markArea.html b/test/bar-markArea.html
index 2f96ce9f7d..8473f0a43c 100644
--- a/test/bar-markArea.html
+++ b/test/bar-markArea.html
@@ -38,7 +38,11 @@
 
         <div id="main0"></div>
         <div id="main1"></div>
-
+        <div id="main2"></div>
+        <div id="main3"></div>
+        <div id="main4"></div>
+        <div id="main5"></div>
+        <div id="main6"></div>
 
         <script>
         require([
@@ -168,7 +172,325 @@
     });
     </script>
 
+      <script>
+        require([
+            'echarts'
+        ], function (echarts) {
+            var option;
+            // This bug only occurs when end is large enough for some of the
+            // axis labels to be hidden due to overlapping.
+            var end = 70;
+
+            var xData = [];
+            for (let i = 0; i < end; ++i) {
+              xData.push(i);
+            }
+
+            option = {
+              xAxis: [
+                {
+                  data: xData,
+                  show: true
+                }
+              ],
+              yAxis: [{ type: 'value', show: true, max: 100 }],
+              grid: [{}],
+              series: [
+                {
+                  type: 'bar',
+                  data: [[end - 1, 100, 22]],
+
+                  barWidth: 10,
+                  itemStyle: {
+                    opacity: 0.5
+                  },
+                  markArea: {
+                    itemStyle: {
+                      color: 'red',
+                      opacity: 0.5
+                    },
+                    data: [
+                      [
+                        {
+                          xAxis: 20
+                        },
+                        {
+                          xAxis: end - 10
+                        }
+                      ]
+                    ]
+                  }
+                }
+              ]
+            };
+            var chart = testHelper.create(echarts, 'main2', {
+                title: [
+                    'There should be a red markArea at x position 20~60 (the position between 60 and 62)',
+                    'Fix #18130'
+                ],
+                option: option
+            });
+        });
+        </script>
+
+        <script>
+          require([
+              'echarts'
+          ], function (echarts) {
+              var option;
+              var end = 70;
+
+              var xData = [];
+              for (let i = 0; i < end; ++i) {
+                xData.push(i);
+              }
+
+              option = {
+                xAxis: [
+                  {
+                    data: xData,
+                    show: true
+                  }
+                ],
+                yAxis: [{ type: 'value', show: true, max: 100 }],
+                grid: [{}],
+                dataZoom: {
+                  type: 'slider',
+                  xAxisIndex: 0,
+                  start: 50,
+                  end: 100
+                },
+                series: [
+                  {
+                    type: 'bar',
+                    data: [[end - 1, 100, 22]],
 
+                    barWidth: 10,
+                    itemStyle: {
+                      opacity: 0.5
+                    },
+                    markArea: {
+                      itemStyle: {
+                        color: 'red',
+                        opacity: 0.5
+                      },
+                      data: [
+                        [
+                          {
+                            xAxis: 20
+                          },
+                          {
+                            xAxis: end - 10
+                          }
+                        ]
+                      ]
+                    }
+                  }
+                ]
+              };
+              var chart = testHelper.create(echarts, 'main3', {
+                  title: [
+                      'There should be a red markArea at x position 35~60',
+                      'Fix #18130'
+                  ],
+                  option: option
+              });
+          });
+        </script>
+
+        <script>
+          require([
+              'echarts'
+          ], function (echarts) {
+              var option;
+              var end = 70;
+
+              var xData = [];
+              for (let i = 0; i < end; ++i) {
+                xData.push(i);
+              }
+
+              option = {
+                xAxis: [
+                  {
+                    data: xData,
+                    show: true
+                  }
+                ],
+                yAxis: [{ type: 'value', show: true, max: 100 }],
+                grid: [{}],
+                dataZoom: {
+                  type: 'slider',
+                  xAxisIndex: 0,
+                  start: 0,
+                  end: 50
+                },
+                series: [
+                  {
+                    type: 'bar',
+                    data: [[end - 1, 100, 22]],
+
+                    barWidth: 10,
+                    itemStyle: {
+                      opacity: 0.5
+                    },
+                    markArea: {
+                      itemStyle: {
+                        color: 'red',
+                        opacity: 0.5
+                      },
+                      data: [
+                        [
+                          {
+                            xAxis: 20
+                          },
+                          {
+                            xAxis: end - 10
+                          }
+                        ]
+                      ]
+                    }
+                  }
+                ]
+              };
+              var chart = testHelper.create(echarts, 'main4', {
+                  title: [
+                      'There should be a red markArea at x position 20~35',
+                      'Fix #18130'
+                  ],
+                  option: option
+              });
+          });
+        </script>
+
+        <script>
+          require([
+              'echarts'
+          ], function (echarts) {
+              var option;
+              var end = 70;
+
+              var xData = [];
+              for (let i = 0; i < end; ++i) {
+                xData.push(i);
+              }
+
+              option = {
+                xAxis: [
+                  {
+                    data: xData,
+                    show: true
+                  }
+                ],
+                yAxis: [{ type: 'value', show: true, max: 100 }],
+                grid: [{}],
+                dataZoom: {
+                  type: 'slider',
+                  xAxisIndex: 0,
+                  start: 60,
+                  end: 60
+                },
+                series: [
+                  {
+                    type: 'bar',
+                    data: [[end - 1, 100, 22]],
+
+                    barWidth: 10,
+                    itemStyle: {
+                      opacity: 0.5
+                    },
+                    markArea: {
+                      itemStyle: {
+                        color: 'red',
+                        opacity: 0.5
+                      },
+                      data: [
+                        [
+                          {
+                            xAxis: 20
+                          },
+                          {
+                            xAxis: end - 10
+                          }
+                        ]
+                      ]
+                    }
+                  }
+                ]
+              };
+              var chart = testHelper.create(echarts, 'main5', {
+                  title: [
+                      'There should be a red markArea at the full grid area',
+                      'Fix #18130'
+                  ],
+                  option: option
+              });
+          });
+        </script>
+
+        <script>
+          require([
+              'echarts'
+          ], function (echarts) {
+              var option;
+              var end = 70;
+
+              var xData = [];
+              for (let i = 0; i < end; ++i) {
+                xData.push(i);
+              }
+
+              option = {
+                xAxis: [
+                  {
+                    data: xData,
+                    show: true
+                  }
+                ],
+                yAxis: [{ type: 'value', show: true, max: 100 }],
+                grid: [{}],
+                dataZoom: {
+                  type: 'slider',
+                  xAxisIndex: 0,
+                  startValue: 0,
+                  endValue: 61
+                },
+                series: [
+                  {
+                    type: 'bar',
+                    data: [[end - 1, 100, 22]],
+
+                    barWidth: 10,
+                    itemStyle: {
+                      opacity: 0.5
+                    },
+                    markArea: {
+                      itemStyle: {
+                        color: 'red',
+                        opacity: 0.5
+                      },
+                      data: [
+                        [
+                          {
+                            xAxis: 20
+                          },
+                          {
+                            xAxis: end - 10
+                          }
+                        ]
+                      ]
+                    }
+                  }
+                ]
+              };
+              var chart = testHelper.create(echarts, 'main6', {
+                  title: [
+                      'There should be a red markArea at 20~60. **Note the right should NOT be at the right boundary.**',
+                      'Fix #18130'
+                  ],
+                  option: option
+              });
+          });
+        </script>
     </body>
 </html>
-
diff --git a/test/marker-case.html b/test/marker-case.html
index a02e9e1f6e..0b5efb126b 100644
--- a/test/marker-case.html
+++ b/test/marker-case.html
@@ -39,6 +39,7 @@
 
         <div id="main0"></div>
         <div id="main1"></div>
+        <div id="main2"></div>
 
 
 
@@ -143,7 +144,70 @@
                     option: option
                 });
             });
+        </script>
+
+        <script>
+            require([
+                'echarts',
+            ], function (echarts) {
+                var option = {
+                    legend: {
+                        show: false
+                    },
+                    series: [{
+                        type: 'pie',
+                        radius: ['60%', '80%'],
+                        avoidLabelOverlap: false,
+                        emphasis: {
+                            disabled: true
+                        },
+                        cursor: 'auto',
+                        label: {
+                            show: false
+                        },
+                        markPoint: {
+                            tooltip: {
+                                show: false
+                            },
+                            label: {
+                                show: true,
+                                formatter: '{b}'
+                            },
+                            data: [
+                            {
+                                name: '0%',
+                                value: '-',
+                                symbol: 'circle',
+                                itemStyle: {
+                                color: 'transparent'
+                                },
+                                x: '50%',
+                                y: '50%'
+                            }
+                            ]
+                        },
+                        data: [
+                            {
+                                name: 'With value',
+                                value: 0
+                            },
+                            {
+                                name: 'Without value',
+                                value: 1
+                            }
+                        ],
+                        animationDuration: 0,
+                        animationDurationUpdate: 0
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'main2', {
+                    title: [
+                        'Using markers in the pie series should not cause error'
+                    ],
+                    option: option
+                });
+            });
             </script>
     </body>
 </html>
-