fix: fix bar width strategy.

(1) On value axis, the auto-calculated bar width might be near 0, which make the bar invisible.
So we add option `barMinWidth` (default 1 in category and default null in other coord sys).
(2) The fix #5316 (commit 2823ab50) seems not work any more currently.
check the cases in `echarts/test/bar-width.html`. This fix make it works.

src/chart/bar/BaseBarSeries.js

@@ -66,6 +66,10 @@ export default SeriesModel.extend({
         progressiveChunkMode: 'mod',
 
         // barMaxWidth: null,
+
+        // In cartesian, the default value is 1. Otherwise null.
+        // barMinWidth: null,
+
         // 默认自适应
         // barWidth: null,
         // 柱间距离，默认为柱形宽度的30%，可设固定值

src/chart/custom.js

@@ -539,6 +539,7 @@ function makeRenderItem(customSeries, data, ecModel, api) {
      * @param {number} opt.count Positive interger.
      * @param {number} [opt.barWidth]
      * @param {number} [opt.barMaxWidth]
+     * @param {number} [opt.barMinWidth]
      * @param {number} [opt.barGap]
      * @param {number} [opt.barCategoryGap]
      * @return {Object} {width, offset, offsetCenter} is not support, return undefined.

src/layout/barGrid.js

@@ -43,6 +43,7 @@ function getAxisKey(axis) {
  * @param {number} opt.count Positive interger.
  * @param {number} [opt.barWidth]
  * @param {number} [opt.barMaxWidth]
+ * @param {number} [opt.barMinWidth]
  * @param {number} [opt.barGap]
  * @param {number} [opt.barCategoryGap]
  * @return {Object} {width, offset, offsetCenter} If axis.type is not 'category', return undefined.
@@ -189,6 +190,11 @@ export function makeColumnLayout(barSeries) {
         var barMaxWidth = parsePercent(
             seriesModel.get('barMaxWidth'), bandWidth
         );
+        var barMinWidth = parsePercent(
+            // barMinWidth by default is 1 in cartesian. Because in value axis,
+            // the auto-calculated bar width might be less than 1.
+            seriesModel.get('barMinWidth') || 1, bandWidth
+        );
         var barGap = seriesModel.get('barGap');
         var barCategoryGap = seriesModel.get('barCategoryGap');
 
@@ -196,6 +202,7 @@ export function makeColumnLayout(barSeries) {
             bandWidth: bandWidth,
             barWidth: barWidth,
             barMaxWidth: barMaxWidth,
+            barMinWidth: barMinWidth,
             barGap: barGap,
             barCategoryGap: barCategoryGap,
             axisKey: getAxisKey(baseAxis),
@@ -250,6 +257,8 @@ function doCalBarWidthAndOffset(seriesInfoList) {
 
         var barMaxWidth = seriesInfo.barMaxWidth;
         barMaxWidth && (stacks[stackId].maxWidth = barMaxWidth);
+        var barMinWidth = seriesInfo.barMinWidth;
+        barMinWidth && (stacks[stackId].minWidth = barMinWidth);
         var barGap = seriesInfo.barGap;
         (barGap != null) && (columnsOnAxis.gap = barGap);
         var barCategoryGap = seriesInfo.barCategoryGap;
@@ -276,14 +285,39 @@ function doCalBarWidthAndOffset(seriesInfoList) {
         // Find if any auto calculated bar exceeded maxBarWidth
         zrUtil.each(stacks, function (column, stack) {
             var maxWidth = column.maxWidth;
-            if (maxWidth && maxWidth < autoWidth) {
-                maxWidth = Math.min(maxWidth, remainedWidth);
-                if (column.width) {
-                    maxWidth = Math.min(maxWidth, column.width);
+            var minWidth = column.minWidth;
+            if (!column.width) {
+                var finalWidth = autoWidth;
+                if (maxWidth && maxWidth < finalWidth) {
+                    finalWidth = Math.min(finalWidth, maxWidth, remainedWidth);
+                }
+                // `minWidth` has higher priority. `minWidth` decide that wheter the
+                // bar is able to be visible. So `minWidth` should not be restricted
+                // by `maxWidth` or `remainedWidth` (which is from `bandWidth`). In
+                // the extreme cases for `value` axis, bars are allowed to overlap
+                // with each other if `minWidth` specified.
+                if (minWidth && minWidth > finalWidth) {
+                    finalWidth = Math.max(finalWidth, minWidth);
+                }
+                if (finalWidth !== autoWidth) {
+                    column.width = finalWidth;
+                    remainedWidth -= finalWidth;
+                    autoWidthCount--;
+                }
+            }
+            else {
+                // `barMinWidth/barMaxWidth` has higher priority than `barWidth`, as
+                // CSS does. Becuase barWidth can be a percent value, where
+                // `barMaxWidth` can be used to restrict the final width.
+                var finalWidth = column.width;
+                if (maxWidth) {
+                    finalWidth = Math.min(finalWidth, maxWidth);
+                }
+                // `minWidth` has higher priority, as described above
+                if (minWidth) {
+                    finalWidth = Math.max(finalWidth, minWidth);
                 }
-                remainedWidth -= maxWidth;
-                column.width = maxWidth;
-                autoWidthCount--;
+                column.width = finalWidth;
             }
         });
 

test/bar-width.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/esl.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;
+            }
+            .chart {
+                height: 400px;
+            }
+        </style>
+
+        <div class="chart" id="main1"></div>
+        <div class="chart" id="main2"></div>
+
+
+        <script>
+
+            require([
+                'echarts'
+            ], function (echarts) {
+                var data = [
+                    [7880,6.52],
+                    [7881,3.18], // very near 7880, which makes the bar very thin
+                    [6110,2.68],
+                    [7390,9.55],
+                    [7250,5.59],
+                    [7300,7.43],
+                    [3980,8.54],
+                    [4290,3.22],
+                    [500,4.68],
+                    [1720,5.15],
+                    [900,9],
+                    [910,10]
+                ];
+
+                function makeOption() {
+                    var option = {
+                        tooltip: {},
+                        xAxis: {
+                        },
+                        yAxis: {
+                        },
+                        dataZoom:
+                        [{
+                            type: 'inside'
+                        }, {
+                            type: 'slider'
+                        }],
+                        series: {
+                            type: 'bar',
+                            label: {
+                                show: true,
+                                position: 'top'
+                            },
+                            data: data
+                        },
+                        title: {
+                            text: 'no barMinWidth, no barMaxWidth specifed'
+                        }
+                    };
+                    return option;
+                }
+
+                var chart = testHelper.create(echarts, 'main1', {
+                    title: [
+                        'On `value` axis.',
+                        'Test **barMinWidth** and **barMaxWidth**: move dataZoom, ',
+                        'bar should be **visible** ',
+                        '**bar width** should be correct as the title described.'
+                    ],
+                    height: 200,
+                    option: makeOption(),
+                    buttons: [{
+                        text: 'barMinWidth: 10',
+                        onclick: function () {
+                            var option = makeOption();
+                            option.title.text = 'barMinWidth: 10, no barMaxWidth';
+                            option.series.barMinWidth = 10;
+                            chart.setOption(option, true);
+                        }
+                    }, {
+                        text: 'barMinWidth: 10, barMaxWidth: 40',
+                        onclick: function () {
+                            var option = makeOption();
+                            option.title.text = 'barMinWidth: 10, barMaxWidth: 40';
+                            option.series.barMinWidth = 10;
+                            option.series.barMaxWidth = 40;
+                            chart.setOption(option, true);
+                        }
+                    }, {
+                        text: 'barMaxWidth: 40',
+                        onclick: function () {
+                            var option = makeOption();
+                            option.title.text = 'no barMinWidth, barMaxWidth: 40';
+                            option.series.barMaxWidth = 40;
+                            chart.setOption(option, true);
+                        }
+                    }, {
+                        text: 'barWidth: 60, barMaxWidth: 20',
+                        onclick: function () {
+                            var option = makeOption();
+                            option.title.text = 'barWidth: 60, barMaxWidth: 20, final bar width should keep 20';
+                            option.series.barWidth = 60;
+                            option.series.barMaxWidth = 20;
+                            chart.setOption(option, true);
+                        }
+                    }]
+                });
+            });
+
+        </script>
+
+
+
+
+
+
+
+
+        <script>
+
+            require([
+                'echarts'
+            ], function (echarts) {
+                var data = [];
+                for (var i = 0; i < 80; i++) {
+                    data.push(['a' + i, 10]);
+                }
+
+                function makeOption() {
+                    var option = {
+                        tooltip: {},
+                        xAxis: {
+                            type: 'category'
+                        },
+                        yAxis: {
+                        },
+                        dataZoom:
+                        [{
+                            type: 'inside'
+                        }, {
+                            type: 'slider'
+                        }],
+                        series: {
+                            type: 'bar',
+                            data: data
+                        },
+                        title: {
+                            text: 'no barMinWidth, no barMaxWidth specifed'
+                        }
+                    };
+                    return option;
+                }
+
+                var chart = testHelper.create(echarts, 'main2', {
+                    title: [
+                        'On `category` axis.',
+                        'Test **barMinWidth** and **barMaxWidth**: move dataZoom, ',
+                        'bar should be **visible**.',
+                        '**bar width** should be correct as the title described.'
+                    ],
+                    height: 200,
+                    width: 600,
+                    option: makeOption(),
+                    buttons: [{
+                        text: 'barMinWidth: 10',
+                        onclick: function () {
+                            var option = makeOption();
+                            option.title.text = 'barMinWidth: 10, no barMaxWidth';
+                            option.series.barMinWidth = 10;
+                            chart.setOption(option, true);
+                        }
+                    }, {
+                        text: 'barMinWidth: 10, barMaxWidth: 40',
+                        onclick: function () {
+                            var option = makeOption();
+                            option.title.text = 'barMinWidth: 10, barMaxWidth: 40';
+                            option.series.barMinWidth = 10;
+                            option.series.barMaxWidth = 40;
+                            chart.setOption(option, true);
+                        }
+                    }, {
+                        text: 'barMaxWidth: 40',
+                        onclick: function () {
+                            var option = makeOption();
+                            option.title.text = 'no barMinWidth, barMaxWidth: 40';
+                            option.series.barMaxWidth = 40;
+                            chart.setOption(option, true);
+                        }
+                    }, {
+                        text: 'barWidth: "98%", barMaxWidth: 20',
+                        onclick: function () {
+                            var option = makeOption();
+                            option.title.text = 'barWidth: "98%", barMaxWidth: 20\nfinal bar width should not over 20';
+                            option.series.barWidth = '98%';
+                            option.series.barMaxWidth = 20;
+                            chart.setOption(option, true);
+                        }
+                    }, {
+                        text: 'barWidth: 60, barMaxWidth: 20',
+                        onclick: function () {
+                            var option = makeOption();
+                            option.title.text = 'barWidth: 60, barMaxWidth: 20\nfinal bar width should keep 20';
+                            option.series.barWidth = 60;
+                            option.series.barMaxWidth = 20;
+                            chart.setOption(option, true);
+                        }
+                    }]
+                });
+            });
+
+        </script>
+
+
+
+
+    </body>
+</html>
\ No newline at end of file