You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2018/04/26 18:57:50 UTC

[incubator-echarts] branch master updated: Fix axis extent when stack series exists.

This is an automated email from the ASF dual-hosted git repository.

sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git


The following commit(s) were added to refs/heads/master by this push:
     new 6d3114b  Fix axis extent when stack series exists.
6d3114b is described below

commit 6d3114b16669625ba093df79afcc30cd447f4fc6
Author: sushuang <su...@gmail.com>
AuthorDate: Fri Apr 27 02:57:27 2018 +0800

    Fix axis extent when stack series exists.
---
 src/chart/line/helper.js             |   4 +-
 src/component/marker/markerHelper.js |   2 +-
 src/coord/cartesian/Grid.js          |   8 +-
 src/coord/polar/polarCreator.js      |  10 +-
 src/data/helper/dataStackHelper.js   |  28 +++--
 src/helper.js                        |   9 +-
 src/layout/barGrid.js                |   2 +-
 src/layout/barPolar.js               |   2 +-
 src/layout/points.js                 |   4 +-
 test/area-stack.html                 | 210 +++++++++++++++++++++++++++++++++--
 10 files changed, 246 insertions(+), 33 deletions(-)

diff --git a/src/chart/line/helper.js b/src/chart/line/helper.js
index 316980b..46f4966 100644
--- a/src/chart/line/helper.js
+++ b/src/chart/line/helper.js
@@ -42,10 +42,10 @@ export function prepareDataCoordInfo(coordSys, data, valueOrigin) {
 
     var stacked;
     var stackResultDim = data.getCalculationInfo('stackResultDimension');
-    if (stacked |= isDimensionStacked(data, dims[0], dims[1])) { // jshint ignore:line
+    if (stacked |= isDimensionStacked(data, dims[0] /*, dims[1]*/)) { // jshint ignore:line
         dims[0] = stackResultDim;
     }
-    if (stacked |= isDimensionStacked(data, dims[1], dims[0])) { // jshint ignore:line
+    if (stacked |= isDimensionStacked(data, dims[1] /*, dims[0]*/)) { // jshint ignore:line
         dims[1] = stackResultDim;
     }
 
diff --git a/src/component/marker/markerHelper.js b/src/component/marker/markerHelper.js
index 830d263..6e9caff 100644
--- a/src/component/marker/markerHelper.js
+++ b/src/component/marker/markerHelper.js
@@ -60,7 +60,7 @@ function markerTypeCalculatorWithExtent(
 ) {
     var coordArr = [];
 
-    var stacked = isDimensionStacked(data, targetDataDim, otherDataDim);
+    var stacked = isDimensionStacked(data, targetDataDim /*, otherDataDim*/);
     var calcDataDim = stacked
         ? data.getCalculationInfo('stackResultDimension')
         : targetDataDim;
diff --git a/src/coord/cartesian/Grid.js b/src/coord/cartesian/Grid.js
index 6ce5812..a98181c 100644
--- a/src/coord/cartesian/Grid.js
+++ b/src/coord/cartesian/Grid.js
@@ -35,6 +35,7 @@ import {
 import Cartesian2D from './Cartesian2D';
 import Axis2D from './Axis2D';
 import CoordinateSystem from '../../CoordinateSystem';
+import {getStackedDimension} from '../../data/helper/dataStackHelper';
 
 // Depends on GridModel, AxisModel, which performs preprocess.
 import './GridModel';
@@ -491,7 +492,12 @@ gridProto._updateScale = function (ecModel, gridModel) {
 
     function unionExtent(data, axis, seriesModel) {
         each(data.mapDimension(axis.dim, true), function (dim) {
-            axis.scale.unionExtentFromData(data, dim);
+            axis.scale.unionExtentFromData(
+                // For example, the extent of the orginal dimension
+                // is [0.1, 0.5], the extent of the `stackResultDimension`
+                // is [7, 9], the final extent should not include [0.1, 0.5].
+                data, getStackedDimension(data, dim)
+            );
         });
     }
 };
diff --git a/src/coord/polar/polarCreator.js b/src/coord/polar/polarCreator.js
index 2c96c10..d8f93e8 100644
--- a/src/coord/polar/polarCreator.js
+++ b/src/coord/polar/polarCreator.js
@@ -28,8 +28,8 @@ import {
     niceScaleExtent
 } from '../../coord/axisHelper';
 import CoordinateSystem from '../../CoordinateSystem';
+import {getStackedDimension} from '../../data/helper/dataStackHelper';
 
-// 依赖 PolarModel 做预处理
 import './PolarModel';
 
 /**
@@ -68,10 +68,14 @@ function updatePolarScale(ecModel, api) {
         if (seriesModel.coordinateSystem === polar) {
             var data = seriesModel.getData();
             zrUtil.each(data.mapDimension('radius', true), function (dim) {
-                radiusAxis.scale.unionExtentFromData(data, dim);
+                radiusAxis.scale.unionExtentFromData(
+                    data, getStackedDimension(data, dim)
+                );
             });
             zrUtil.each(data.mapDimension('angle', true), function (dim) {
-                angleAxis.scale.unionExtentFromData(data, dim);
+                angleAxis.scale.unionExtentFromData(
+                    data, getStackedDimension(data, dim)
+                );
             });
         }
     });
diff --git a/src/data/helper/dataStackHelper.js b/src/data/helper/dataStackHelper.js
index 64e185d..e470edc 100644
--- a/src/data/helper/dataStackHelper.js
+++ b/src/data/helper/dataStackHelper.js
@@ -130,15 +130,27 @@ export function enableDataStack(seriesModel, dimensionInfoList, opt) {
 /**
  * @param {module:echarts/data/List} data
  * @param {string} stackedDim
+ */
+export function isDimensionStacked(data, stackedDim /*, stackedByDim*/) {
+    // Each single series only maps to one pair of axis. So we do not need to
+    // check stackByDim, whatever stacked by a dimension or stacked by index.
+    return !!stackedDim && stackedDim === data.getCalculationInfo('stackedDimension');
+        // && (
+        //     stackedByDim != null
+        //         ? stackedByDim === data.getCalculationInfo('stackedByDimension')
+        //         : data.getCalculationInfo('isStackedByIndex')
+        // );
+}
+
+/**
+ * @param {module:echarts/data/List} data
+ * @param {string} targetDim
  * @param {string} [stackedByDim] If not input this parameter, check whether
  *                                stacked by index.
+ * @return {string} dimension
  */
-export function isDimensionStacked(data, stackedDim, stackedByDim) {
-    return stackedDim
-        && stackedDim === data.getCalculationInfo('stackedDimension')
-        && (
-            stackedByDim != null
-                ? stackedByDim === data.getCalculationInfo('stackedByDimension')
-                : data.getCalculationInfo('isStackedByIndex')
-        );
+export function getStackedDimension(data, targetDim) {
+    return isDimensionStacked(data, targetDim)
+        ? data.getCalculationInfo('stackResultDimension')
+        : targetDim;
 }
diff --git a/src/helper.js b/src/helper.js
index 0807fc9..c7066c0 100644
--- a/src/helper.js
+++ b/src/helper.js
@@ -24,7 +24,11 @@ import * as axisHelper from './coord/axisHelper';
 import axisModelCommonMixin from './coord/axisModelCommonMixin';
 import Model from './model/Model';
 import {getLayoutRect} from './util/layout';
-import {enableDataStack, isDimensionStacked} from './data/helper/dataStackHelper';
+import {
+    enableDataStack,
+    isDimensionStacked,
+    getStackedDimension
+} from './data/helper/dataStackHelper';
 
 /**
  * Create a muti dimension List structure from seriesModel.
@@ -52,7 +56,8 @@ export {default as createDimensions} from './data/helper/createDimensions';
 
 export var dataStack = {
     isDimensionStacked: isDimensionStacked,
-    enableDataStack: enableDataStack
+    enableDataStack: enableDataStack,
+    getStackedDimension: getStackedDimension
 };
 
 /**
diff --git a/src/layout/barGrid.js b/src/layout/barGrid.js
index adf31e5..e5ca44d 100644
--- a/src/layout/barGrid.js
+++ b/src/layout/barGrid.js
@@ -284,7 +284,7 @@ export function layout(seriesType, ecModel) {
 
         var valueDim = data.mapDimension(valueAxis.dim);
         var baseDim = data.mapDimension(baseAxis.dim);
-        var stacked = isDimensionStacked(data, valueDim, baseDim);
+        var stacked = isDimensionStacked(data, valueDim /*, baseDim*/);
         var isValueAxisH = valueAxis.isHorizontal();
 
         var valueAxisStart = getValueAxisStart(baseAxis, valueAxis, stacked);
diff --git a/src/layout/barPolar.js b/src/layout/barPolar.js
index 9d46ebe..a08e022 100644
--- a/src/layout/barPolar.js
+++ b/src/layout/barPolar.js
@@ -81,7 +81,7 @@ function barLayoutPolar(seriesType, ecModel, api) {
 
         var valueDim = data.mapDimension(valueAxis.dim);
         var baseDim = data.mapDimension(baseAxis.dim);
-        var stacked = isDimensionStacked(data, valueDim, baseDim);
+        var stacked = isDimensionStacked(data, valueDim /*, baseDim*/);
 
         var valueAxisStart = valueAxis.getExtent()[0];
 
diff --git a/src/layout/points.js b/src/layout/points.js
index 485e23b..d8ee940 100644
--- a/src/layout/points.js
+++ b/src/layout/points.js
@@ -43,10 +43,10 @@ export default function (seriesType) {
             var dimLen = dims.length;
 
             var stackResultDim = data.getCalculationInfo('stackResultDimension');
-            if (isDimensionStacked(data, dims[0], dims[1])) {
+            if (isDimensionStacked(data, dims[0] /*, dims[1]*/)) {
                 dims[0] = stackResultDim;
             }
-            if (isDimensionStacked(data, dims[1], dims[0])) {
+            if (isDimensionStacked(data, dims[1] /*, dims[0]*/)) {
                 dims[1] = stackResultDim;
             }
 
diff --git a/test/area-stack.html b/test/area-stack.html
index 8d6d81d..bfef3a1 100644
--- a/test/area-stack.html
+++ b/test/area-stack.html
@@ -1,30 +1,40 @@
 <html>
     <head>
         <meta charset="utf-8">
-        <script src="http://requirejs.org/docs/release/2.2.0/minified/require.js"></script>
+        <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>
+        <link rel="stylesheet" href="lib/reset.css" />
         <meta name="viewport" content="user-scalable=no,width=device-width,height=device-height">
     </head>
     <body>
         <style>
-            html, body, #main {
-                width: 100%;
-                height: 100%;
+            .test-title {
+                background: #146402;
+                color: #fff;
             }
         </style>
-        <div id="main"></div>
+
+        <div id="main0"></div>
+        <div id="main1"></div>
+
+
+
+
+
+
+
+
+
         <script>
 
             require([
                 'echarts'
-                // 'echarts/chart/line',
-                // 'echarts/component/legend',
-                // 'echarts/component/gridSimple',
-                // 'echarts/component/tooltip',
-                // 'zrender/vml/vml'
             ], function (echarts) {
 
-                var chart = echarts.init(document.getElementById('main'));
+                var chart = echarts.init(document.getElementById('main0'));
 
                 var xAxisData = [];
                 var data1 = [];
@@ -97,7 +107,7 @@
                     }
                 };
 
-                chart.setOption({
+                var option = {
                     legend: {
                     },
                     toolbox: {
@@ -210,9 +220,185 @@
                         connectNulls: false,
                         smooth: true
                     }]
+                };
+
+                testHelper.create(echarts, 'main0', {
+                    title: 'line break',
+                    option: option,
+                    height: 600
                 });
+
             })
 
         </script>
+
+
+
+
+
+
+
+
+
+
+        <script>
+
+            require([
+                'echarts'/*, 'map/js/china' */
+            ], function (echarts) {
+
+                var xAxisData = ["2018-04-11 13:30:00","2018-04-11 13:45:00","2018-04-11 14:00:00","2018-04-11 14:30:00","2018-04-11 14:45:00","2018-04-11 15:00:00","2018-04-11 15:15:00","2018-04-11 15:30:00","2018-04-11 15:45:00","2018-04-12 09:30:00","2018-04-12 09:45:00","2018-04-12 10:00:00","2018-04-12 10:15:00","2018-04-12 10:30:00","2018-04-12 10:45:00","2018-04-12 11:00:00","2018-04-12 11:15:00","2018-04-12 11:30:00","2018-04-12 11:45:00","2018-04-12 12:00:00","2018-04-12 12:15:0 [...]
+                var dataUpper = [6.89,6.9,6.9,6.9,6.89,6.87,6.86,6.83,6.8,6.78,6.75,6.71,6.67,6.65,6.64,6.62,6.61,6.6,6.6,6.61,6.65,6.67,6.68,6.69,6.72,6.74,6.79,6.83,6.87,6.9,6.93,6.95,6.98,6.99,7.01,7.01,7.02,7.02,7,7,7.02,7.01,7.01,7,6.98,6.97,6.97,6.97,6.97,6.97,6.97,6.97,6.98,6.98,6.98,6.99,6.99,6.99,6.99,6.99,6.98,6.97,6.97,6.97,6.97,6.99];
+                var dataMiddle = [6.7,6.69,6.67,6.66,6.64,6.63,6.61,6.6,6.59,6.58,6.57,6.56,6.55,6.54,6.54,6.53,6.53,6.53,6.52,6.53,6.53,6.54,6.55,6.56,6.58,6.59,6.61,6.62,6.64,6.65,6.67,6.68,6.7,6.72,6.73,6.75,6.77,6.78,6.81,6.82,6.84,6.85,6.86,6.87,6.88,6.89,6.89,6.89,6.89,6.89,6.89,6.89,6.89,6.9,6.9,6.9,6.91,6.91,6.91,6.91,6.9,6.91,6.9,6.9,6.9,6.89];
+                var dataLower = [6.51,6.48,6.45,6.42,6.4,6.38,6.37,6.37,6.38,6.38,6.39,6.4,6.43,6.43,6.44,6.44,6.45,6.45,6.45,6.44,6.42,6.42,6.42,6.43,6.44,6.44,6.42,6.41,6.4,6.4,6.4,6.41,6.42,6.44,6.46,6.49,6.52,6.54,6.61,6.65,6.66,6.68,6.71,6.75,6.77,6.8,6.81,6.81,6.81,6.81,6.81,6.81,6.81,6.81,6.82,6.82,6.82,6.82,6.82,6.82,6.83,6.84,6.84,6.83,6.83,6.79];
+
+                dataUpper = dataUpper.map(function (value, index) {
+                    return value - dataMiddle[index];
+                });
+                dataMiddle = dataMiddle.map(function (value, index) {
+                    return value - dataLower[index];
+                });
+
+                var option = {
+                    "series": [
+                        {
+                            "smooth": true,
+                            "lineStyle": {
+                                "normal": {
+                                    "opacity": 0.5,
+                                    "width": 1
+                                }
+                            },
+                            "name": "range",
+                            "id": "lower",
+                            "stack": "range",
+                            "data": dataLower,
+                            "type": "line",
+                            "showSymbol": false
+                        },
+                        {
+                            "smooth": true,
+                            "lineStyle": {
+                                "normal": {
+                                    "opacity": 0.5,
+                                    "width": 1
+                                }
+                            },
+                            "name": "range",
+                            "id": "middle",
+                            "stack": "range",
+                            "data": dataMiddle,
+                            "areaStyle": {
+                                "normal": {
+                                    "color": "rgba(102, 202, 196, .3)"
+                                }
+                            },
+                            "type": "line",
+                            "showSymbol": false
+                        },
+                        {
+                            "smooth": true,
+                            "lineStyle": {
+                                "normal": {
+                                    "opacity": 0.5,
+                                    "width": 1
+                                }
+                            },
+                            "name": "range",
+                            "id": "upper",
+                            "stack": "range",
+                            "data": dataUpper,
+                            "areaStyle": {
+                                "normal": {
+                                    "color": "rgba(102, 202, 196, .3)"
+                                }
+                            },
+                            "type": "line",
+                            "showSymbol": false
+                        }
+                    ],
+                    "tooltip": {
+                        "trigger": "axis"
+                    },
+                    "grid": [
+                        {
+                            "containLabel": false,
+                            "show": false
+                        }
+                    ],
+                    "xAxis": [
+                        {
+                            "type": "category",
+                            "boundaryGap": true,
+                            "max": "dataMax",
+                            "axisLabel": {
+                                "show": false
+                            },
+                            "axisLine": {
+                                "show": false
+                            },
+                            "axisTick": {
+                                "show": false
+                            },
+                            "splitLine": {
+                                "show": true,
+                                "lineStyle": {
+                                    "color": "#edeff2"
+                                }
+                            },
+                            "data": xAxisData
+                        }
+                    ],
+                    "yAxis": [
+                        {
+                            "scale": true,
+                            "boundaryGap": [
+                                "5%",
+                                "5%"
+                            ],
+                            "splitArea": {
+                                "show": false
+                            },
+                            "axisLabel": {
+                                "color": "#32325d",
+                                "fontFamily": "rubiklight",
+                                "fontSize": 14,
+                                "showMinLabel": false,
+                                "showMaxLabel": false
+                            },
+                            "axisLine": {
+                                "lineStyle": {
+                                    "color": "#32325d"
+                                }
+                            },
+                            "splitLine": {
+                                "lineStyle": {
+                                    "color": "#edeff2"
+                                }
+                            },
+                            "position": "right"
+                        }
+                    ],
+                    "axisPointer": {
+                        "link": {
+                            "xAxis": "all"
+                        },
+                        "lineStyle": {
+                            "color": "#c3c6c9",
+                            "type": "dotted"
+                        }
+                    }
+                };
+
+
+                testHelper.create(echarts, 'main1', {
+                    title: 'yAxis extent should not contain 0 (should about [5, 8])',
+                    option: option
+                });
+            });
+
+        </script>
+
+
     </body>
 </html>
\ No newline at end of file

-- 
To stop receiving notification emails like this one, please contact
sushuang@apache.org.

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org