fix(time): bar bandWidth with time axis #11145 (#11479)

src/layout/barGrid.js

@@ -87,16 +87,95 @@ export function prepareLayoutBarSeries(seriesType, ecModel) {
     return seriesModels;
 }
 
+
+/**
+ * Map from axis.index to min gap of two adjacent values.
+ * This works for time axes, value axes, and log axes.
+ * For a single time axis, return value is in the form like
+ * [[1000000]].
+ * The value of 1000000 is in milliseconds.
+ */
+function getValueAxesMinGaps(barSeries) {
+    /**
+     * Map from axis.index to values.
+     * For a single time axis, axisValues is in the form like
+     * [[1495555200000, 1495641600000, 1495728000000]].
+     * Items in axisValues[x], e.g. 1495555200000, are time values of all
+     * series.
+     */
+    var axisValues = [];
+    zrUtil.each(barSeries, function (seriesModel) {
+        var cartesian = seriesModel.coordinateSystem;
+        var baseAxis = cartesian.getBaseAxis();
+        if (baseAxis.type !== 'time' && baseAxis.type !== 'value') {
+            return;
+        }
+
+        var data = seriesModel.getData();
+        var axisId = baseAxis.index;
+        for (var i = 0, cnt = data.count(); i < cnt; ++i) {
+            var value = data.get(baseAxis.dim, i);
+            if (!axisValues[axisId]) {
+                // No previous data for the axis
+                axisValues[axisId] = [value];
+            }
+            else {
+                // No value in previous series
+                axisValues[axisId].push(value);
+            }
+            // Ignore duplicated time values in the same axis
+        }
+    });
+
+    var axisMinGaps = [];
+    for (var i = 0; i < axisValues.length; ++i) {
+        if (axisValues[i]) {
+            // Sort axis values into ascending order to calculate gaps
+            axisValues[i].sort(function (a, b) {
+                return a - b;
+            });
+
+            var min = Number.MAX_VALUE;
+            for (var j = 1; j < axisValues[i].length; ++j) {
+                var delta = axisValues[i][j] - axisValues[i][j - 1];
+                if (delta > 0) {
+                    // Ignore 0 delta because they are of the same axis value
+                    min = Math.min(min, delta);
+                }
+            }
+            // Set to null if only have one data
+            axisMinGaps[i] = min === Number.MAX_VALUE ? null : min;
+        }
+    }
+    return axisMinGaps;
+}
+
 export function makeColumnLayout(barSeries) {
+    var axisMinGaps = getValueAxesMinGaps(barSeries);
+
     var seriesInfoList = [];
     zrUtil.each(barSeries, function (seriesModel) {
-        var data = seriesModel.getData();
         var cartesian = seriesModel.coordinateSystem;
         var baseAxis = cartesian.getBaseAxis();
         var axisExtent = baseAxis.getExtent();
-        var bandWidth = baseAxis.type === 'category'
-            ? baseAxis.getBandWidth()
-            : (Math.abs(axisExtent[1] - axisExtent[0]) / data.count());
+
+        var bandWidth;
+        if (baseAxis.type === 'category') {
+            bandWidth = baseAxis.getBandWidth();
+        }
+        else if (baseAxis.type === 'value' || baseAxis.type === 'time') {
+            var minGap = axisMinGaps[baseAxis.index];
+            var extentSpan = Math.abs(axisExtent[1] - axisExtent[0]);
+            var scale = baseAxis.scale.getExtent();
+            var scaleSpan = Math.abs(scale[1] - scale[0]);
+            bandWidth = minGap
+                ? extentSpan / scaleSpan * minGap
+                : extentSpan; // When there is only one data value
+        }
+        else {
+            var data = seriesModel.getData();
+            bandWidth = Math.abs(axisExtent[1] - axisExtent[0]) / data.count();
+        }
 
         var barWidth = parsePercent(
             seriesModel.get('barWidth'), bandWidth

test/bar2.html

@@ -51,6 +51,7 @@ under the License.
         <div class="chart" id="main3"></div>
         <div class="chart" id="main4"></div>
         <div class="chart" id="main5"></div>
+        <div class="chart" id="main6"></div>
 
 
         <script>
@@ -373,14 +374,14 @@ under the License.
                 'echarts'
             ], function (ec) {
                 echarts = ec;
-                var dataCount = 10;
+                var dataCount = 5;
 
                 function makeSeriesData() {
                     var result = [];
                     var date = 0;
                     for (var i = 0; i < dataCount; i++) {
                         result.push([+date, Math.random() * 1000]);
-                        date += 5;
+                        date += Math.ceil(Math.random() * 10);
                     }
                     return result;
                 }
@@ -418,7 +419,8 @@ under the License.
                         type: 'bar',
                         itemStyle: itemStyle,
                         data: makeSeriesData()
-                    }]
+                    }],
+                    animation: false
                 };
 
                 var chart = testHelper.create(echarts, 'main4', {
@@ -512,5 +514,57 @@ under the License.
         </script>
 
 
+
+
+        <script>
+            require(['echarts'], function (echarts) {
+                option = {
+                    animation: false,
+                    dataZoom: [
+                        {
+                            "type": "slider",
+                            "show": true
+                        }
+                    ],
+                    color: ['#003366', '#e5323e'],
+                    legend: {
+                        data: ['Forest', 'Desert']
+                    },
+                    xAxis: [
+                        {
+                            type: 'time'
+                        }
+                    ],
+                    yAxis: [
+                        {
+                            type: 'value'
+                        }
+                    ],
+                    series: [
+                        {
+                            name: 'Forest',
+                            type: 'bar',
+                            barGap: 0,
+                            data: [["2017-05-26", 320], ["2017-05-25", 340], ["2017-05-24", 310]]
+                        },
+                        {
+                            name: 'Desert',
+                            type: 'bar',
+                            data: [["2017-05-26", 240], ["2017-05-24", 315]]
+                        }
+                    ]
+                };
+
+                var chart = testHelper.create(echarts, 'main6', {
+                    title: [
+                        'Bar series with time axis',
+                        'Zoom in and bars should not overlap'
+                    ],
+                    option: option
+                });
+            });
+        </script>
+
+
     </body>
 </html>
\ No newline at end of file

test/runTest/actions/__meta__.json

@@ -6,80 +6,87 @@
   "area2": 1,
   "aria-line-bar": 1,
   "aria-pie": 1,
+  "axes": 0,
+  "axis": 1,
   "axis-boundaryGap": 1,
   "axis-lastLabel": 5,
   "axis-multiple": 1,
   "axis-style": 2,
-  "map-parallel": 1,
-  "map": 3,
-  "treemap-disk": 3,
-  "axis": 1,
   "axisPosition": 2,
+  "bar": 2,
   "bar-label-rotation": 2,
   "bar-large": 2,
   "bar-overflow-time-plot": 3,
-  "bar-polar-multi-series-radial": 1,
   "bar-polar-multi-series": 1,
+  "bar-polar-multi-series-radial": 1,
   "bar-polar-null-data-radial": 1,
   "bar-polar-stack": 1,
   "bar-stack": 1,
   "bar-start": 1,
-  "bar": 2,
+  "bar2": 3,
   "bar3": 1,
   "bmap": 1,
-  "boxplot-multi": 1,
   "boxplot": 1,
+  "boxplot-multi": 1,
   "brush": 7,
   "brush2": 3,
   "brush3": 2,
   "calendar-converter": 1,
   "calendar-heatmap": 1,
   "calendar-month": 2,
+  "candlestick": 2,
   "candlestick-empty": 1,
   "candlestick-large": 4,
   "candlestick-large2": 1,
-  "candlestick": 2,
   "candlestickConnect": 4,
+  "clip": 9,
   "color-mix-aqi": 1,
+  "connect": 1,
   "connect-dynamic": 2,
   "connect-manually": 1,
-  "connect": 1,
   "connect2": 1,
   "css-transform": 4,
+  "custom": 5,
   "custom-children-remove": 1,
   "custom-hexbin": 1,
-  "custom": 5,
   "dataZoom-action": 4,
   "dataZoom-axes": 4,
   "dataZoom-axis-type": 3,
   "dataZoom-clip": 3,
   "dataZoom-extreme": 1,
+  "dataZoom-rainfall": 1,
   "dataZoom-rainfall-connect": 1,
   "dataZoom-rainfall-inside": 1,
-  "dataZoom-rainfall": 1,
   "dataZoom-scatter-category": 2,
-  "dataZoom-scatter-hv-polar": 3,
   "dataZoom-scatter-hv": 1,
+  "dataZoom-scatter-hv-polar": 3,
+  "dataZoom-scroll": 3,
   "dataZoom-sync": 1,
   "dataZoom-toolbox": 6,
   "dataZoomHighPrecision": 3,
   "dynamic-splitNumber": 1,
   "ec-event": 4,
   "funnel": 2,
+  "gauge-simple": 2,
   "geo-map": 3,
   "geoScatter": 1,
   "getOption": 1,
+  "graph": 2,
   "graph-grid": 1,
   "graph-simple": 2,
-  "graph": 2,
-  "heatmap-map": 1,
   "heatmap": 1,
+  "heatmap-map": 1,
   "homepage3": 1,
   "hoverStyle": 12,
   "label-position": 1,
   "largeLine-tooltip": 1,
   "legend": 6,
   "line-animation": 1,
+  "map": 3,
+  "map-contour": 2,
+  "map-default": 1,
+  "map-labels": 1,
+  "map-parallel": 1,
   "map-province": 1,
   "mapWorld": 1,
   "markArea": 1,
@@ -90,21 +97,23 @@
   "parallel-aqi": 1,
   "parallel-nutrients": 1,
   "pictorial-repeat": 5,
+  "pie": 1,
   "pie-action": 1,
   "pie-calculable": 1,
-  "pie": 1,
+  "polar-rounded": 2,
   "polarLine": 1,
   "polarScatter": 1,
+  "radar": 1,
+  "radar2": 1,
   "radar3": 1,
   "radar4": 1,
-  "radar2": 1,
-  "radar": 1,
   "sankey-depth": 1,
   "sankey-jump": 1,
   "sankey-level": 1,
   "scatter-random-stream-fix-axis": 1,
   "scatter-single-axis": 3,
   "scatterMatrix": 3,
+  "stackBar-dataZoom": 7,
   "sunburst-book": 1,
   "sunburst-canvas": 1,
   "symbol2": 1,
@@ -112,30 +121,22 @@
   "timeScale": 1,
   "timeScale2": 1,
   "toolbox-textStyle": 1,
+  "toolbox-title": 4,
   "toolbox-tooltip": 1,
+  "tooltip": 10,
   "tooltip-axisPointer": 20,
   "tooltip-cascade": 4,
   "tooltip-event": 1,
   "tooltip-link": 2,
   "tooltip-rich": 1,
   "tooltip-setOption": 2,
-  "tooltip": 10,
   "tree-image": 1,
   "tree-legend": 1,
   "tree-radial": 1,
+  "treemap-disk": 3,
   "treemap-disk2": 2,
   "treemap-obama": 2,
   "treemap-option": 1,
   "treemap-option2": 2,
-  "visualMap-categories": 1,
-  "axes": 0,
-  "stackBar-dataZoom": 7,
-  "clip": 9,
-  "dataZoom-scroll": 3,
-  "map-contour": 2,
-  "map-default": 1,
-  "map-labels": 1,
-  "polar-rounded": 2,
-  "toolbox-title": 4,
-  "gauge-simple": 2
+  "visualMap-categories": 1
 }
\ No newline at end of file

test/runTest/actions/bar2.json

+[{"name":"Action 1","ops":[{"type":"mousemove","time":50,"x":246,"y":222},{"type":"mousemove","time":256,"x":337,"y":215},{"type":"mousemove","time":470,"x":344,"y":215},{"type":"mousedown","time":681,"x":344,"y":215},{"type":"mousemove","time":691,"x":344,"y":215},{"type":"mouseup","time":807,"x":344,"y":215},{"time":808,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":1823,"x":344,"y":215},{"type":"mouseup","time":1958,"x":344,"y":215},{"time":1959,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2379,"x":344,"y":215},{"type":"mousemove","time":2580,"x":386,"y":211},{"type":"mousemove","time":2780,"x":423,"y":214},{"type":"mousemove","time":2980,"x":423,"y":214},{"type":"mousedown","time":3074,"x":423,"y":214},{"type":"mouseup","time":3175,"x":423,"y":214},{"time":3176,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":4363,"x":423,"y":214},{"type":"mouseup","time":4522,"x":423,"y":214},{"time":4523,"delay":400,"type":"screenshot-auto"}],"scrollY":2165,"scrollX":0,"timestamp":1571901499713},{"name":"Action 2","ops":[{"type":"mousemove","time":119,"x":694,"y":534},{"type":"mousemove","time":331,"x":647,"y":574},{"type":"mousedown","time":496,"x":646,"y":574},{"type":"mousemove","time":542,"x":646,"y":574},{"type":"mouseup","time":624,"x":646,"y":574},{"time":625,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":723,"x":641,"y":574},{"type":"mousemove","time":925,"x":601,"y":574},{"type":"mousemove","time":1139,"x":600,"y":574},{"type":"mousedown","time":1183,"x":600,"y":574},{"type":"mousemove","time":1431,"x":600,"y":574},{"type":"mousemove","time":1635,"x":578,"y":575},{"type":"mousemove","time":1845,"x":569,"y":575},{"type":"mousemove","time":2058,"x":555,"y":575},{"type":"mouseup","time":2282,"x":555,"y":575},{"time":2283,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2292,"x":555,"y":575},{"type":"screenshot","time":3760}],"scrollY":2165,"scrollX":0,"timestamp":1571901532442},{"name":"Action 3","ops":[{"type":"mousemove","time":279,"x":795,"y":280},{"type":"mousemove","time":492,"x":680,"y":160},{"type":"mousemove","time":694,"x":522,"y":147},{"type":"mousemove","time":895,"x":444,"y":144},{"type":"mousemove","time":1123,"x":424,"y":130},{"type":"mousedown","time":1302,"x":423,"y":129},{"type":"mousemove","time":1342,"x":423,"y":129},{"type":"mouseup","time":1445,"x":423,"y":129},{"time":1446,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":2669,"x":423,"y":129},{"type":"mouseup","time":2783,"x":423,"y":129},{"time":2784,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3343,"x":416,"y":129},{"type":"mousemove","time":3543,"x":342,"y":132},{"type":"mousemove","time":3743,"x":339,"y":127},{"type":"mousedown","time":3886,"x":343,"y":123},{"type":"mousemove","time":3952,"x":343,"y":123},{"type":"mouseup","time":4020,"x":343,"y":123},{"time":4021,"delay":400,"type":"screenshot-auto"}],"scrollY":1318,"scrollX":0,"timestamp":1572262476188}]
\ No newline at end of file