Merge branch 'master' into fix-code-style-11965

src/chart/helper/EffectLine.js

@@ -87,6 +87,7 @@ effectLineProto._updateEffectSymbol = function (lineData, idx) {
     symbol.attr('scale', size);
 
     this._symbolType = symbolType;
+    this._symbolScale = size;
 
     this._updateEffectAnimation(lineData, effectModel, idx);
 };
@@ -177,6 +178,7 @@ effectLineProto.updateSymbolPosition = function (symbol) {
     var cp1 = symbol.__cp1;
     var t = symbol.__t;
     var pos = symbol.position;
+    var lastPos = [pos[0], pos[1]];
     var quadraticAt = curveUtil.quadraticAt;
     var quadraticDerivativeAt = curveUtil.quadraticDerivativeAt;
     pos[0] = quadraticAt(p1[0], cp1[0], p2[0], t);
@@ -187,7 +189,27 @@ effectLineProto.updateSymbolPosition = function (symbol) {
     var ty = quadraticDerivativeAt(p1[1], cp1[1], p2[1], t);
 
     symbol.rotation = -Math.atan2(ty, tx) - Math.PI / 2;
-
+    // enable continuity trail for 'line', 'rect', 'roundRect' symbolType
+    if (this._symbolType === 'line' || this._symbolType === 'rect' || this._symbolType === 'roundRect') {
+        if (symbol.__lastT !== undefined && symbol.__lastT < symbol.__t) {
+            var scaleY = vec2.dist(lastPos, pos) * 1.05;
+            symbol.attr('scale', [symbol.scale[0], scaleY]);
+            // make sure the last segment render within endPoint
+            if (t === 1) {
+                pos[0] = lastPos[0] + (pos[0] - lastPos[0]) / 2;
+                pos[1] = lastPos[1] + (pos[1] - lastPos[1]) / 2;
+            }
+        }
+        else if (symbol.__lastT === 1) {
+            // After first loop, symbol.__t does NOT start with 0, so connect p1 to pos directly.
+            var scaleY = 2 * vec2.dist(p1, pos);
+            symbol.attr('scale', [symbol.scale[0], scaleY ]);
+        }
+        else {
+            symbol.attr('scale', this._symbolScale);
+        }
+    }
+    symbol.__lastT = symbol.__t;
     symbol.ignore = false;
 };
 

src/chart/radar/RadarSeries.js

@@ -61,6 +61,28 @@ var RadarSeries = SeriesModel.extend({
             }).join('<br />');
     },
 
+    /**
+     * @implement
+     */
+    getTooltipPosition: function (dataIndex) {
+        if (dataIndex != null) {
+            var data = this.getData();
+            var coordSys = this.coordinateSystem;
+            var values = data.getValues(
+                zrUtil.map(coordSys.dimensions, function (dim) {
+                    return data.mapDimension(dim);
+                }), dataIndex, true
+            );
+
+            for (var i = 0, len = values.length; i < len; i++) {
+                if (!isNaN(values[i])) {
+                    var indicatorAxis = coordSys._indicatorAxes[i];
+                    return coordSys.coordToPoint(indicatorAxis.dataToCoord(values[i]), i);
+                }
+            }
+        }
+    },
+
     defaultOption: {
         zlevel: 0,
         z: 2,

src/component/axis/CartesianAxisView.js

@@ -22,6 +22,7 @@ import * as graphic from '../../util/graphic';
 import AxisBuilder from './AxisBuilder';
 import AxisView from './AxisView';
 import * as cartesianAxisHelper from '../../coord/cartesian/cartesianAxisHelper';
+import {rectCoordAxisBuildSplitArea, rectCoordAxisHandleRemove} from './axisSplitHelper';
 
 var axisBuilderAttrs = [
     'axisLine', 'axisTickLabel', 'axisName'
@@ -74,7 +75,7 @@ var CartesianAxisView = AxisView.extend({
     },
 
     remove: function () {
-        this._splitAreaColors = null;
+        rectCoordAxisHandleRemove(this);
     },
 
     /**
@@ -206,91 +207,7 @@ var CartesianAxisView = AxisView.extend({
      * @private
      */
     _splitArea: function (axisModel, gridModel) {
-        var axis = axisModel.axis;
-
-        if (axis.scale.isBlank()) {
-            return;
-        }
-
-        var splitAreaModel = axisModel.getModel('splitArea');
-        var areaStyleModel = splitAreaModel.getModel('areaStyle');
-        var areaColors = areaStyleModel.get('color');
-
-        var gridRect = gridModel.coordinateSystem.getRect();
-
-        var ticksCoords = axis.getTicksCoords({
-            tickModel: splitAreaModel,
-            clamp: true
-        });
-
-        if (!ticksCoords.length) {
-            return;
-        }
-
-        // For Making appropriate splitArea animation, the color and anid
-        // should be corresponding to previous one if possible.
-        var areaColorsLen = areaColors.length;
-        var lastSplitAreaColors = this._splitAreaColors;
-        var newSplitAreaColors = zrUtil.createHashMap();
-        var colorIndex = 0;
-        if (lastSplitAreaColors) {
-            for (var i = 0; i < ticksCoords.length; i++) {
-                var cIndex = lastSplitAreaColors.get(ticksCoords[i].tickValue);
-                if (cIndex != null) {
-                    colorIndex = (cIndex + (areaColorsLen - 1) * i) % areaColorsLen;
-                    break;
-                }
-            }
-        }
-
-        var prev = axis.toGlobalCoord(ticksCoords[0].coord);
-
-        var areaStyle = areaStyleModel.getAreaStyle();
-        areaColors = zrUtil.isArray(areaColors) ? areaColors : [areaColors];
-
-        for (var i = 1; i < ticksCoords.length; i++) {
-            var tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);
-
-            var x;
-            var y;
-            var width;
-            var height;
-            if (axis.isHorizontal()) {
-                x = prev;
-                y = gridRect.y;
-                width = tickCoord - x;
-                height = gridRect.height;
-                prev = x + width;
-            }
-            else {
-                x = gridRect.x;
-                y = prev;
-                width = gridRect.width;
-                height = tickCoord - y;
-                prev = y + height;
-            }
-
-            var tickValue = ticksCoords[i - 1].tickValue;
-            tickValue != null && newSplitAreaColors.set(tickValue, colorIndex);
-
-            this._axisGroup.add(new graphic.Rect({
-                anid: tickValue != null ? 'area_' + tickValue : null,
-                shape: {
-                    x: x,
-                    y: y,
-                    width: width,
-                    height: height
-                },
-                style: zrUtil.defaults({
-                    fill: areaColors[colorIndex]
-                }, areaStyle),
-                silent: true
-            }));
-
-            colorIndex = (colorIndex + 1) % areaColorsLen;
-        }
-
-        this._splitAreaColors = newSplitAreaColors;
+        rectCoordAxisBuildSplitArea(this, this._axisGroup, axisModel, gridModel);
     }
 });
 

src/component/axis/SingleAxisView.js

@@ -23,12 +23,13 @@ import AxisBuilder from './AxisBuilder';
 import * as graphic from '../../util/graphic';
 import * as singleAxisHelper from '../../coord/single/singleAxisHelper';
 import AxisView from './AxisView';
+import {rectCoordAxisBuildSplitArea, rectCoordAxisHandleRemove} from './axisSplitHelper';
 
 var axisBuilderAttrs = [
     'axisLine', 'axisTickLabel', 'axisName'
 ];
 
-var selfBuilderAttr = 'splitLine';
+var selfBuilderAttrs = ['splitArea', 'splitLine'];
 
 var SingleAxisView = AxisView.extend({
 
@@ -42,21 +43,33 @@ var SingleAxisView = AxisView.extend({
 
         group.removeAll();
 
+        var oldAxisGroup = this._axisGroup;
+        this._axisGroup = new graphic.Group();
+
         var layout = singleAxisHelper.layout(axisModel);
 
         var axisBuilder = new AxisBuilder(axisModel, layout);
 
         zrUtil.each(axisBuilderAttrs, axisBuilder.add, axisBuilder);
 
+        group.add(this._axisGroup);
         group.add(axisBuilder.getGroup());
 
-        if (axisModel.get(selfBuilderAttr + '.show')) {
-            this['_' + selfBuilderAttr](axisModel);
-        }
+        zrUtil.each(selfBuilderAttrs, function (name) {
+            if (axisModel.get(name + '.show')) {
+                this['_' + name](axisModel);
+            }
+        }, this);
+
+        graphic.groupTransition(oldAxisGroup, this._axisGroup, axisModel);
 
         SingleAxisView.superCall(this, 'render', axisModel, ecModel, api, payload);
     },
 
+    remove: function () {
+        rectCoordAxisHandleRemove(this);
+    },
+
     _splitLine: function (axisModel) {
         var axis = axisModel.axis;
 
@@ -125,6 +138,10 @@ var SingleAxisView = AxisView.extend({
                 silent: true
             }));
         }
+    },
+
+    _splitArea: function (axisModel) {
+        rectCoordAxisBuildSplitArea(this, this._axisGroup, axisModel, axisModel);
     }
 });
 

src/component/axis/axisSplitHelper.js

+/*
+* 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.
+*/
+
+import * as zrUtil from 'zrender/src/core/util';
+import * as graphic from '../../util/graphic';
+
+
+export function rectCoordAxisBuildSplitArea(axisView, axisGroup, axisModel, gridModel) {
+    var axis = axisModel.axis;
+
+    if (axis.scale.isBlank()) {
+        return;
+    }
+
+    var splitAreaModel = axisModel.getModel('splitArea');
+    var areaStyleModel = splitAreaModel.getModel('areaStyle');
+    var areaColors = areaStyleModel.get('color');
+
+    var gridRect = gridModel.coordinateSystem.getRect();
+
+    var ticksCoords = axis.getTicksCoords({
+        tickModel: splitAreaModel,
+        clamp: true
+    });
+
+    if (!ticksCoords.length) {
+        return;
+    }
+
+    // For Making appropriate splitArea animation, the color and anid
+    // should be corresponding to previous one if possible.
+    var areaColorsLen = areaColors.length;
+    var lastSplitAreaColors = axisView.__splitAreaColors;
+    var newSplitAreaColors = zrUtil.createHashMap();
+    var colorIndex = 0;
+    if (lastSplitAreaColors) {
+        for (var i = 0; i < ticksCoords.length; i++) {
+            var cIndex = lastSplitAreaColors.get(ticksCoords[i].tickValue);
+            if (cIndex != null) {
+                colorIndex = (cIndex + (areaColorsLen - 1) * i) % areaColorsLen;
+                break;
+            }
+        }
+    }
+
+    var prev = axis.toGlobalCoord(ticksCoords[0].coord);
+
+    var areaStyle = areaStyleModel.getAreaStyle();
+    areaColors = zrUtil.isArray(areaColors) ? areaColors : [areaColors];
+
+    for (var i = 1; i < ticksCoords.length; i++) {
+        var tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);
+
+        var x;
+        var y;
+        var width;
+        var height;
+        if (axis.isHorizontal()) {
+            x = prev;
+            y = gridRect.y;
+            width = tickCoord - x;
+            height = gridRect.height;
+            prev = x + width;
+        }
+        else {
+            x = gridRect.x;
+            y = prev;
+            width = gridRect.width;
+            height = tickCoord - y;
+            prev = y + height;
+        }
+
+        var tickValue = ticksCoords[i - 1].tickValue;
+        tickValue != null && newSplitAreaColors.set(tickValue, colorIndex);
+
+        axisGroup.add(new graphic.Rect({
+            anid: tickValue != null ? 'area_' + tickValue : null,
+            shape: {
+                x: x,
+                y: y,
+                width: width,
+                height: height
+            },
+            style: zrUtil.defaults({
+                fill: areaColors[colorIndex]
+            }, areaStyle),
+            silent: true
+        }));
+
+        colorIndex = (colorIndex + 1) % areaColorsLen;
+    }
+
+    axisView.__splitAreaColors = newSplitAreaColors;
+}
+
+export function rectCoordAxisHandleRemove(axisView) {
+    axisView.__splitAreaColors = null;
+}

src/component/legend/ScrollableLegendView.js

@@ -459,29 +459,28 @@ var ScrollableLegendView = LegendView.extend({
     },
 
     _findTargetItemIndex: function (targetDataIndex) {
+        if (!this._showController) {
+            return 0;
+        }
+
         var index;
         var contentGroup = this.getContentGroup();
         var defaultIndex;
 
-        if (this._showController) {
-            contentGroup.eachChild(function (child, idx) {
-                var legendDataIdx = child.__legendDataIndex;
-                // FIXME
-                // If the given targetDataIndex (from model) is illegal,
-                // we use defualtIndex. But the index on the legend model and
-                // action payload is still illegal. That case will not be
-                // changed until some scenario requires.
-                if (defaultIndex == null && legendDataIdx != null) {
-                    defaultIndex = idx;
-                }
-                if (legendDataIdx === targetDataIndex) {
-                    index = idx;
-                }
-            });
-        }
-        else {
-            return 0;
-        }
+        contentGroup.eachChild(function (child, idx) {
+            var legendDataIdx = child.__legendDataIndex;
+            // FIXME
+            // If the given targetDataIndex (from model) is illegal,
+            // we use defualtIndex. But the index on the legend model and
+            // action payload is still illegal. That case will not be
+            // changed until some scenario requires.
+            if (defaultIndex == null && legendDataIdx != null) {
+                defaultIndex = idx;
+            }
+            if (legendDataIdx === targetDataIndex) {
+                index = idx;
+            }
+        });
 
         return index != null ? index : defaultIndex;
     }

test/geo-lines.html

@@ -232,9 +232,10 @@ under the License.
                         zlevel: 1,
                         effect: {
                             show: true,
-                            period: 6,
+                            period: 1,
                             trailLength: 0.7,
                             color: '#fff',
+                            symbol: 'line',
                             symbolSize: 3
                         },
                         lineStyle: {
@@ -254,7 +255,7 @@ under the License.
                         symbolSize: 10,
                         effect: {
                             show: true,
-                            period: 6,
+                            period: 1,
                             trailLength: 0,
                             symbol: planePath,
                             symbolSize: 15

test/graphic-draggable.html

+<!DOCTYPE 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">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <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" />
+    </head>
+    <body>
+        <div id="main0"></div>
+
+
+        <script>
+        require(['echarts'], function (echarts) {
+            var option;
+
+            option = {
+                graphic: [{
+                    elements: [{
+                        type: 'rect',
+                        shape: {
+                            x: -50, y: -50, width: 100, height: 100
+                        },
+                        style: {
+                            fill: 'blue'
+                        },
+                        position: [200, 200],
+                        rotation: 1,
+                        cursor: 'move',
+                        draggable: true
+                    }, {
+                        type: 'circle',
+                        shape: {
+                            cx: 100, cy: 100, r: 50
+                        },
+                        style: {
+                            fill: 'red'
+                        },
+                        rotation: 0.3,
+                        cursor: 'move',
+                        draggable: true
+                    }, {
+                        type: 'text',
+                        style: {
+                            text: 'DRAG ME',
+                            font: '20px sans-serif'
+                        },
+                        position: [300, 50],
+                        cursor: 'move',
+                        draggable: true
+                    }, {
+                        type: 'bezierCurve',
+                        shape: {
+                            x1: 10,
+                            y1: 10,
+                            x2: 100,
+                            y2: 10,
+                            cpx1: 60,
+                            cpy1: 100
+                        },
+                        style: {
+                            fill: 'green',
+                            lineWidth: 10
+                        },
+                        left: 300,
+                        bottom: 100,
+                        cursor: 'move',
+                        draggable: true
+                    }, {
+                        type: 'group',
+                        draggable: true,
+                        children: [{
+                            type: 'rect',
+                            shape: {
+                                x: -30, y: -30, width: 60, height: 60
+                            },
+                            style: {
+                                fill: '#aaa'
+                            },
+                            rotation: 2,
+                            cursor: 'move'
+                        }, {
+                            type: 'circle',
+                            shape: {
+                                cx: 40, cy: 0, r: 40
+                            },
+                            style: {
+                                fill: '#777'
+                            },
+                            cursor: 'move'
+                        }, {
+                            type: 'text',
+                            style: {
+                                x: 100,
+                                text: 'DRAG GROUP',
+                                textAlign: 'left',
+                                font: '16px sans-serif'
+                            },
+                            cursor: 'move'
+                        }],
+                        position: [500, 200]
+                    }]
+                },]
+            };
+
+            var chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'Draggable on different elements'
+                ],
+                option: option
+            });
+        });
+        </script>
+    </body>
+</html>
+

test/radar.html

@@ -93,10 +93,19 @@ under the License.
                         ]
                     }]
                 });
-
+                var theIndex = 2;
                 chart.on('click', function (params) {
-                    console.log(params)
-                })
+                    console.log(params);
+                    if (theIndex < 0) {
+                        theIndex = 2;
+                    }
+                    chart.dispatchAction({
+                        type: 'showTip',
+                        seriesIndex: 0,
+                        dataIndex: theIndex
+                    });
+                    theIndex--;
+                });
             });
 
         </script>

test/runTest/actions/__meta__.json

@@ -79,6 +79,7 @@
   "graph": 2,
   "graph-grid": 1,
   "graph-simple": 2,
+  "graphic-draggable": 1,
   "heatmap": 1,
   "heatmap-map": 1,
   "homepage3": 1,
@@ -112,7 +113,7 @@
   "polar-rounded": 3,
   "polarLine": 1,
   "polarScatter": 1,
-  "radar": 1,
+  "radar": 2,
   "radar2": 1,
   "radar3": 1,
   "radar4": 1,

test/runTest/actions/graphic-draggable.json

+[{"name":"Action 1","ops":[{"type":"mousedown","time":594,"x":140,"y":107},{"type":"mousemove","time":670,"x":140,"y":109},{"type":"mousemove","time":877,"x":123,"y":295},{"type":"mousemove","time":1094,"x":118,"y":389},{"type":"mouseup","time":1148,"x":118,"y":389},{"time":1149,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1303,"x":144,"y":348},{"type":"mousemove","time":1503,"x":210,"y":274},{"type":"mousedown","time":1645,"x":210,"y":272},{"type":"mousemove","time":1703,"x":205,"y":291},{"type":"mousemove","time":1903,"x":254,"y":428},{"type":"mousemove","time":2111,"x":296,"y":497},{"type":"mouseup","time":2144,"x":296,"y":497},{"time":2145,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2320,"x":339,"y":387},{"type":"mousemove","time":2521,"x":337,"y":380},{"type":"mousemove","time":2721,"x":272,"y":441},{"type":"mousedown","time":2878,"x":271,"y":441},{"type":"mousemove","time":2928,"x":271,"y":441},{"type":"mousemove","time":3138,"x":189,"y":231},{"type":"mousemove","time":3338,"x":145,"y":170},{"type":"mouseup","time":3496,"x":111,"y":160},{"time":3497,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3540,"x":111,"y":160},{"type":"mousemove","time":3746,"x":337,"y":293},{"type":"mousemove","time":3955,"x":344,"y":324},{"type":"mousedown","time":4063,"x":343,"y":326},{"type":"mousemove","time":4155,"x":265,"y":309},{"type":"mousemove","time":4356,"x":136,"y":296},{"type":"mouseup","time":4553,"x":128,"y":297},{"time":4554,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":4567,"x":128,"y":297},{"type":"mousemove","time":4773,"x":309,"y":170},{"type":"mousemove","time":4980,"x":330,"y":134},{"type":"mousemove","time":5197,"x":328,"y":123},{"type":"mousedown","time":5331,"x":328,"y":122},{"type":"mousemove","time":5406,"x":326,"y":125},{"type":"mousemove","time":5606,"x":264,"y":285},{"type":"mousemove","time":5816,"x":241,"y":331},{"type":"mouseup","time":5933,"x":241,"y":331},{"time":5934,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":6009,"x":241,"y":331},{"type":"mousemove","time":6209,"x":478,"y":276},{"type":"mousemove","time":6410,"x":509,"y":270},{"type":"mousedown","time":6615,"x":511,"y":268},{"type":"mousemove","time":6623,"x":511,"y":268},{"type":"mousemove","time":6826,"x":487,"y":272},{"type":"mousemove","time":7026,"x":428,"y":281},{"type":"mousemove","time":7232,"x":391,"y":283},{"type":"mouseup","time":7332,"x":391,"y":283},{"time":7333,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":7425,"x":390,"y":283},{"type":"mousemove","time":7625,"x":370,"y":274},{"type":"mousemove","time":7825,"x":362,"y":270},{"type":"mousedown","time":7884,"x":362,"y":270},{"type":"mousemove","time":8026,"x":312,"y":214},{"type":"mousemove","time":8226,"x":253,"y":123},{"type":"mousemove","time":8432,"x":253,"y":122},{"type":"mouseup","time":8505,"x":253,"y":122},{"time":8506,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":8593,"x":253,"y":122},{"type":"mousemove","time":8801,"x":426,"y":144},{"type":"mousemove","time":9010,"x":425,"y":139},{"type":"mousemove","time":9217,"x":425,"y":136},{"type":"mousedown","time":9269,"x":425,"y":136},{"type":"mousemove","time":9427,"x":404,"y":251},{"type":"mousemove","time":9627,"x":398,"y":309},{"type":"mouseup","time":10122,"x":398,"y":309},{"time":10123,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":10130,"x":396,"y":310},{"type":"mousemove","time":10335,"x":252,"y":338},{"type":"mousemove","time":10544,"x":236,"y":340},{"type":"mousemove","time":10744,"x":229,"y":335},{"type":"mousemove","time":10953,"x":223,"y":332},{"type":"mousemove","time":11161,"x":216,"y":332},{"type":"mousedown","time":11269,"x":215,"y":332},{"type":"mousemove","time":11362,"x":215,"y":332},{"type":"mousemove","time":11571,"x":335,"y":370},{"type":"mousemove","time":11778,"x":478,"y":383},{"type":"mousemove","time":11985,"x":496,"y":385},{"type":"mouseup","time":12130,"x":496,"y":385},{"time":12131,"delay":400,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1577774171449}]
\ No newline at end of file

test/runTest/actions/radar.json

-[{"name":"Action 1","ops":[{"type":"mousedown","time":340,"x":163,"y":20},{"type":"mouseup","time":450,"x":163,"y":20},{"time":451,"delay":500,"type":"screenshot-auto"},{"type":"mousemove","time":510,"x":168,"y":20},{"type":"mousemove","time":711,"x":320,"y":20},{"type":"mousemove","time":916,"x":339,"y":19},{"type":"mousedown","time":967,"x":339,"y":19},{"type":"mouseup","time":1060,"x":339,"y":19},{"time":1061,"delay":500,"type":"screenshot-auto"},{"type":"mousemove","time":1161,"x":341,"y":19},{"type":"mousemove","time":1361,"x":613,"y":16},{"type":"mousemove","time":1567,"x":643,"y":16},{"type":"mousedown","time":1619,"x":643,"y":16},{"type":"mouseup","time":1704,"x":643,"y":16},{"time":1705,"delay":500,"type":"screenshot-auto"},{"type":"mousedown","time":2574,"x":643,"y":16},{"type":"mouseup","time":2684,"x":643,"y":16},{"time":2685,"delay":500,"type":"screenshot-auto"},{"type":"mousemove","time":2761,"x":642,"y":16},{"type":"mousemove","time":2963,"x":564,"y":22},{"type":"mousemove","time":3163,"x":520,"y":20},{"type":"mousedown","time":3306,"x":517,"y":18},{"type":"mousemove","time":3372,"x":517,"y":18},{"type":"mouseup","time":3391,"x":517,"y":18},{"time":3392,"delay":500,"type":"screenshot-auto"},{"type":"mousemove","time":3820,"x":508,"y":19},{"type":"mousemove","time":4020,"x":227,"y":17},{"type":"mousedown","time":4182,"x":226,"y":17},{"type":"mousemove","time":4229,"x":226,"y":17},{"type":"mouseup","time":4285,"x":226,"y":17},{"time":4286,"delay":500,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1568043188752}]
\ No newline at end of file
+[{"name":"Action 1","ops":[{"type":"mousedown","time":340,"x":163,"y":20},{"type":"mouseup","time":450,"x":163,"y":20},{"time":451,"delay":500,"type":"screenshot-auto"},{"type":"mousemove","time":510,"x":168,"y":20},{"type":"mousemove","time":711,"x":320,"y":20},{"type":"mousemove","time":916,"x":339,"y":19},{"type":"mousedown","time":967,"x":339,"y":19},{"type":"mouseup","time":1060,"x":339,"y":19},{"time":1061,"delay":500,"type":"screenshot-auto"},{"type":"mousemove","time":1161,"x":341,"y":19},{"type":"mousemove","time":1361,"x":613,"y":16},{"type":"mousemove","time":1567,"x":643,"y":16},{"type":"mousedown","time":1619,"x":643,"y":16},{"type":"mouseup","time":1704,"x":643,"y":16},{"time":1705,"delay":500,"type":"screenshot-auto"},{"type":"mousedown","time":2574,"x":643,"y":16},{"type":"mouseup","time":2684,"x":643,"y":16},{"time":2685,"delay":500,"type":"screenshot-auto"},{"type":"mousemove","time":2761,"x":642,"y":16},{"type":"mousemove","time":2963,"x":564,"y":22},{"type":"mousemove","time":3163,"x":520,"y":20},{"type":"mousedown","time":3306,"x":517,"y":18},{"type":"mousemove","time":3372,"x":517,"y":18},{"type":"mouseup","time":3391,"x":517,"y":18},{"time":3392,"delay":500,"type":"screenshot-auto"},{"type":"mousemove","time":3820,"x":508,"y":19},{"type":"mousemove","time":4020,"x":227,"y":17},{"type":"mousedown","time":4182,"x":226,"y":17},{"type":"mousemove","time":4229,"x":226,"y":17},{"type":"mouseup","time":4285,"x":226,"y":17},{"time":4286,"delay":500,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1568043188752},{"name":"Action 2","ops":[{"type":"mousemove","time":600,"x":777,"y":264},{"type":"mousemove","time":806,"x":704,"y":236},{"type":"mousemove","time":933,"x":703,"y":232},{"type":"mousemove","time":1135,"x":688,"y":208},{"type":"mousemove","time":1333,"x":682,"y":201},{"type":"mousemove","time":1533,"x":682,"y":200},{"type":"mousemove","time":1737,"x":682,"y":197},{"type":"mousedown","time":1745,"x":682,"y":197},{"type":"mouseup","time":1908,"x":682,"y":197},{"time":1909,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2283,"x":682,"y":197},{"type":"mousedown","time":2325,"x":682,"y":196},{"type":"mouseup","time":2489,"x":682,"y":196},{"time":2490,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2497,"x":682,"y":196},{"type":"mousemove","time":2900,"x":682,"y":196},{"type":"mousedown","time":2940,"x":682,"y":196},{"type":"mouseup","time":3111,"x":682,"y":196},{"time":3112,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3499,"x":688,"y":199},{"type":"mousemove","time":3708,"x":798,"y":281}],"scrollY":0,"scrollX":0,"timestamp":1578309102517}]
\ No newline at end of file

test/singleAxisScales.html

@@ -108,7 +108,10 @@ under the License.
             singleAxis: [{
                 type: 'value',
                 id: 'a',
-                height: height
+                height: height,
+                splitArea: {
+                    show: true
+                }
             }, {
                 type: 'category',
                 id: 'b',
@@ -117,6 +120,9 @@ under the License.
                 axisPointer: {
                     type: 'shadow'
                 },
+                splitArea: {
+                    show: true
+                },
                 top: '27%'
             }, {
                 type: 'log',
@@ -128,10 +134,16 @@ under the License.
                         show: true
                     }
                 },
+                splitArea: {
+                    show: true
+                },
                 top: '55%'
             }, {
                 type: 'time',
                 id: 'd',
+                splitArea: {
+                    show: true
+                },
                 height: height,
                 top: '77%'
             }],