Merge pull request #12114 from apache/master

create release of 4.7.0

.github/pull_request_template.md

+<!-- Please fill in the following information to help us review your PR more efficiently. -->
+
+## Brief Information
+
+This pull request is in the type of:
+
+- [ ] bug fixing
+- [ ] new feature
+- [ ] others
+
+
+
+### What does this PR do?
+
+<!-- USE ONCE SENTENCE TO DESCRIBE WHAT THIS PR DOES. -->
+
+
+
+### Fixed issues
+
+<!--
+- #xxxx: ...
+-->
+
+
+## Details
+
+### Before: What was the problem?
+
+<!-- DESCRIBE THE BUG OR REQUIREMENT HERE. -->
+
+<!-- ADD SCREENSHOT HERE IF APPLICABLE. -->
+
+
+
+### After: How is it fixed in this PR?
+
+<!-- THE RESULT AFTER FIXING AND A SIMPLE EXPLANATION ABOUT HOW IT IS FIXED. -->
+
+<!-- ADD SCREENSHOT HERE IF APPLICABLE. -->
+
+
+
+## Usage
+
+### Are there any API changes?
+
+- [ ] The API has been changed.
+
+<!-- LIST THE API CHANGES HERE -->
+
+
+
+### Related test cases or examples to use the new APIs
+
+NA.
+
+
+
+## Others
+
+### Merging options
+
+- [ ] Please squash the commits into a single one when merge.
+
+### Other information

.github/workflows/nodejs.yml

@@ -21,11 +21,21 @@ jobs:
         run: |
           npm install
           npm install -g jshint
+          npm install git+https://github.com/ecomfe/zrender.git
+      - name: build zrender
+        run: |
+          cd node_modules/zrender
+          npm install
+          npm run prepublish
+          cd ../..
       - name: jshint
         run: |
           jshint
-      - name: build
+      - name: build release
         run: |
-          node build/build.js
+          npm run release
         env:
           CI: true
+      - name: unit test
+        run: |
+          npm run test

.gitignore

@@ -151,6 +151,7 @@ develop-eggs
 pip-log.txt
 
 # Unit test / coverage reports
+coverage
 .coverage
 .tox
 

CONTRIBUTING.md

@@ -2,7 +2,20 @@
 
 👍🎉 First off, thanks for taking the time to contribute! 🎉👍
 
-Please check out the [Apache Code of Conduct](https://www.apache.org/foundation/policies/conduct.html).
+Please check out the [Apache Code of Conduct](https://www.apache.org/foundation/policies/conduct.html) first.
+
+## What can you do for the ECharts community?
+
+Contributions can be made in varied ways:
+
+- Help others in the issues
+    - Help solve problems with the issues
+    - Remind the authors to provide a demo if they are reporting for a bug
+    - Try to reproduce the problem as describe in the issues
+- Make pull requests to fix bugs or implement new features
+- Mend or translate the documents
+- Discuss in the [mailing list](https://echarts.apache.org/en/maillist.html)
+- ...
 
 ## Issues
 
@@ -26,168 +39,11 @@ About our release plan, we will release a mior version at the end of every month
 
 ## Pull Requests
 
-### Finding Easy Issues to Fix
-
-You may use [difficulty: easy](https://github.com/apache/incubator-echarts/labels/difficulty%3A%20easy) label to filter issues that we think is easier to fix. These are issues that should be fixed using less time than the average. So if you wish to make some pull requests, this is where you can start with.
-
-You may also filter with [en](https://github.com/apache/incubator-echarts/issues?q=is%3Aopen+label%3A%22difficulty%3A+easy%22+label%3Aen) label for English issues only.
-
-### Coding Standard
-
-Please follow the [coding standard](https://echarts.apache.org/en/coding-standard.html) before you make any changes.
-
-### Git Message Standard
-
-(TBD)
-
-### Contact Us
-
-If you wish to fix a bug or add new features but don't know how, please discuss it with us in the [mailing list](dev@echarts.apache.org).
-
+Wiki: [How to make a pull request](https://github.com/apache/incubator-echarts/wiki/How-to-make-a-pull-request)
 
 ## How to Debug ECharts
 
-The following steps help you to set up a developing environment for ECharts.
-
-
-### 1. Clone ECharts project
-
-If you wish to make pull requests, you should **fork the ECharts project** first. Otherwise, just clone it locally.
-
-```bash
-git clone git@github.com:apache/incubator-echarts.git
-```
-
-[ZRender](https://github.com/ecomfe/zrender) is the rendering library under the hood. You need to clone it along with ECharts.
-
-```bash
-git clone git@github.com:ecomfe/zrender.git
-```
-
-We assume these projects are downloaded at `~/workspace/echarts` and `~/workspace/zrender`. But their locations can be arbitrary.
-
-
-### 2. Install dependencies
-
-```bash
-cd ~/workspace/echarts
-npm install
-cd ~/workspace/zrender
-npm install
-```
-
-Sometimes, in order to fix an issue within echarts, changes have to be made inside the codebase of zrender. To test any changes to zrender locally you can use npm's [npm link](https://docs.npmjs.com/cli/link.html) feature, for example:
-
-```bash
-cd ~/workspace/zrender
-npm link
-cd ~/workspace/echarts
-npm link zrender
-```
-
-With this, you can see that `~/workspace/echarts/node_modules/zrender` is a link to `~/workspace/zrender`.
-
-
-### 3. Run and debug
-
-To build the ECharts project and watch source file changes (including ZRender project) to rebuild:
-
-```bash
-cd ~/workspace/echarts
-node build/build.js --watch
-```
-
-To build once:
-
-```bash
-node build/build.js
-```
-
-Then, open the test cases under `~/workspace/echarts/test` in Web browser. You can add breakpoints under `src` directory. For example, in Chrome Inspect, it looks like:
-
-![Chrome inspect](./asset/contributing-inspect.png)
-
-
-### 4. Add test cases
-
-In most cases, one or more test cases should be added when developing a feature or fixing a bug.
-All of the existing test cases are in directory `~/workspace/echarts/test`.
-Check the file `~/workspace/echarts/test/dataZoom-action.html` as an example.
-
-**Organize test cases:**
-Each file can be regard as a **test suite** and each chart in the file can be regard as a **test case**,
-which contains one or multiple expected results (check points).
-If a feature or bug is related to a chart type or a component type, probably it should belongs to
-a test file named `chartOrComponentType-someSubCategory.html`. Or some common feature is related
-to multiple chart or component or has nothing to do with chart and component, probably it should
-belongs a test file named `featureName-someSubCateogory.html`.
-
-**The naming of a test file:**
-Generally speaking, the name of the test file should start with a chart type or component type
-or a common feature name (like "hoverStyle", "clip").
-
-**Add a test case:**
-If intending to add a test case, firstly try to find in the existing test files which file this
-new test case might belongs to.
-If an existing file found, add the test case to the file.
-Otherwise, add a new test file by commands as follows:
-
-```shell
-# Make a file named "bar-action.html" in directory "echarts/test" with 1 initial chart.
-npm run mktest bar-action
-# or `npm run mktest bar-action.html`
-
-# Make a file named "bar-action.html" in directory "echarts/test" with 5 initial charts.
-npm run mktest bar-action 5
-```
-
-**The expected results and the instructions of user interaction:**
-Although we have auto-visual-test tool to run tests, we should better write the expected result
-(check points) for each test cases for manual checking.
-Some cases need user interactions involved. The instructions should be written clearly.
-The expected results and the user instructions should be written in the `title` filed when
-creating a test by `testHelper.create` as follows:
-
-```js
-var chart = testHelper.create(echarts, 'main0', {
-    title: [
-        'Hover on the red circle',
-        '**A blue label** should appear on the **top of red circle**.'
-    ],
-    option: option
-});
-```
-
-
-### 5. Run test cases
-
-```bash
-# puppeteer is not in the devDependencies and needs to be installed manually
-npm install puppeteer --no-save
-npm run test:visual
-```
-
-It will run all the test cases under `~/workspace/echarts/test` automatically to compare with the previous version. You can use this to check if your code bring some breaking change.
-
-
-### 6. Check the code style
-
-The code style should follow the [Code Standard](https://echarts.apache.org/en/coding-standard.html).
-
-It is recommanded to install [eslint](https://eslint.org) plugin to in your IDE to find the invalid code style.
-Otherwise, we can also use
-```bash
-npm run lint
-```
-to check the the code style.
-
-
-### 7. Make a pull request
-
-Fork ECharts project into your own project. Checkout a branch from master branch named `fix-xxxx`, where xxxx is the issue id related. If there's no related issue, you need to create one in most cases to describe what's wrong or what new feature is required.
-
-If you are a committer of apache/incubator-echarts project, which means you have the write access to the project, you still need to push to a new branch (by `git push origin HEAD:refs/heads/fix-xxxx`) and use pull request to push your code. You cannot push code directly to `master` branch, otherwise it will be rejected by GitHub.
-
+Wiki: [How to setup the dev environment](https://github.com/apache/incubator-echarts/wiki/How-to-setup-the-dev-environment)
 
 ## Some hints about using code from other authors
 

NOTICE

 Apache ECharts (incubating)
-Copyright 2017-2019 The Apache Software Foundation
+Copyright 2017-2020 The Apache Software Foundation
 
 This product includes software developed at
 The Apache Software Foundation (http://www.apache.org/).

README.md

@@ -9,7 +9,7 @@ ECharts is a free, powerful charting and visualization library offering an easy
 Now ECharts is an incubator project of Apache Software Foundation.
 Please check its incubator status [here](http://incubator.apache.org/projects/echarts.html)
 
-**[中文官网](https://echarts.apache.org/zh/index.html)** | **[ENGLISH HOMEPAGE](https://echarts.apache.org/index.html)**
+**[中文官网](https://echarts.apache.org/zh/index.html)** | **[ENGLISH HOMEPAGE](https://echarts.apache.org/en/index.html)**
 
 [![Build Status](https://travis-ci.org/apache/incubator-echarts.svg?branch=master)](https://travis-ci.org/apache/incubator-echarts) [![](https://img.shields.io/npm/dw/echarts.svg?label=npm%20downloads&style=flat)](https://www.npmjs.com/package/echarts) [![Last npm release](https://img.shields.io/npm/v/echarts)](https://www.npmjs.com/package/echarts)
 
@@ -94,7 +94,7 @@ If you wish to debug locally or make pull requests, please refer to [contributin
 
 + [Wordcloud 字符云](https://github.com/ecomfe/echarts-wordcloud)
 
-+ [Baidu Map 百度地图扩展](https://github.com/apache/incubator-echarts/tree/master/extension/bmap)
++ [Extension for Baidu Map 百度地图扩展](https://github.com/apache/incubator-echarts/tree/master/extension/bmap) An extension provides a wrapper of Baidu Map Service SDK. 
 
 + [vue-echarts](https://github.com/ecomfe/vue-echarts) ECharts component for Vue.js
 

package.json

@@ -20,7 +20,7 @@
     "prepublish": "node build/build.js --prepublish",
     "test:visual": "node test/runTest/server.js",
     "test:visual:report": "node test/runTest/genReport.js",
-    "test": "node build/build.js",
+    "test": "node build/build.js --prepublish && jest --config test/ut/jest.config.js",
     "mktest": "node test/build/mktest.js",
     "mktest:help": "node test/build/mktest.js -h",
     "lint": "./node_modules/.bin/eslint src extension-src",
@@ -36,13 +36,19 @@
     "@babel/template": "7.0.0-beta.31",
     "@babel/types": "7.0.0-beta.31",
     "assert": "1.4.1",
+    "canvas": "^2.6.0",
     "commander": "2.11.0",
     "coordtransform": "2.0.2",
     "escodegen": "1.8.0",
+    "eslint": "6.3.0",
     "esprima": "2.7.2",
     "estraverse": "4.1.1",
     "fs-extra": "0.26.7",
     "glob": "7.0.0",
+    "jest": "^24.9.0",
+    "jest-canvas-mock": "^2.2.0",
+    "jsdom": "^15.2.1",
+    "jshint": "2.10.2",
     "open": "6.4.0",
     "pixelmatch": "5.0.2",
     "pngjs": "3.4.0",
@@ -54,8 +60,6 @@
     "semver": "6.3.0",
     "serve-handler": "6.1.1",
     "slugify": "1.3.4",
-    "socket.io": "2.2.0",
-    "jshint": "2.10.2",
-    "eslint": "6.3.0"
+    "socket.io": "2.2.0"
   }
 }

src/chart/bar/BarSeries.js

@@ -57,6 +57,20 @@ export default BaseBarSeries.extend({
 
         // If use caps on two sides of bars
         // Only available on tangential polar bar
-        roundCap: false
+        roundCap: false,
+
+        showBackground: false,
+        backgroundStyle: {
+            color: 'rgba(180, 180, 180, 0.2)',
+            borderColor: null,
+            borderWidth: 0,
+            borderType: 'solid',
+            borderRadius: 0,
+            shadowBlur: 0,
+            shadowColor: null,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            opacity: 1
+        }
     }
 });

src/chart/bar/BarView.js

@@ -25,6 +25,7 @@ import {setLabel} from './helper';
 import Model from '../../model/Model';
 import barItemStyle from './barItemStyle';
 import Path from 'zrender/src/graphic/Path';
+import Group from 'zrender/src/container/Group';
 import {throttle} from '../../util/throttle';
 import {createClipPath} from '../helper/createClipPathFromCoordSys';
 import Sausage from '../../util/shape/sausage';
@@ -127,15 +128,27 @@ export default echarts.extendChartView({
 
         var roundCap = seriesModel.get('roundCap', true);
 
+        var drawBackground = seriesModel.get('showBackground', true);
+        var backgroundModel = seriesModel.getModel('backgroundStyle');
+
+        var bgEls = [];
+        var oldBgEls = this._backgroundEls || [];
+
         data.diff(oldData)
             .add(function (dataIndex) {
+                var itemModel = data.getItemModel(dataIndex);
+                var layout = getLayout[coord.type](data, dataIndex, itemModel);
+
+                if (drawBackground) {
+                    var bgEl = createBackgroundEl(coord, isHorizontalOrRadial, layout);
+                    bgEl.useStyle(backgroundModel.getBarItemStyle());
+                    bgEls[dataIndex] = bgEl;
+                }
+
                 if (!data.hasValue(dataIndex)) {
                     return;
                 }
 
-                var itemModel = data.getItemModel(dataIndex);
-                var layout = getLayout[coord.type](data, dataIndex, itemModel);
-
                 if (needsClip) {
                     // Clip will modify the layout params.
                     // And return a boolean to determine if the shape are fully clipped.
@@ -158,16 +171,24 @@ export default echarts.extendChartView({
                 );
             })
             .update(function (newIndex, oldIndex) {
-                var el = oldData.getItemGraphicEl(oldIndex);
+                var itemModel = data.getItemModel(newIndex);
+                var layout = getLayout[coord.type](data, newIndex, itemModel);
 
+                if (drawBackground) {
+                    var bgEl = oldBgEls[oldIndex];
+                    bgEl.useStyle(backgroundModel.getBarItemStyle());
+                    bgEls[newIndex] = bgEl;
+
+                    var shape = createBackgroundShape(isHorizontalOrRadial, layout, coord);
+                    graphic.updateProps(bgEl, { shape: shape }, animationModel, newIndex);
+                }
+
+                var el = oldData.getItemGraphicEl(oldIndex);
                 if (!data.hasValue(newIndex)) {
                     group.remove(el);
                     return;
                 }
 
-                var itemModel = data.getItemModel(newIndex);
-                var layout = getLayout[coord.type](data, newIndex, itemModel);
-
                 if (needsClip) {
                     var isClipped = clip[coord.type](coordSysClipArea, layout);
                     if (isClipped) {
@@ -205,6 +226,15 @@ export default echarts.extendChartView({
             })
             .execute();
 
+        var bgGroup = this._backgroundGroup || (this._backgroundGroup = new Group());
+        bgGroup.removeAll();
+
+        for (var i = 0; i < bgEls.length; ++i) {
+            bgGroup.add(bgEls[i]);
+        }
+        group.add(bgGroup);
+        this._backgroundEls = bgEls;
+
         this._data = data;
     },
 
@@ -225,6 +255,7 @@ export default echarts.extendChartView({
     },
 
     _incrementalRenderLarge: function (params, seriesModel) {
+        this._removeBackground();
         createLarge(seriesModel, this.group, true);
     },
 
@@ -238,6 +269,9 @@ export default echarts.extendChartView({
         var group = this.group;
         var data = this._data;
         if (ecModel && ecModel.get('animation') && data && !this._isLargeDraw) {
+            this._removeBackground();
+            this._backgroundEls = [];
+
             data.eachItemGraphicEl(function (el) {
                 if (el.type === 'sector') {
                     removeSector(el.dataIndex, ecModel, el);
@@ -251,6 +285,11 @@ export default echarts.extendChartView({
             group.removeAll();
         }
         this._data = null;
+    },
+
+    _removeBackground: function () {
+        this.group.remove(this._backgroundGroup);
+        this._backgroundGroup = null;
     }
 
 });
@@ -308,7 +347,12 @@ var elementCreator = {
         dataIndex, layout, isHorizontal,
         animationModel, isUpdate
     ) {
-        var rect = new graphic.Rect({shape: zrUtil.extend({}, layout)});
+        var rect = new graphic.Rect({
+            shape: zrUtil.extend({}, layout),
+            z2: 1
+        });
+
+        rect.name = 'item';
 
         // Animation
         if (animationModel) {
@@ -338,9 +382,12 @@ var elementCreator = {
         var ShapeClass = (!isRadial && roundCap) ? Sausage : graphic.Sector;
 
         var sector = new ShapeClass({
-            shape: zrUtil.defaults({clockwise: clockwise}, layout)
+            shape: zrUtil.defaults({clockwise: clockwise}, layout),
+            z2: 1
         });
 
+        sector.name = 'item';
+
         // Animation
         if (animationModel) {
             var sectorShape = sector.shape;
@@ -460,7 +507,10 @@ function updateStyle(
 // In case width or height are too small.
 function getLineWidth(itemModel, rawLayout) {
     var lineWidth = itemModel.get(BAR_BORDER_WIDTH_QUERY) || 0;
-    return Math.min(lineWidth, Math.abs(rawLayout.width), Math.abs(rawLayout.height));
+    // width or height may be NaN for empty data
+    var width = isNaN(rawLayout.width) ? Number.MAX_VALUE : Math.abs(rawLayout.width);
+    var height = isNaN(rawLayout.height) ? Number.MAX_VALUE : Math.abs(rawLayout.height);
+    return Math.min(lineWidth, width, height);
 }
 
 
@@ -492,13 +542,38 @@ function createLarge(seriesModel, group, incremental) {
     var baseDimIdx = data.getLayout('valueAxisHorizontal') ? 1 : 0;
     startPoint[1 - baseDimIdx] = data.getLayout('valueAxisStart');
 
+    var largeDataIndices = data.getLayout('largeDataIndices');
+    var barWidth = data.getLayout('barWidth');
+
+    var backgroundModel = seriesModel.getModel('backgroundStyle');
+    var drawBackground = seriesModel.get('showBackground', true);
+
+    if (drawBackground) {
+        var points = data.getLayout('largeBackgroundPoints');
+        var backgroundStartPoint = [];
+        backgroundStartPoint[1 - baseDimIdx] = data.getLayout('backgroundStart');
+
+        var bgEl = new LargePath({
+            shape: {points: points},
+            incremental: !!incremental,
+            __startPoint: backgroundStartPoint,
+            __baseDimIdx: baseDimIdx,
+            __largeDataIndices: largeDataIndices,
+            __barWidth: barWidth,
+            silent: true,
+            z2: 0
+        });
+        setLargeBackgroundStyle(bgEl, backgroundModel, data);
+        group.add(bgEl);
+    }
+
     var el = new LargePath({
         shape: {points: data.getLayout('largePoints')},
         incremental: !!incremental,
         __startPoint: startPoint,
         __baseDimIdx: baseDimIdx,
-        __largeDataIndices: data.getLayout('largeDataIndices'),
-        __barWidth: data.getLayout('barWidth')
+        __largeDataIndices: largeDataIndices,
+        __barWidth: barWidth
     });
     group.add(el);
     setLargeStyle(el, seriesModel, data);
@@ -563,3 +638,51 @@ function setLargeStyle(el, seriesModel, data) {
     el.style.lineWidth = data.getLayout('barWidth');
 }
 
+function setLargeBackgroundStyle(el, backgroundModel, data) {
+    var borderColor = backgroundModel.get('borderColor') || backgroundModel.get('color');
+    var itemStyle = backgroundModel.getItemStyle(['color', 'borderColor']);
+
+    el.useStyle(itemStyle);
+    el.style.fill = null;
+    el.style.stroke = borderColor;
+    el.style.lineWidth = data.getLayout('barWidth');
+}
+
+function createBackgroundShape(isHorizontalOrRadial, layout, coord) {
+    var coordLayout;
+    var isPolar = coord.type === 'polar';
+    if (isPolar) {
+        coordLayout = coord.getArea();
+    }
+    else {
+        coordLayout = coord.grid.getRect();
+    }
+
+    if (isPolar) {
+        return {
+            cx: coordLayout.cx,
+            cy: coordLayout.cy,
+            r0: isHorizontalOrRadial ? coordLayout.r0 : layout.r0,
+            r: isHorizontalOrRadial ? coordLayout.r : layout.r,
+            startAngle: isHorizontalOrRadial ? layout.startAngle : 0,
+            endAngle: isHorizontalOrRadial ? layout.endAngle : Math.PI * 2
+        };
+    }
+    else {
+        return {
+            x: isHorizontalOrRadial ? layout.x : coordLayout.x,
+            y: isHorizontalOrRadial ? coordLayout.y : layout.y,
+            width: isHorizontalOrRadial ? layout.width : coordLayout.width,
+            height: isHorizontalOrRadial ? coordLayout.height : layout.height
+        };
+    }
+}
+
+function createBackgroundEl(coord, isHorizontalOrRadial, layout) {
+    var ElementClz = coord.type === 'polar' ? graphic.Sector : graphic.Rect;
+    return new ElementClz({
+        shape: createBackgroundShape(isHorizontalOrRadial, layout, coord),
+        silent: true,
+        z2: 0
+    });
+}

src/chart/candlestick/candlestickVisual.js

@@ -36,7 +36,6 @@ export default {
     reset: function (seriesModel, ecModel) {
 
         var data = seriesModel.getData();
-        var isLargeRender = seriesModel.pipelineContext.large;
 
         data.setVisual({
             legendSymbol: 'roundRect',
@@ -51,6 +50,7 @@ export default {
             return;
         }
 
+        var isLargeRender = seriesModel.pipelineContext.large;
         return !isLargeRender && {progress: progress};
 
 

src/chart/funnel/FunnelSeries.js

@@ -23,7 +23,6 @@ import createListSimply from '../helper/createListSimply';
 import {defaultEmphasis} from '../../util/model';
 import {makeSeriesEncodeForNameBased} from '../../data/helper/sourceHelper';
 import LegendVisualProvider from '../../visual/LegendVisualProvider';
-import {bind} from 'zrender/src/core/util';
 
 var FunnelSeries = echarts.extendSeriesModel({
 
@@ -35,7 +34,7 @@ var FunnelSeries = echarts.extendSeriesModel({
         // Enable legend selection for each data item
         // Use a function instead of direct access because data reference may changed
         this.legendVisualProvider = new LegendVisualProvider(
-            bind(this.getData, this), bind(this.getRawData, this)
+            zrUtil.bind(this.getData, this), zrUtil.bind(this.getRawData, this)
         );
         // Extend labelLine emphasis
         this._defaultLabelLine(option);

src/chart/graph/GraphView.js

@@ -270,7 +270,7 @@ export default echarts.extendChartView({
     },
 
     focusNodeAdjacency: function (seriesModel, ecModel, api, payload) {
-        var data = this._model.getData();
+        var data = seriesModel.getData();
         var graph = data.graph;
         var dataIndex = payload.dataIndex;
         var edgeDataIndex = payload.edgeDataIndex;
@@ -308,7 +308,7 @@ export default echarts.extendChartView({
     },
 
     unfocusNodeAdjacency: function (seriesModel, ecModel, api, payload) {
-        var graph = this._model.getData().graph;
+        var graph = seriesModel.getData().graph;
 
         graph.eachNode(function (node) {
             fadeOutItem(node, nodeOpacityPath);

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/helper/Line.js

@@ -141,39 +141,90 @@ function updateSymbolAndLabelBeforeLineUpdate() {
         var textPosition;
         var textAlign;
         var textVerticalAlign;
-
-        var distance = 5 * invScale;
-        // End
-        if (label.__position === 'end') {
-            textPosition = [d[0] * distance + toPos[0], d[1] * distance + toPos[1]];
-            textAlign = d[0] > 0.8 ? 'left' : (d[0] < -0.8 ? 'right' : 'center');
-            textVerticalAlign = d[1] > 0.8 ? 'top' : (d[1] < -0.8 ? 'bottom' : 'middle');
+        var textOrigin;
+
+        var distance = label.__labelDistance;
+        var distanceX = distance[0] * invScale;
+        var distanceY = distance[1] * invScale;
+        var halfPercent = percent / 2;
+        var tangent = line.tangentAt(halfPercent);
+        var n = [tangent[1], -tangent[0]];
+        var cp = line.pointAt(halfPercent);
+        if (n[1] > 0) {
+            n[0] = -n[0];
+            n[1] = -n[1];
         }
-        // Middle
-        else if (label.__position === 'middle') {
-            var halfPercent = percent / 2;
-            var tangent = line.tangentAt(halfPercent);
-            var n = [tangent[1], -tangent[0]];
-            var cp = line.pointAt(halfPercent);
-            if (n[1] > 0) {
-                n[0] = -n[0];
-                n[1] = -n[1];
-            }
-            textPosition = [cp[0] + n[0] * distance, cp[1] + n[1] * distance];
-            textAlign = 'center';
-            textVerticalAlign = 'bottom';
+        var dir = tangent[0] < 0 ? -1 : 1;
+
+        if (label.__position !== 'start' && label.__position !== 'end') {
             var rotation = -Math.atan2(tangent[1], tangent[0]);
             if (toPos[0] < fromPos[0]) {
                 rotation = Math.PI + rotation;
             }
             label.attr('rotation', rotation);
         }
-        // Start
-        else {
-            textPosition = [-d[0] * distance + fromPos[0], -d[1] * distance + fromPos[1]];
-            textAlign = d[0] > 0.8 ? 'right' : (d[0] < -0.8 ? 'left' : 'center');
-            textVerticalAlign = d[1] > 0.8 ? 'bottom' : (d[1] < -0.8 ? 'top' : 'middle');
+
+        var dy;
+        switch (label.__position) {
+            case 'insideStartTop':
+            case 'insideMiddleTop':
+            case 'insideEndTop':
+            case 'middle':
+                dy = -distanceY;
+                textVerticalAlign = 'bottom';
+                break;
+
+            case 'insideStartBottom':
+            case 'insideMiddleBottom':
+            case 'insideEndBottom':
+                dy = distanceY;
+                textVerticalAlign = 'top';
+                break;
+
+            default:
+                dy = 0;
+                textVerticalAlign = 'middle';
         }
+
+        switch (label.__position) {
+            case 'end':
+                textPosition = [d[0] * distanceX + toPos[0], d[1] * distanceY + toPos[1]];
+                textAlign = d[0] > 0.8 ? 'left' : (d[0] < -0.8 ? 'right' : 'center');
+                textVerticalAlign = d[1] > 0.8 ? 'top' : (d[1] < -0.8 ? 'bottom' : 'middle');
+                break;
+
+            case 'start':
+                textPosition = [-d[0] * distanceX + fromPos[0], -d[1] * distanceY + fromPos[1]];
+                textAlign = d[0] > 0.8 ? 'right' : (d[0] < -0.8 ? 'left' : 'center');
+                textVerticalAlign = d[1] > 0.8 ? 'bottom' : (d[1] < -0.8 ? 'top' : 'middle');
+                break;
+
+            case 'insideStartTop':
+            case 'insideStart':
+            case 'insideStartBottom':
+                textPosition = [distanceX * dir + fromPos[0], fromPos[1] + dy];
+                textAlign = tangent[0] < 0 ? 'right' : 'left';
+                textOrigin = [-distanceX * dir, -dy];
+                break;
+
+            case 'insideMiddleTop':
+            case 'insideMiddle':
+            case 'insideMiddleBottom':
+            case 'middle':
+                textPosition = [cp[0], cp[1] + dy];
+                textAlign = 'center';
+                textOrigin = [0, -dy];
+                break;
+
+            case 'insideEndTop':
+            case 'insideEnd':
+            case 'insideEndBottom':
+                textPosition = [-distanceX * dir + toPos[0], toPos[1] + dy];
+                textAlign = tangent[0] >= 0 ? 'right' : 'left';
+                textOrigin = [distanceX * dir, -dy];
+                break;
+        }
+
         label.attr({
             style: {
                 // Use the user specified text align and baseline first
@@ -181,7 +232,8 @@ function updateSymbolAndLabelBeforeLineUpdate() {
                 textAlign: label.__textAlign || textAlign
             },
             position: textPosition,
-            scale: [invScale, invScale]
+            scale: [invScale, invScale],
+            origin: textOrigin
         });
     }
 }
@@ -357,6 +409,12 @@ lineProto._updateCommonStl = function (lineData, idx, seriesScope) {
         label.__verticalAlign = labelStyle.textVerticalAlign;
         // 'start', 'middle', 'end'
         label.__position = labelModel.get('position') || 'middle';
+
+        var distance = labelModel.get('distance');
+        if (!zrUtil.isArray(distance)) {
+            distance = [distance, distance];
+        }
+        label.__labelDistance = distance;
     }
 
     if (emphasisText != null) {

src/chart/helper/createRenderPlanner.js

@@ -32,8 +32,11 @@ export default function () {
         var originalLarge = fields.large;
         var originalProgressive = fields.progressiveRender;
 
-        var large = fields.large = pipelineContext.large;
-        var progressive = fields.progressiveRender = pipelineContext.progressiveRender;
+        // FIXME: if the planner works on a filtered series, `pipelineContext` does not
+        // exists. See #11611 . Probably we need to modify this structure, see the comment
+        // on `performRawSeries` in `Schedular.js`.
+        var large = fields.large = pipelineContext && pipelineContext.large;
+        var progressive = fields.progressiveRender = pipelineContext && pipelineContext.progressiveRender;
 
         return !!((originalLarge ^ large) || (originalProgressive ^ progressive)) && 'reset';
     };

src/chart/pie/PieView.js

@@ -171,7 +171,7 @@ piePieceProto.updateData = function (data, idx, firstCreate) {
     toggleItemSelected(
         this,
         data.getItemLayout(idx),
-        seriesModel.isSelected(null, idx),
+        seriesModel.isSelected(data.getName(idx)),
         seriesModel.get('selectedOffset'),
         seriesModel.get('animation')
     );

src/chart/pie/labelLayout.js

@@ -336,7 +336,7 @@ export default function (seriesModel, r, viewWidth, viewHeight, viewLeft, viewTo
             inside: isLabelInside,
             labelDistance: labelDistance,
             labelAlignTo: labelAlignTo,
-            labelMargin:labelMargin,
+            labelMargin: labelMargin,
             bleedMargin: bleedMargin,
             textRect: textRect,
             text: text,

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 indicatorAxes = coordSys.getIndicatorAxes();
+                    return coordSys.coordToPoint(indicatorAxes[i].dataToCoord(values[i]), i);
+                }
+            }
+        }
+    },
+
     defaultOption: {
         zlevel: 0,
         z: 2,

src/chart/sankey/SankeySeries.js

@@ -138,6 +138,17 @@ var SankeySeries = SeriesModel.extend({
         }
     },
 
+    // Override Series.getDataParams()
+    getDataParams: function (dataIndex, dataType) {
+        var params = SankeySeries.superCall(this, 'getDataParams', dataIndex, dataType);
+        if (params.value == null && dataType === 'node') {
+            var node = this.getGraph().getNodeByIndex(dataIndex);
+            var nodeValue = node.getLayout().value;
+            params.value = nodeValue;
+        }
+        return params;
+    },
+
     defaultOption: {
         zlevel: 0,
         z: 2,
@@ -198,7 +209,7 @@ var SankeySeries = SeriesModel.extend({
                 show: true
             },
             lineStyle: {
-                opacity: 0.6
+                opacity: 0.5
             }
         },
 

src/chart/sankey/SankeyView.js

@@ -22,7 +22,9 @@ import * as echarts from '../../echarts';
 import * as zrUtil from 'zrender/src/core/util';
 
 var nodeOpacityPath = ['itemStyle', 'opacity'];
+var hoverNodeOpacityPath = ['emphasis', 'itemStyle', 'opacity'];
 var lineOpacityPath = ['lineStyle', 'opacity'];
+var hoverLineOpacityPath = ['emphasis', 'lineStyle', 'opacity'];
 
 function getItemOpacity(item, opacityPath) {
     return item.getVisual('opacity') || item.getModel().get(opacityPath);
@@ -30,8 +32,8 @@ function getItemOpacity(item, opacityPath) {
 
 function fadeOutItem(item, opacityPath, opacityRatio) {
     var el = item.getGraphicEl();
-
     var opacity = getItemOpacity(item, opacityPath);
+
     if (opacityRatio != null) {
         opacity == null && (opacity = 1);
         opacity *= opacityRatio;
@@ -49,12 +51,14 @@ function fadeInItem(item, opacityPath) {
     var opacity = getItemOpacity(item, opacityPath);
     var el = item.getGraphicEl();
 
-    el.highlight && el.highlight();
     el.traverse(function (child) {
         if (child.type !== 'group') {
             child.setStyle('opacity', opacity);
         }
     });
+
+    // Support emphasis here.
+    el.highlight && el.highlight();
 }
 
 var SankeyShape = graphic.extendShape({
@@ -92,6 +96,14 @@ var SankeyShape = graphic.extendShape({
             );
         }
         ctx.closePath();
+    },
+
+    highlight: function () {
+        this.trigger('emphasis');
+    },
+
+    downplay: function () {
+        this.trigger('normal');
     }
 });
 
@@ -274,8 +286,19 @@ export default echarts.extendChartView({
                 el.cursor = 'move';
             }
 
+            el.highlight = function () {
+                this.trigger('emphasis');
+            };
+
+            el.downplay = function () {
+                this.trigger('normal');
+            };
+
+            el.focusNodeAdjHandler && el.off('mouseover', el.focusNodeAdjHandler);
+            el.unfocusNodeAdjHandler && el.off('mouseout', el.unfocusNodeAdjHandler);
+
             if (itemModel.get('focusNodeAdjacency')) {
-                el.off('mouseover').on('mouseover', function () {
+                el.on('mouseover', el.focusNodeAdjHandler = function () {
                     if (!sankeyView._focusAdjacencyDisabled) {
                         sankeyView._clearTimer();
                         api.dispatchAction({
@@ -285,7 +308,8 @@ export default echarts.extendChartView({
                         });
                     }
                 });
-                el.off('mouseout').on('mouseout', function () {
+
+                el.on('mouseout', el.unfocusNodeAdjHandler = function () {
                     if (!sankeyView._focusAdjacencyDisabled) {
                         sankeyView._dispatchUnfocus(api);
                     }
@@ -295,8 +319,12 @@ export default echarts.extendChartView({
 
         edgeData.eachItemGraphicEl(function (el, dataIndex) {
             var edgeModel = edgeData.getItemModel(dataIndex);
+
+            el.focusNodeAdjHandler && el.off('mouseover', el.focusNodeAdjHandler);
+            el.unfocusNodeAdjHandler && el.off('mouseout', el.unfocusNodeAdjHandler);
+
             if (edgeModel.get('focusNodeAdjacency')) {
-                el.off('mouseover').on('mouseover', function () {
+                el.on('mouseover', el.focusNodeAdjHandler = function () {
                     if (!sankeyView._focusAdjacencyDisabled) {
                         sankeyView._clearTimer();
                         api.dispatchAction({
@@ -306,7 +334,8 @@ export default echarts.extendChartView({
                         });
                     }
                 });
-                el.off('mouseout').on('mouseout', function () {
+
+                el.on('mouseout', el.unfocusNodeAdjHandler = function () {
                     if (!sankeyView._focusAdjacencyDisabled) {
                         sankeyView._dispatchUnfocus(api);
                     }
@@ -347,7 +376,7 @@ export default echarts.extendChartView({
     },
 
     focusNodeAdjacency: function (seriesModel, ecModel, api, payload) {
-        var data = this._model.getData();
+        var data = seriesModel.getData();
         var graph = data.graph;
         var dataIndex = payload.dataIndex;
         var itemModel = data.getItemModel(dataIndex);
@@ -367,15 +396,15 @@ export default echarts.extendChartView({
         });
 
         if (node) {
-            fadeInItem(node, nodeOpacityPath);
+            fadeInItem(node, hoverNodeOpacityPath);
             var focusNodeAdj = itemModel.get('focusNodeAdjacency');
             if (focusNodeAdj === 'outEdges') {
                 zrUtil.each(node.outEdges, function (edge) {
                     if (edge.dataIndex < 0) {
                         return;
                     }
-                    fadeInItem(edge, lineOpacityPath);
-                    fadeInItem(edge.node2, nodeOpacityPath);
+                    fadeInItem(edge, hoverLineOpacityPath);
+                    fadeInItem(edge.node2, hoverNodeOpacityPath);
                 });
             }
             else if (focusNodeAdj === 'inEdges') {
@@ -383,8 +412,8 @@ export default echarts.extendChartView({
                     if (edge.dataIndex < 0) {
                         return;
                     }
-                    fadeInItem(edge, lineOpacityPath);
-                    fadeInItem(edge.node1, nodeOpacityPath);
+                    fadeInItem(edge, hoverLineOpacityPath);
+                    fadeInItem(edge.node1, hoverNodeOpacityPath);
                 });
             }
             else if (focusNodeAdj === 'allEdges') {
@@ -392,21 +421,21 @@ export default echarts.extendChartView({
                     if (edge.dataIndex < 0) {
                         return;
                     }
-                    fadeInItem(edge, lineOpacityPath);
-                    fadeInItem(edge.node1, nodeOpacityPath);
-                    fadeInItem(edge.node2, nodeOpacityPath);
+                    fadeInItem(edge, hoverLineOpacityPath);
+                    (edge.node1 !== node) && fadeInItem(edge.node1, hoverNodeOpacityPath);
+                    (edge.node2 !== node) && fadeInItem(edge.node2, hoverNodeOpacityPath);
                 });
             }
         }
         if (edge) {
-            fadeInItem(edge, lineOpacityPath);
-            fadeInItem(edge.node1, nodeOpacityPath);
-            fadeInItem(edge.node2, nodeOpacityPath);
+            fadeInItem(edge, hoverLineOpacityPath);
+            fadeInItem(edge.node1, hoverNodeOpacityPath);
+            fadeInItem(edge.node2, hoverNodeOpacityPath);
         }
     },
 
     unfocusNodeAdjacency: function (seriesModel, ecModel, api, payload) {
-        var graph = this._model.getGraph();
+        var graph = seriesModel.getGraph();
 
         graph.eachNode(function (node) {
             fadeOutItem(node, nodeOpacityPath);
@@ -429,8 +458,7 @@ function createGridClipShape(rect, seriesModel, cb) {
     });
     graphic.initProps(rectEl, {
         shape: {
-            width: rect.width + 20,
-            height: rect.height + 20
+            width: rect.width + 20
         }
     }, seriesModel, cb);
 

src/chart/sankey/sankeyLayout.js

@@ -87,7 +87,8 @@ function computeNodeValues(nodes) {
     zrUtil.each(nodes, function (node) {
         var value1 = sum(node.outEdges, getEdgeValue);
         var value2 = sum(node.inEdges, getEdgeValue);
-        var value = Math.max(value1, value2);
+        var nodeRawValue = node.getValue() || 0;
+        var value = Math.max(value1, value2, nodeRawValue);
         node.setLayout({value: value}, true);
     });
 }
@@ -431,12 +432,12 @@ function getEdgeValue(edge) {
     return edge.getValue();
 }
 
-function sum(array, f, orient) {
+function sum(array, cb, orient) {
     var sum = 0;
     var len = array.length;
     var i = -1;
     while (++i < len) {
-        var value = +f.call(array, array[i], orient);
+        var value = +cb.call(array, array[i], orient);
         if (!isNaN(value)) {
             sum += value;
         }

src/chart/tree/TreeSeries.js

@@ -139,6 +139,11 @@ export default SeriesModel.extend({
         // the layout of the tree, two value can be selected, 'orthogonal' or 'radial'
         layout: 'orthogonal',
 
+        // value can be 'polyline'
+        edgeShape: 'curve',
+
+        edgeForkPosition: '50%',
+
         // true | false | 'move' | 'scale', see module:component/helper/RoamController.
         roam: false,
 

src/chart/tree/TreeView.js

@@ -27,6 +27,60 @@ import View from '../../coord/View';
 import * as roamHelper from '../../component/helper/roamHelper';
 import RoamController from '../../component/helper/RoamController';
 import {onIrrelevantElement} from '../../component/helper/cursorHelper';
+import { __DEV__ } from '../../config';
+import {parsePercent} from '../../util/number';
+
+var TreeShape = graphic.extendShape({
+    shape: {
+        parentPoint: [],
+        childPoints: [],
+        orient: '',
+        forkPosition: ''
+    },
+
+    style: {
+        stroke: '#000',
+        fill: null
+    },
+
+    buildPath: function (ctx, shape) {
+        var childPoints = shape.childPoints;
+        var childLen = childPoints.length;
+        var parentPoint = shape.parentPoint;
+        var firstChildPos = childPoints[0];
+        var lastChildPos = childPoints[childLen - 1];
+
+        if (childLen === 1) {
+            ctx.moveTo(parentPoint[0], parentPoint[1]);
+            ctx.lineTo(firstChildPos[0], firstChildPos[1]);
+            return;
+        }
+
+        var orient = shape.orient;
+        var forkDim = (orient === 'TB' || orient === 'BT') ? 0 : 1;
+        var otherDim = 1 - forkDim;
+        var forkPosition = parsePercent(shape.forkPosition, 1);
+        var tmpPoint = [];
+        tmpPoint[forkDim] = parentPoint[forkDim];
+        tmpPoint[otherDim] = parentPoint[otherDim] + (lastChildPos[otherDim] - parentPoint[otherDim]) * forkPosition;
+
+        ctx.moveTo(parentPoint[0], parentPoint[1]);
+        ctx.lineTo(tmpPoint[0], tmpPoint[1]);
+        ctx.moveTo(firstChildPos[0], firstChildPos[1]);
+        tmpPoint[forkDim] = firstChildPos[forkDim];
+        ctx.lineTo(tmpPoint[0], tmpPoint[1]);
+        tmpPoint[forkDim] = lastChildPos[forkDim];
+        ctx.lineTo(tmpPoint[0], tmpPoint[1]);
+        ctx.lineTo(lastChildPos[0], lastChildPos[1]);
+
+        for (var i = 1; i < childLen - 1; i++) {
+            var point = childPoints[i];
+            ctx.moveTo(point[0], point[1]);
+            tmpPoint[forkDim] = point[forkDim];
+            ctx.lineTo(tmpPoint[0], tmpPoint[1]);
+        }
+    }
+});
 
 export default echarts.extendChartView({
 
@@ -87,6 +141,8 @@ export default echarts.extendChartView({
         var seriesScope = {
             expandAndCollapse: seriesModel.get('expandAndCollapse'),
             layout: layout,
+            edgeShape: seriesModel.get('edgeShape'),
+            edgeForkPosition: seriesModel.get('edgeForkPosition'),
             orient: seriesModel.getOrient(),
             curvature: seriesModel.get('lineStyle.curveness'),
             symbolRotate: seriesModel.get('symbolRotate'),
@@ -388,22 +444,72 @@ function updateNode(data, dataIndex, symbolEl, group, seriesModel, seriesScope)
         });
     }
 
-    if (node.parentNode && node.parentNode !== virtualRoot) {
-        var edge = symbolEl.__edge;
-        if (!edge) {
-            edge = symbolEl.__edge = new graphic.BezierCurve({
-                shape: getEdgeShape(seriesScope, sourceOldLayout, sourceOldLayout),
-                style: zrUtil.defaults({opacity: 0, strokeNoScale: true}, seriesScope.lineStyle)
-            });
-        }
+    drawEdge(
+        seriesModel, node, virtualRoot, symbolEl, sourceOldLayout,
+        sourceLayout, targetLayout, group, seriesScope
+    );
 
-        graphic.updateProps(edge, {
-            shape: getEdgeShape(seriesScope, sourceLayout, targetLayout),
-            style: {opacity: 1}
-        }, seriesModel);
+}
+
+function drawEdge(
+    seriesModel, node, virtualRoot, symbolEl, sourceOldLayout,
+    sourceLayout, targetLayout, group, seriesScope
+) {
+
+    var edgeShape = seriesScope.edgeShape;
+    var edge = symbolEl.__edge;
+    if (edgeShape === 'curve') {
+        if (node.parentNode && node.parentNode !== virtualRoot) {
+            if (!edge) {
+                edge = symbolEl.__edge = new graphic.BezierCurve({
+                    shape: getEdgeShape(seriesScope, sourceOldLayout, sourceOldLayout),
+                    style: zrUtil.defaults({opacity: 0, strokeNoScale: true}, seriesScope.lineStyle)
+                });
+            }
 
-        group.add(edge);
+            graphic.updateProps(edge, {
+                shape: getEdgeShape(seriesScope, sourceLayout, targetLayout),
+                style: {opacity: 1}
+            }, seriesModel);
+        }
     }
+    else if (edgeShape === 'polyline') {
+        if (seriesScope.layout === 'orthogonal') {
+            if (node !== virtualRoot && node.children && (node.children.length !== 0) && (node.isExpand === true)) {
+                var children = node.children;
+                var childPoints = [];
+                for (var i = 0; i < children.length; i++) {
+                    var childLayout = children[i].getLayout();
+                    childPoints.push([childLayout.x, childLayout.y]);
+                }
+
+                if (!edge) {
+                    edge = symbolEl.__edge = new TreeShape({
+                        shape: {
+                            parentPoint: [targetLayout.x, targetLayout.y],
+                            childPoints: [[targetLayout.x, targetLayout.y]],
+                            orient: seriesScope.orient,
+                            forkPosition: seriesScope.edgeForkPosition
+                        },
+                        style: zrUtil.defaults({opacity: 0, strokeNoScale: true}, seriesScope.lineStyle)
+                    });
+                }
+                graphic.updateProps(edge, {
+                    shape: {
+                        parentPoint: [targetLayout.x, targetLayout.y],
+                        childPoints: childPoints
+                    },
+                    style: {opacity: 1}
+                }, seriesModel);
+            }
+        }
+        else {
+            if (__DEV__) {
+                throw new Error('The polyline edgeShape can only be used in orthogonal layout');
+            }
+        }
+    }
+    group.add(edge);
 }
 
 function removeNode(data, dataIndex, symbolEl, group, seriesModel, seriesScope) {
@@ -413,6 +519,7 @@ function removeNode(data, dataIndex, symbolEl, group, seriesModel, seriesScope)
     var seriesScope = getTreeNodeStyle(node, itemModel, seriesScope);
 
     var source = node.parentNode === virtualRoot ? node : node.parentNode || node;
+    var edgeShape = seriesScope.edgeShape;
     var sourceLayout;
     while (sourceLayout = source.getLayout(), sourceLayout == null) {
         source = source.parentNode === virtualRoot ? source : source.parentNode || source;
@@ -427,16 +534,42 @@ function removeNode(data, dataIndex, symbolEl, group, seriesModel, seriesScope)
 
     symbolEl.fadeOut(null, {keepLabel: true});
 
-    var edge = symbolEl.__edge;
+    var sourceSymbolEl = data.getItemGraphicEl(source.dataIndex);
+    var sourceEdge = sourceSymbolEl.__edge;
+
+    // 1. when expand the sub tree, delete the children node should delete the edge of
+    // the source at the same time. because the polyline edge shape is only owned by the source.
+    // 2.when the node is the only children of the source, delete the node should delete the edge of
+    // the source at the same time. the same reason as above.
+    var edge = symbolEl.__edge
+        || ((source.isExpand === false || source.children.length === 1) ? sourceEdge : undefined);
+
+    var edgeShape = seriesScope.edgeShape;
+
     if (edge) {
-        graphic.updateProps(edge, {
-            shape: getEdgeShape(seriesScope, sourceLayout, sourceLayout),
-            style: {
-                opacity: 0
-            }
-        }, seriesModel, function () {
-            group.remove(edge);
-        });
+        if (edgeShape === 'curve') {
+            graphic.updateProps(edge, {
+                shape: getEdgeShape(seriesScope, sourceLayout, sourceLayout),
+                style: {
+                    opacity: 0
+                }
+            }, seriesModel, function () {
+                group.remove(edge);
+            });
+        }
+        else if (edgeShape === 'polyline' && seriesScope.layout === 'orthogonal') {
+            graphic.updateProps(edge, {
+                shape: {
+                    parentPoint: [sourceLayout.x, sourceLayout.y],
+                    childPoints: [[sourceLayout.x, sourceLayout.y]]
+                },
+                style: {
+                    opacity: 0
+                }
+            }, seriesModel, function () {
+                group.remove(edge);
+            });
+        }
     }
 }
 

src/chart/treemap/TreemapView.js

@@ -187,6 +187,7 @@ export default echarts.extendChartView({
         var thisStorage = createStorage();
         var oldStorage = this._storage;
         var willInvisibleEls = [];
+
         var doRenderNode = zrUtil.curry(
             renderNode, seriesModel,
             thisStorage, oldStorage, reRoot,
@@ -685,6 +686,11 @@ function renderNode(
     // Start of closure variables available in "Procedures in renderNode".
 
     var thisLayout = thisNode.getLayout();
+    var data = seriesModel.getData();
+
+    // Only for enabling highlight/downplay. Clear firstly.
+    // Because some node will not be rendered.
+    data.setItemGraphicEl(thisNode.dataIndex, null);
 
     if (!thisLayout || !thisLayout.isInView) {
         return;
@@ -724,14 +730,36 @@ function renderNode(
         return group;
     }
 
+    var nodeModel = thisNode.getModel();
+
     // Background
     var bg = giveGraphic('background', Rect, depth, Z_BG);
     bg && renderBackground(group, bg, isParent && thisLayout.upperHeight);
 
     // No children, render content.
-    if (!isParent) {
+    if (isParent) {
+        // Because of the implementation about "traverse" in graphic hover style, we
+        // can not set hover listener on the "group" of non-leaf node. Otherwise the
+        // hover event from the descendents will be listenered.
+        if (graphic.isHighDownDispatcher(group)) {
+            graphic.setAsHighDownDispatcher(group, false);
+        }
+        if (bg) {
+            graphic.setAsHighDownDispatcher(bg, true);
+            // Only for enabling highlight/downplay.
+            data.setItemGraphicEl(thisNode.dataIndex, bg);
+        }
+    }
+    else {
         var content = giveGraphic('content', Rect, depth, Z_CONTENT);
         content && renderContent(group, content);
+
+        if (bg && graphic.isHighDownDispatcher(bg)) {
+            graphic.setAsHighDownDispatcher(bg, false);
+        }
+        graphic.setAsHighDownDispatcher(group, true);
+        // Only for enabling highlight/downplay.
+        data.setItemGraphicEl(thisNode.dataIndex, group);
     }
 
     return group;
@@ -746,10 +774,16 @@ function renderNode(
         bg.seriesIndex = seriesModel.seriesIndex;
 
         bg.setShape({x: 0, y: 0, width: thisWidth, height: thisHeight});
-        var visualBorderColor = thisNode.getVisual('borderColor', true);
-        var emphasisBorderColor = itemStyleEmphasisModel.get('borderColor');
 
-        updateStyle(bg, function () {
+        if (thisInvisible) {
+            // If invisible, do not set visual, otherwise the element will
+            // change immediately before animation. We think it is OK to
+            // remain its origin color when moving out of the view window.
+            processInvisible(content);
+        }
+        else {
+            var visualBorderColor = thisNode.getVisual('borderColor', true);
+            var emphasisBorderColor = itemStyleEmphasisModel.get('borderColor');
             var normalStyle = getItemStyleNormal(itemStyleNormalModel);
             normalStyle.fill = visualBorderColor;
             var emphasisStyle = getItemStyleEmphasis(itemStyleEmphasisModel);
@@ -769,8 +803,8 @@ function renderNode(
             }
 
             bg.setStyle(normalStyle);
-            graphic.setHoverStyle(bg, emphasisStyle);
-        });
+            graphic.setElementHoverStyle(bg, emphasisStyle);
+        }
 
         group.add(bg);
     }
@@ -791,8 +825,14 @@ function renderNode(
             height: contentHeight
         });
 
-        var visualColor = thisNode.getVisual('color', true);
-        updateStyle(content, function () {
+        if (thisInvisible) {
+            // If invisible, do not set visual, otherwise the element will
+            // change immediately before animation. We think it is OK to
+            // remain its origin color when moving out of the view window.
+            processInvisible(content);
+        }
+        else {
+            var visualColor = thisNode.getVisual('color', true);
             var normalStyle = getItemStyleNormal(itemStyleNormalModel);
             normalStyle.fill = visualColor;
             var emphasisStyle = getItemStyleEmphasis(itemStyleEmphasisModel);
@@ -800,32 +840,19 @@ function renderNode(
             prepareText(normalStyle, emphasisStyle, visualColor, contentWidth, contentHeight);
 
             content.setStyle(normalStyle);
-            graphic.setHoverStyle(content, emphasisStyle);
-        });
+            graphic.setElementHoverStyle(content, emphasisStyle);
+        }
 
         group.add(content);
     }
 
-    function updateStyle(element, cb) {
-        if (!thisInvisible) {
-            // If invisible, do not set visual, otherwise the element will
-            // change immediately before animation. We think it is OK to
-            // remain its origin color when moving out of the view window.
-            cb();
-
-            if (!element.__tmWillVisible) {
-                element.invisible = false;
-            }
-        }
-        else {
-            // Delay invisible setting utill animation finished,
-            // avoid element vanish suddenly before animation.
-            !element.invisible && willInvisibleEls.push(element);
-        }
+    function processInvisible(element) {
+        // Delay invisible setting utill animation finished,
+        // avoid element vanish suddenly before animation.
+        !element.invisible && willInvisibleEls.push(element);
     }
 
     function prepareText(normalStyle, emphasisStyle, visualColor, width, height, upperLabelRect) {
-        var nodeModel = thisNode.getModel();
         var text = zrUtil.retrieve(
             seriesModel.getFormattedLabel(
                 thisNode.dataIndex, 'normal', null, null, upperLabelRect ? 'upperLabel' : 'label'
@@ -922,6 +949,7 @@ function renderNode(
         // Fade in, user can be aware that these nodes are new.
         lastCfg.fadein = storageName !== 'nodeGroup';
     }
+
 }
 
 // We can not set all backgroud with the same z, Because the behaviour of

src/component/axis/AxisBuilder.js

@@ -17,7 +17,7 @@
 * under the License.
 */
 
-import {retrieve, defaults, extend, each, map} from 'zrender/src/core/util';
+import {retrieve, defaults, extend, each} from 'zrender/src/core/util';
 import * as formatUtil from '../../util/format';
 import * as graphic from '../../util/graphic';
 import Model from '../../model/Model';

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/brush/BrushView.js

@@ -20,6 +20,7 @@
 import * as echarts from '../../echarts';
 import * as zrUtil from 'zrender/src/core/util';
 import BrushController from '../helper/BrushController';
+import {layoutCovers} from './visualEncoding';
 
 export default echarts.extendComponentView({
 
@@ -65,7 +66,13 @@ export default echarts.extendComponentView({
     /**
      * @override
      */
-    updateTransform: updateController,
+    updateTransform: function (brushModel, ecModel) {
+        // PENDING: `updateTransform` is a little tricky, whose layout need
+        // to be calculate mandatorily and other stages will not be performed.
+        // Take care the correctness of the logic. See #11754 .
+        layoutCovers(ecModel);
+        return updateController.apply(this, arguments);
+    },
 
     /**
      * @override

src/component/brush/visualEncoding.js

@@ -35,16 +35,19 @@ var PRIORITY_BRUSH = echarts.PRIORITY.VISUAL.BRUSH;
  */
 echarts.registerLayout(PRIORITY_BRUSH, function (ecModel, api, payload) {
     ecModel.eachComponent({mainType: 'brush'}, function (brushModel) {
-
         payload && payload.type === 'takeGlobalCursor' && brushModel.setBrushOption(
             payload.key === 'brush' ? payload.brushOption : {brushType: false}
         );
+    });
+    layoutCovers(ecModel);
+});
 
+export function layoutCovers(ecModel) {
+    ecModel.eachComponent({mainType: 'brush'}, function (brushModel) {
         var brushTargetManager = brushModel.brushTargetManager = new BrushTargetManager(brushModel.option, ecModel);
-
         brushTargetManager.setInputRanges(brushModel.areas, ecModel);
     });
-});
+}
 
 /**
  * Register the visual encoding if this modules required.

src/component/helper/MapDraw.js

@@ -181,13 +181,13 @@ MapDraw.prototype = {
         var regionsGroup = this._regionsGroup;
         var group = this.group;
 
-        if (geo._roamTransformable.transform) {
-            group.transform = geo._roamTransformable.transform.slice();
-            group.decomposeTransform();
-        }
+        var transformInfo = geo.getTransformInfo();
+        group.transform = transformInfo.roamTransform;
+        group.decomposeTransform();
+        group.dirty();
 
-        var scale = geo._rawTransformable.scale;
-        var position = geo._rawTransformable.position;
+        var scale = transformInfo.rawScale;
+        var position = transformInfo.rawPosition;
 
         regionsGroup.removeAll();
 

src/component/legend/ScrollableLegendView.js

@@ -459,26 +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;
-                }
-            });
-        }
+        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;
     }

src/component/marker/MarkLineModel.js

@@ -38,7 +38,8 @@ export default MarkerModel.extend({
         },
         label: {
             show: true,
-            position: 'end'
+            position: 'end',
+            distance: 5
         },
         lineStyle: {
             type: 'dashed'

src/component/marker/markerHelper.js

@@ -69,8 +69,8 @@ function markerTypeCalculatorWithExtent(
 
     var dataIndex = data.indicesOfNearest(calcDataDim, value)[0];
     coordArr[otherCoordIndex] = data.get(otherDataDim, dataIndex);
-    coordArr[targetCoordIndex] = data.get(targetDataDim, dataIndex);
-
+    coordArr[targetCoordIndex] = data.get(calcDataDim, dataIndex);
+    var coordArrValue = data.get(targetDataDim, dataIndex);
     // Make it simple, do not visit all stacked value to count precision.
     var precision = numberUtil.getPrecision(data.get(targetDataDim, dataIndex));
     precision = Math.min(precision, 20);
@@ -78,7 +78,7 @@ function markerTypeCalculatorWithExtent(
         coordArr[targetCoordIndex] = +coordArr[targetCoordIndex].toFixed(precision);
     }
 
-    return coordArr;
+    return [coordArr, coordArrValue];
 }
 
 var curry = zrUtil.curry;
@@ -141,12 +141,15 @@ export function dataTransform(seriesModel, item) {
             var otherCoordIndex = indexOf(dims, axisInfo.baseAxis.dim);
             var targetCoordIndex = indexOf(dims, axisInfo.valueAxis.dim);
 
-            item.coord = markerTypeCalculator[item.type](
+            var coordInfo = markerTypeCalculator[item.type](
                 data, axisInfo.baseDataDim, axisInfo.valueDataDim,
                 otherCoordIndex, targetCoordIndex
             );
+            item.coord = coordInfo[0];
             // Force to use the value of calculated value.
-            item.value = item.coord[targetCoordIndex];
+            // let item use the value without stack.
+            item.value = coordInfo[1];
+
         }
         else {
             // FIXME Only has one of xAxis and yAxis.

src/component/tooltip/TooltipContent.js

@@ -20,6 +20,7 @@
 import * as zrUtil from 'zrender/src/core/util';
 import * as zrColor from 'zrender/src/tool/color';
 import * as eventUtil from 'zrender/src/core/event';
+import * as domUtil from 'zrender/src/core/dom';
 import env from 'zrender/src/core/env';
 import * as formatUtil from '../../util/format';
 
@@ -121,24 +122,63 @@ function assembleCssText(tooltipModel) {
     return cssText.join(';') + ';';
 }
 
+// If not able to make, do not modify the input `out`.
+function makeStyleCoord(out, zr, appendToBody, zrX, zrY) {
+    var zrPainter = zr && zr.painter;
+
+    if (appendToBody) {
+        var zrViewportRoot = zrPainter && zrPainter.getViewportRoot();
+        if (zrViewportRoot) {
+            // Some APPs might use scale on body, so we support CSS transform here.
+            domUtil.transformLocalCoord(out, zrViewportRoot, document.body, zrX, zrY);
+        }
+    }
+    else {
+        out[0] = zrX;
+        out[1] = zrY;
+        // xy should be based on canvas root. But tooltipContent is
+        // the sibling of canvas root. So padding of ec container
+        // should be considered here.
+        var viewportRootOffset = zrPainter && zrPainter.getViewportRootOffset();
+        if (viewportRootOffset) {
+            out[0] += viewportRootOffset.offsetLeft;
+            out[1] += viewportRootOffset.offsetTop;
+        }
+    }
+}
+
 /**
  * @alias module:echarts/component/tooltip/TooltipContent
+ * @param {HTMLElement} container
+ * @param {ExtensionAPI} api
+ * @param {Object} [opt]
+ * @param {boolean} [opt.appendToBody]
+ *        `false`: the DOM element will be inside the container. Default value.
+ *        `true`: the DOM element will be appended to HTML body, which avoid
+ *                some overflow clip but intrude outside of the container.
  * @constructor
  */
-function TooltipContent(container, api) {
+function TooltipContent(container, api, opt) {
     if (env.wxa) {
         return null;
     }
 
     var el = document.createElement('div');
+    el.domBelongToZr = true;
+    this.el = el;
     var zr = this._zr = api.getZr();
+    var appendToBody = this._appendToBody = opt && opt.appendToBody;
 
-    this.el = el;
+    this._styleCoord = [0, 0];
 
-    this._x = api.getWidth() / 2;
-    this._y = api.getHeight() / 2;
+    makeStyleCoord(this._styleCoord, zr, appendToBody, api.getWidth() / 2, api.getHeight() / 2);
 
-    container.appendChild(el);
+    if (appendToBody) {
+        document.body.appendChild(el);
+    }
+    else {
+        container.appendChild(el);
+    }
 
     this._container = container;
 
@@ -172,7 +212,8 @@ function TooltipContent(container, api) {
             // Try trigger zrender event to avoid mouse
             // in and out shape too frequently
             var handler = zr.handler;
-            eventUtil.normalizeEvent(container, e, true);
+            var zrViewportRoot = zr.painter.getViewportRoot();
+            eventUtil.normalizeEvent(zrViewportRoot, e, true);
             handler.dispatch('mousemove', e);
         }
     };
@@ -217,12 +258,13 @@ TooltipContent.prototype = {
     show: function (tooltipModel) {
         clearTimeout(this._hideTimeout);
         var el = this.el;
+        var styleCoord = this._styleCoord;
 
         el.style.cssText = gCssText + assembleCssText(tooltipModel)
             // Because of the reason described in:
             // http://stackoverflow.com/questions/21125587/css3-transition-not-working-in-chrome-anymore
             // we should set initial value to `left` and `top`.
-            + ';left:' + this._x + 'px;top:' + this._y + 'px;'
+            + ';left:' + styleCoord[0] + 'px;top:' + styleCoord[1] + 'px;'
             + (tooltipModel.get('extraCssText') || '');
 
         el.style.display = el.innerHTML ? 'block' : 'none';
@@ -250,23 +292,13 @@ TooltipContent.prototype = {
         return [el.clientWidth, el.clientHeight];
     },
 
-    moveTo: function (x, y) {
-        // xy should be based on canvas root. But tooltipContent is
-        // the sibling of canvas root. So padding of ec container
-        // should be considered here.
-        var zr = this._zr;
-        var viewportRootOffset;
-        if (zr && zr.painter && (viewportRootOffset = zr.painter.getViewportRootOffset())) {
-            x += viewportRootOffset.offsetLeft;
-            y += viewportRootOffset.offsetTop;
-        }
+    moveTo: function (zrX, zrY) {
+        var styleCoord = this._styleCoord;
+        makeStyleCoord(styleCoord, this._zr, this._appendToBody, zrX, zrY);
 
         var style = this.el.style;
-        style.left = x + 'px';
-        style.top = y + 'px';
-
-        this._x = x;
-        this._y = y;
+        style.left = styleCoord[0] + 'px';
+        style.top = styleCoord[1] + 'px';
     },
 
     hide: function () {
@@ -292,6 +324,10 @@ TooltipContent.prototype = {
         return this._show;
     },
 
+    dispose: function () {
+        this.el.parentNode.removeChild(this.el);
+    },
+
     getOuterSize: function () {
         var width = this.el.clientWidth;
         var height = this.el.clientHeight;
@@ -308,6 +344,7 @@ TooltipContent.prototype = {
 
         return {width: width, height: height};
     }
+
 };
 
 export default TooltipContent;

src/component/tooltip/TooltipView.js

@@ -56,7 +56,9 @@ export default echarts.extendComponentView({
 
         var tooltipContent;
         if (this._renderMode === 'html') {
-            tooltipContent = new TooltipContent(api.getDom(), api);
+            tooltipContent = new TooltipContent(api.getDom(), api, {
+                appendToBody: tooltipModel.get('appendToBody', true)
+            });
             this._newLine = '<br/>';
         }
         else {
@@ -209,7 +211,6 @@ export default echarts.extendComponentView({
                 offsetX: payload.x,
                 offsetY: payload.y,
                 position: payload.position,
-                event: {},
                 dataByCoordSys: payload.dataByCoordSys,
                 tooltipOption: payload.tooltipOption
             }, dispatchAction);
@@ -228,8 +229,7 @@ export default echarts.extendComponentView({
                     offsetX: cx,
                     offsetY: cy,
                     position: payload.position,
-                    target: pointInfo.el,
-                    event: {}
+                    target: pointInfo.el
                 }, dispatchAction);
             }
         }
@@ -246,8 +246,7 @@ export default echarts.extendComponentView({
                 offsetX: payload.x,
                 offsetY: payload.y,
                 position: payload.position,
-                target: api.getZr().findHover(payload.x, payload.y).target,
-                event: {}
+                target: api.getZr().findHover(payload.x, payload.y).target
             }, dispatchAction);
         }
     },
@@ -353,7 +352,9 @@ export default echarts.extendComponentView({
     _showAxisTooltip: function (dataByCoordSys, e) {
         var ecModel = this._ecModel;
         var globalTooltipModel = this._tooltipModel;
+
         var point = [e.offsetX, e.offsetY];
+
         var singleDefaultHTML = [];
         var singleParamsList = [];
         var singleTooltipModel = buildTooltipModel([
@@ -609,6 +610,7 @@ export default echarts.extendComponentView({
     _updatePosition: function (tooltipModel, positionExpr, x, y, content, params, el) {
         var viewWidth = this._api.getWidth();
         var viewHeight = this._api.getHeight();
+
         positionExpr = positionExpr || tooltipModel.get('position');
 
         var contentSize = content.getSize();
@@ -727,7 +729,7 @@ export default echarts.extendComponentView({
         if (env.node) {
             return;
         }
-        this._tooltipContent.hide();
+        this._tooltipContent.dispose();
         globalListener.unregister('itemTooltip', api);
     }
 });

src/coord/View.js

@@ -185,7 +185,6 @@ View.prototype = {
     /**
      * Remove roam
      */
-
     _updateCenterAndZoom: function () {
         // Must update after view transform updated
         var rawTransformMatrix = this._rawTransformable.getLocalTransform();
@@ -229,6 +228,16 @@ View.prototype = {
         this.decomposeTransform();
     },
 
+    getTransformInfo: function () {
+        var roamTransform = this._roamTransformable.transform;
+        var rawTransformable = this._rawTransformable;
+        return {
+            roamTransform: roamTransform ? zrUtil.slice(roamTransform) : matrix.create(),
+            rawScale: zrUtil.slice(rawTransformable.scale),
+            rawPosition: zrUtil.slice(rawTransformable.position)
+        };
+    },
+
     /**
      * @return {module:zrender/core/BoundingRect}
      */

src/coord/radar/Radar.js

@@ -231,7 +231,7 @@ Radar.prototype.update = function (ecModel, api) {
                 interval = increaseInterval(interval);
             }
             // PENDING
-            var center = Math.round((rawExtent[0] + rawExtent[1]) / 2 / interval) * interval;
+            var center = Math.ceil((rawExtent[0] + rawExtent[1]) / 2 / interval) * interval;
             var halfSplitNumber = Math.round(splitNumber / 2);
             scale.setExtent(
                 numberUtil.round(center - halfSplitNumber * interval),

src/layout/barGrid.js

@@ -420,11 +420,6 @@ export function layout(seriesType, ecModel) {
             var value = data.get(valueDim, idx);
             var baseValue = data.get(baseDim, idx);
 
-            // If dataZoom in filteMode: 'empty', the baseValue can be set as NaN in "axisProxy".
-            if (isNaN(value) || isNaN(baseValue)) {
-                continue;
-            }
-
             var sign = value >= 0 ? 'p' : 'n';
             var baseCoord = valueAxisStart;
 
@@ -498,6 +493,7 @@ export var largeLayout = {
 
         var data = seriesModel.getData();
         var cartesian = seriesModel.coordinateSystem;
+        var coordLayout = cartesian.grid.getRect();
         var baseAxis = cartesian.getBaseAxis();
         var valueAxis = cartesian.getOtherAxis(baseAxis);
         var valueDim = data.mapDimension(valueAxis.dim);
@@ -517,6 +513,7 @@ export var largeLayout = {
         function progress(params, data) {
             var count = params.count;
             var largePoints = new LargeArr(count * 2);
+            var largeBackgroundPoints = new LargeArr(count * 2);
             var largeDataIndices = new LargeArr(count);
             var dataIndex;
             var coord = [];
@@ -530,7 +527,9 @@ export var largeLayout = {
 
                 coord = cartesian.dataToPoint(valuePair, null, coord);
                 // Data index might not be in order, depends on `progressiveChunkMode`.
+                largeBackgroundPoints[pointsOffset] = valueAxisHorizontal ? coordLayout.x + coordLayout.width : coord[0];
                 largePoints[pointsOffset++] = coord[0];
+                largeBackgroundPoints[pointsOffset] = valueAxisHorizontal ? coord[1] : coordLayout.y + coordLayout.height;
                 largePoints[pointsOffset++] = coord[1];
                 largeDataIndices[idxOffset++] = dataIndex;
             }
@@ -538,8 +537,10 @@ export var largeLayout = {
             data.setLayout({
                 largePoints: largePoints,
                 largeDataIndices: largeDataIndices,
+                largeBackgroundPoints: largeBackgroundPoints,
                 barWidth: barWidth,
                 valueAxisStart: getValueAxisStart(baseAxis, valueAxis, false),
+                backgroundStart: valueAxisHorizontal ? coordLayout.x : coordLayout.y,
                 valueAxisHorizontal: valueAxisHorizontal
             });
         }

src/layout/barPolar.js

@@ -88,10 +88,6 @@ function barLayoutPolar(seriesType, ecModel, api) {
             var value = data.get(valueDim, idx);
             var baseValue = data.get(baseDim, idx);
 
-            if (isNaN(value)) {
-                continue;
-            }
-
             var sign = value >= 0 ? 'p' : 'n';
             var baseCoord = valueAxisStart;
 

src/scale/Interval.js

@@ -101,7 +101,7 @@ var IntervalScale = Scale.extend({
 
         if (extent[0] < niceTickExtent[0]) {
             if (expandToNicedExtent) {
-                ticks.push(roundNumber(niceTickExtent[0] - interval));
+                ticks.push(roundNumber(niceTickExtent[0] - interval, intervalPrecision));
             }
             else {
                 ticks.push(extent[0]);
@@ -127,7 +127,7 @@ var IntervalScale = Scale.extend({
         var lastNiceTick = ticks.length ? ticks[ticks.length - 1] : niceTickExtent[1];
         if (extent[1] > lastNiceTick) {
             if (expandToNicedExtent) {
-                ticks.push(lastNiceTick + interval);
+                ticks.push(roundNumber(lastNiceTick + interval, intervalPrecision));
             }
             else {
                 ticks.push(extent[1]);

src/stream/Scheduler.js

@@ -260,6 +260,14 @@ function performStageTasks(scheduler, stageHandlers, ecModel, payload, opt) {
                     task.dirty();
                 }
                 var performArgs = scheduler.getPerformArgs(task, opt.block);
+                // FIXME
+                // if intending to decalare `performRawSeries` in handlers, only
+                // stream-independent (specifically, data item independent) operations can be
+                // performed. Because is a series is filtered, most of the tasks will not
+                // be performed. A stream-dependent operation probably cause wrong biz logic.
+                // Perhaps we should not provide a separate callback for this case instead
+                // of providing the config `performRawSeries`. The stream-dependent operaions
+                // and stream-independent operations should better not be mixed.
                 performArgs.skip = !stageHandler.performRawSeries
                     && ecModel.isSeriesFiltered(task.context.model);
                 updatePayload(task, payload);

src/util/graphic.js

@@ -1124,7 +1124,7 @@ function animateOrSetProps(isUpdate, el, props, animatableModel, dataIndex, cb)
  * configuration in series.
  *
  * Caution: this method will stop previous animation.
- * So if do not use this method to one element twice before
+ * So do not use this method to one element twice before
  * animation starts, unless you know what you are doing.
  *
  * @param {module:zrender/Element} el
@@ -1150,7 +1150,7 @@ export function updateProps(el, props, animatableModel, dataIndex, cb) {
  * configuration in series.
  *
  * Caution: this method will stop previous animation.
- * So if do not use this method to one element twice before
+ * So do not use this method to one element twice before
  * animation starts, unless you know what you are doing.
  *
  * @param {module:zrender/Element} el

test/bar-background.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>
+        <style>
+            html, body, #main {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+            }
+            #main {
+                background: #fff;
+            }
+        </style>
+
+        <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([
+                'echarts'
+            ], function (echarts) {
+
+                var xAxisData = [];
+                var data1 = [];
+                var data2 = [];
+                var data3 = [];
+                var data4 = [];
+
+                for (var i = 0; i < 100; i++) {
+                    xAxisData.push('类目' + i);
+                    data1.push((Math.random() * 5).toFixed(2));
+                    data2.push(Math.random().toFixed(2));
+                    data3.push((Math.random() + 0.5).toFixed(2));
+                    data4.push((Math.random() + 0.3).toFixed(2));
+                }
+
+                var data = [["4.70","4.69","2.48","0.77","3.08","4.57","2.68","3.35","0.37","1.86","2.68","0.64","1.82","1.88","0.31","0.45","4.48","3.08","1.58","2.98","1.87","0.96","3.43","2.58","0.41","2.69","0.59","3.47","4.33","1.75","0.51","1.01","1.60","3.62","2.29","2.40","1.52","2.30","0.18","3.99","0.26","2.92","2.94","0.54","2.98","3.71","2.24","0.32","1.98","2.56","1.81","4.67","2.49","1.73","1.79","2.79","3.39","1.83","3.24","3.76","1.23","1.69","3.55","2.66","1.83","3.69","2.70","0.75","0.71","1.44","3.23","1.49","1.50","3.61","4.41","1.26","2.93","2.84","4.11","0.80","2.67","2.59","2.71","4.85","1.28","1.21","4.32","4.04","1.15","4.38","4.41","4.94","4.13","0.86","1.97","3.58","3.02","1.29","1.47","3.75"],["0.78","0.90","0.54","0.75","0.68","0.68","0.84","0.87","0.78","0.79","0.77","0.34","0.81","0.80","0.28","0.87","0.98","0.92","0.66","0.87","0.88","0.56","0.34","0.67","0.60","0.00","0.22","0.87","0.81","0.69","0.41","0.02","0.18","0.55","0.48","0.90","0.62","0.17","0.37","0.35","0.31","0.78","0.34","0.56","0.22","0.87","0.55","0.94","0.58","0.66","0.33","0.73","0.78","0.44","0.79","0.12","0.81","0.77","0.33","0.30","0.86","0.87","0.09","0.91","0.90","0.34","0.76","0.93","0.55","0.41","0.63","0.96","0.80","0.41","0.53","0.53","0.66","0.24","0.24","0.99","0.92","0.85","0.44","0.92","0.28","0.61","0.20","0.74","0.52","0.91","0.42","0.08","0.00","0.57","0.81","0.39","0.41","0.72","0.02","0.20"],["1.17","0.65","0.98","1.08","1.02","1.41","1.01","1.17","0.63","0.94","0.78","1.43","0.67","1.09","1.29","0.60","0.50","1.38","0.76","0.94","0.79","1.44","0.55","1.48","1.13","0.63","1.07","0.57","1.43","0.81","0.87","0.70","1.04","1.43","1.00","0.50","0.54","0.57","0.97","0.58","1.19","0.73","0.76","0.75","1.39","0.93","0.60","1.28","1.14","1.18","0.60","0.59","1.46","0.64","1.44","0.59","1.49","0.84","0.71","1.44","1.11","1.18","1.40","0.64","1.15","1.07","1.35","0.86","1.13","1.41","1.03","0.57","1.44","0.93","1.47","1.16","1.40","1.14","0.97","0.78","1.49","0.59","0.99","1.35","0.88","1.02","1.16","1.07","0.81","0.87","1.34","0.98","1.17","1.46","0.71","1.13","0.80","1.24","0.76","0.68"],["1.04","0.54","0.55","1.05","1.20","1.13","0.53","0.63","0.82","0.52","0.86","0.33","0.64","1.14","0.47","0.72","0.97","1.18","1.02","0.53","1.14","1.24","1.13","0.60","0.47","0.94","0.64","0.43","0.71","0.33","0.46","0.82","0.80","0.97","0.43","1.29","0.65","0.92","0.63","0.58","0.31","1.09","0.35","0.43","1.19","0.47","0.59","0.52","0.79","0.69","0.54","0.39","0.33","1.26","0.40","0.76","0.80","0.96","0.82","1.26","0.70","0.50","0.67","1.27","1.24","0.49","0.94","0.97","0.90","1.03","1.28","0.46","0.57","1.23","0.40","0.71","1.08","0.51","1.03","0.38","0.81","0.44","1.02","0.79","1.08","1.01","0.66","0.80","0.65","0.97","0.56","0.33","0.61","0.92","0.40","0.77","1.05","1.21","0.34","0.84"]];
+
+                var option = {
+                    legend: {
+                        data: ['bar', 'bar2', 'bar3', 'bar4'],
+                        align: 'left'
+                    },
+                    toolbox: {
+                        // y: 'bottom',
+                        feature: {
+                            magicType: {
+                                type: ['line', 'bar', 'stack', 'tiled']
+                            },
+                            dataZoom: {
+                                yAxisIndex: false
+                            },
+                            dataView: {},
+                            saveAsImage: {
+                                pixelRatio: 2
+                            }
+                        }
+                    },
+                    tooltip: {},
+                    dataZoom: [{
+                        startValue: 48,
+                        endValue: 99,
+                        type: 'inside'
+                    }, {
+                        startValue: 48,
+                        endValue: 99,
+                        type: 'slider'
+                    }],
+                    xAxis: {
+                        data: xAxisData,
+                        silent: false,
+                        splitLine: {
+                            show: false
+                        },
+                        splitArea: {
+                            show: false
+                        }
+                    },
+                    yAxis: {
+                        splitArea: {
+                            show: false
+                        }
+                    },
+                    series: [{
+                        name: 'bar',
+                        type: 'bar',
+                        stack: 'one',
+                        data: data[0],
+                        showBackground: true
+                    }, {
+                        show: false,
+                        name: 'bar2',
+                        type: 'bar',
+                        stack: 'one',
+                        data: data[1]
+                    }, {
+                        name: 'bar3',
+                        type: 'bar',
+                        stack: 'two',
+                        data: data[2]
+                    }, {
+                        name: 'bar4',
+                        type: 'bar',
+                        stack: 'two',
+                        data: data[3],
+                        silent: true
+                    }],
+                    animationDelay: function (idx) {
+                        return idx * 5;
+                    },
+                    animationDelayUpdate: function (idx) {
+                        return idx * 5;
+                    }
+                }
+
+                var chart = testHelper.create(echarts, 'main0', {
+                    option: option,
+                });
+
+                chart.on('click', function (params) {
+                    console.log(params);
+                });
+            });
+        </script>
+
+
+        <script>
+
+            require([
+                'echarts'/*, 'map/js/china' */
+            ], function (echarts) {
+
+                var option = {
+                    xAxis: [{
+                        type: 'category'
+                    }, {
+                        gridIndex: 1
+                    }],
+                    yAxis: [{
+                    }, {
+                        type: 'category',
+                        gridIndex: 1
+                    }],
+                    grid: [{
+                        containLabel: true,
+                        left: 10,
+                        right: '55%'
+                    }, {
+                        containLabel: true,
+                        left: '55%',
+                        right: 10
+                    }],
+                    tooltip: {},
+                    series: [{
+                        type: 'bar',
+                        large: true,
+                        largeThreshold: 2,
+                        data: [
+                            ['mm', 33],
+                            ['yy', -44],
+                            ['tt', 55],
+                            ['rr', 66]
+                        ],
+                        showBackground: true,
+                        backgroundStyle: {
+                            color: 'rgba(0, 0, 255, 0.2)'
+                        }
+                    }, {
+                        type: 'bar',
+                        large: true,
+                        largeThreshold: 2,
+                        xAxisIndex: 1,
+                        yAxisIndex: 1,
+                        encode: {
+                            x: 1,
+                            y: 0
+                        },
+                        data: [
+                            ['mm', 33],
+                            ['yy', -44],
+                            ['tt', 55],
+                            ['rr', 66]
+                        ],
+                        showBackground: true,
+                        backgroundStyle: {
+                            color: 'rgba(0, 0, 255, 0.2)'
+                        }
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'main1', {
+                    option: option,
+                    title: [
+                        'large mode'
+                    ]
+                });
+            });
+
+        </script>
+
+
+
+        <script>
+
+            require([
+                'echarts'/*, 'map/js/china' */
+            ], function (echarts) {
+
+                var option = {
+                    xAxis: [{
+                        type: 'category'
+                    }, {
+                        gridIndex: 1
+                    }],
+                    yAxis: [{
+                    }, {
+                        type: 'category',
+                        gridIndex: 1
+                    }],
+                    grid: [{
+                        containLabel: true,
+                        left: 10,
+                        right: '55%'
+                    }, {
+                        containLabel: true,
+                        left: '55%',
+                        right: 10
+                    }],
+                    tooltip: {},
+                    series: [{
+                        type: 'bar',
+                        data: [
+                            ['mm', 33],
+                            ['yy', -44],
+                            ['tt', 55],
+                            ['rr', 66]
+                        ],
+                        showBackground: true,
+                        backgroundStyle: {
+                            color: 'rgba(0, 0, 255, 0.2)'
+                        }
+                    }, {
+                        type: 'bar',
+                        xAxisIndex: 1,
+                        yAxisIndex: 1,
+                        encode: {
+                            x: 1,
+                            y: 0
+                        },
+                        data: [
+                            ['mm', 33],
+                            ['yy', -44],
+                            ['tt', 55],
+                            ['rr', 66]
+                        ],
+                        showBackground: true,
+                        backgroundStyle: {
+                            color: 'rgba(0, 0, 255, 0.2)'
+                        }
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'main2', {
+                    option: option,
+                    title: [
+                        'normal bars'
+                    ]
+                });
+            });
+
+        </script>
+
+
+
+        <script>
+
+            require([
+                'echarts'
+                // 'echarts/chart/bar',
+                // 'echarts/component/polar',
+                // 'zrender/vml/vml'
+            ], function (echarts) {
+
+                var chart = echarts.init(document.getElementById('main3'));
+
+                var option = {
+                    angleAxis: {
+                        type: 'category',
+                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+                        z: 10
+                    },
+                    tooltip: {
+                    },
+                    radiusAxis: {
+                    },
+                    polar: {
+                        center: ['50%', '50%']
+                    },
+                    series: [{
+                        type: 'bar',
+                        data: [1, 2, '-', 3, 0, 5, 7],
+                        coordinateSystem: 'polar',
+                        barMaxWidth: '50%',
+                        barMinHeight: 10,
+                        showBackground: true
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'main3', {
+                    option: option,
+                    title: [
+                        'polar bars'
+                    ]
+                });
+            });
+        </script>
+
+        <script>
+
+            require([
+                'echarts'
+                // 'echarts/chart/bar',
+                // 'echarts/component/polar',
+                // 'zrender/vml/vml'
+            ], function (echarts) {
+
+                var chart = echarts.init(document.getElementById('main4'));
+
+                var option = {
+                    angleAxis: {
+                        triggerEvent: true
+                    },
+                    radiusAxis: {
+                        type: 'category',
+                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+                        z: 10,
+                        triggerEvent: true
+                    },
+                    polar: {
+                    },
+                    tooltip: {},
+                    series: [{
+                        type: 'bar',
+                        data: [1, '-', 4, 3, '-', 5, 7],
+                        coordinateSystem: 'polar',
+                        itemStyle: {
+                            normal: {
+                                color: '#00f'
+                            }
+                        },
+                        barWidth: '50%',
+                        showBackground: true
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'main4', {
+                    option: option,
+                    title: [
+                        'polar bars'
+                    ]
+                });
+            });
+        </script>
+
+        <script>
+
+            require([
+                'echarts',
+                // 'echarts/chart/bar',
+                // 'echarts/component/legend',
+                // 'echarts/component/polar',
+                // 'zrender/vml/vml'
+            ], function (echarts) {
+
+                var chart = echarts.init(document.getElementById('main5'));
+
+                var option = {
+                    angleAxis: {
+                        type: 'category',
+                        data: ['周一', '周二', '周三', '周四'],
+                        z: 10
+                    },
+                    radiusAxis: {
+                    },
+                    polar: {
+                    },
+                    series: [{
+                        type: 'bar',
+                        data: [1, 2, 3, 4],
+                        coordinateSystem: 'polar',
+                        name: 'A',
+                        showBackground: true
+                    }, {
+                        type: 'bar',
+                        data: [2, 4, 6, 8],
+                        coordinateSystem: 'polar',
+                        name: 'B'
+                    }, {
+                        type: 'bar',
+                        data: [1, 2, 3, 4],
+                        coordinateSystem: 'polar',
+                        name: 'C'
+                    }],
+                    legend: {
+                        show: true,
+                        data: ['A', 'B', 'C']
+                    }
+                };
+
+                var chart = testHelper.create(echarts, 'main5', {
+                    option: option,
+                    title: [
+                        'polar bars'
+                    ]
+                });
+            });
+        </script>
+
+
+        <script>
+
+            require([
+                'echarts'
+                // 'echarts/chart/bar',
+                // 'echarts/component/legend',
+                // 'echarts/component/polar',
+                // 'echarts/component/grid',
+                // 'zrender/vml/vml'
+            ], function (echarts) {
+
+                var chart = echarts.init(document.getElementById('main6'));
+
+                var option = {
+                    angleAxis: {
+                        // clockwise: false
+                    },
+                    radiusAxis: {
+                        type: 'category',
+                        data: ['周一', '周二', '周三', '周四'],
+                        z: 10
+                    },
+                    polar: {
+                    },
+                    series: [{
+                        type: 'bar',
+                        data: [1, 2, 3, 4],
+                        coordinateSystem: 'polar',
+                        name: 'A',
+                        showBackground: true
+                    }, {
+                        type: 'bar',
+                        data: [2, 4, 6, 8],
+                        coordinateSystem: 'polar',
+                        name: 'B'
+                    }, {
+                        type: 'bar',
+                        data: [1, 2, 3, 4],
+                        coordinateSystem: 'polar',
+                        name: 'C'
+                    }],
+                    legend: {
+                        show: true,
+                        data: ['A', 'B', 'C']
+                    }
+                };
+
+                var chart = testHelper.create(echarts, 'main6', {
+                    option: option,
+                    title: [
+                        'polar bars'
+                    ]
+                });
+            });
+        </script>
+    </body>
+</html>
\ No newline at end of file

test/bar-polar-basic-radial.html

@@ -63,7 +63,7 @@ under the License.
                     },
                     series: [{
                         type: 'bar',
-                        data: [1, 2, 4, 3, 0, 5, 7],
+                        data: [1, 2, '-', 3, 0, 5, 7],
                         coordinateSystem: 'polar',
                         barMaxWidth: '50%',
                         barMinHeight: 10

test/brush3.html

@@ -41,6 +41,7 @@ under the License.
 
         <div id="main1"></div>
         <div id="main0"></div>
+        <div id="main2"></div>
 
 
 
@@ -174,6 +175,73 @@ under the License.
 
 
 
+        <script>
+        require(['echarts'/*, 'map/js/china' */], function (echarts) {
+            var option;
+
+            var testGeoJson1 = {
+                'type': 'FeatureCollection',
+                'features': [
+                    {
+                        'geometry': {
+                            'type': 'Polygon',
+                            'coordinates': [
+                                [[2000, 3000], [5000, 3000], [5000, 8000], [2000, 8000]]
+                            ]
+                        },
+                        'properties': {
+                            'name': 'Some Area',
+                            'childNum': 1
+                        }
+                    }
+                ]
+            };
+            echarts.registerMap('test1', testGeoJson1);
+
+            var data = [];
+            var step = 500;
+            var lngStart = 1000;
+            var latStart = 2000;
+            for (var i = 0; i < 10; i++) {
+                for (var j = 0; j < 10; j++) {
+                    data.push({
+                        value: [lngStart + j * step, latStart + i * step],
+                        symbolSize: 5 + j * 5
+                    });
+                }
+            }
+
+            var option = {
+                geo: [{
+                    map: 'test1',
+                    zoom: 4,
+                    roam: true
+                }],
+                brush: {
+                    geoIndex: 0
+                },
+                series: [{
+                    type: 'scatter',
+                    coordinateSystem: 'geo',
+                    symbol: 'roundRect',
+                    symbolSize: 30,
+                    data: data
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main2', {
+                title: [
+                    'Test updateTransform: ',
+                    'click "保持选择", then brush, then roam the scatter',
+                    'the "cover" of the brush should be roamed together with the scatter'
+                ],
+                option: option
+            });
+        });
+        </script>
+
+
+
 
     </body>
 </html>
\ No newline at end of file

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/markLine.html

@@ -55,7 +55,61 @@ under the License.
                     data2.push(+Math.random().toFixed(2));
                 }
 
+                var markLine1 = [];
+                var markLine2 = [];
+                var positions = [
+                    'start', 'middle', 'end',
+                    'insideStart', 'insideStartTop', 'insideStartBottom',
+                    'insideMiddle', 'insideMiddleTop', 'insideMiddleBottom',
+                    'insideEnd', 'insideEndTop', 'insideEndBottom'
+                ];
+                for (var i = 0; i < positions.length; ++i) {
+                    markLine1.push({
+                        name: positions[i],
+                        yAxis: 1.8 - 0.2 * Math.floor(i / 3),
+                        label: {
+                            formatter: '{b}',
+                            position: positions[i]
+                        }
+                    });
+                    markLine1.push([{
+                        name: 'start: ' + positions[i],
+                        type: 'min',
+                        label: {
+                            formatter: positions[i],
+                            position: positions[i]
+                        }
+                    }, {
+                        name: 'end: ' + positions[i],
+                        type: 'max'
+                    }]);
+
+                    markLine2.push({
+                        name: positions[i],
+                        xAxis: Math.floor(i / 3),
+                        label: {
+                            formatter: '{b}',
+                            position: positions[i]
+                        }
+                    });
+                    markLine2.push([{
+                        name: 'start: ' + positions[i],
+                        type: 'min',
+                        valueIndex: 0,
+                        label: {
+                            formatter: positions[i],
+                            position: positions[i]
+                        }
+                    }, {
+                        name: 'end: ' + positions[i],
+                        valueIndex: 0,
+                        type: 'max'
+                    }]);
+                }
+
                 chart.setOption({
+                    animation: false,
+                    color: ['#f60', '#0c6'],
                     legend: {
                         data: ['line', 'line2']
                     },
@@ -77,7 +131,8 @@ under the License.
                     yAxis: {
                         splitLine: {
                             // show: false
-                        }
+                        },
+                        max: 2
                     },
                     series: [{
                         name: 'line',
@@ -87,26 +142,7 @@ under the License.
                         data: data1,
 
                         markLine: {
-                            data: [{
-                                name: '平均值',
-                                type: 'average',
-                                valueIndex: 1
-                            }, {
-                                name: '指定值',
-                                yAxis: 1
-                            }, [{
-                                name: '标签位置为中间',
-                                type: 'min',
-                                label: {
-                                    normal: {
-                                        formatter: '{b}',
-                                        position: 'middle'
-                                    }
-                                }
-                            }, {
-                                name: '标签位置为中间',
-                                type: 'max'
-                            }]]
+                            data: markLine1
                         }
                     }, {
                         name: 'line2',
@@ -116,20 +152,10 @@ under the License.
                         data: data2,
 
                         markLine: {
-                            data: [{
-                                name: '平均值',
-                                type: 'average',
-                                valueIndex: 0
-                            }, {
-                                name: '指定值',
-                                xAxis: 3
-                            }, [{
-                                name: '最大点',
-                                type: 'max'
-                            }, {
-                                x: '90%',
-                                yAxis: 'max'
-                            }]]
+                            data: markLine2,
+                            label: {
+                                distance: [20, 5]
+                            }
                         }
                     }]
                 });

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

@@ -34,7 +34,7 @@
   "boxplot-multi": 1,
   "brush": 7,
   "brush2": 3,
-  "brush3": 2,
+  "brush3": 3,
   "calendar-converter": 1,
   "calendar-heatmap": 1,
   "calendar-month": 2,
@@ -79,6 +79,7 @@
   "graph": 2,
   "graph-grid": 1,
   "graph-simple": 2,
+  "graphic-draggable": 1,
   "heatmap": 1,
   "heatmap-map": 1,
   "homepage3": 1,
@@ -86,7 +87,7 @@
   "hoverStyle2": 1,
   "label-position": 1,
   "largeLine-tooltip": 1,
-  "legend": 6,
+  "legend": 7,
   "legend-visualMapColor": 2,
   "line": 1,
   "line-animation": 1,
@@ -112,7 +113,7 @@
   "polar-rounded": 3,
   "polarLine": 1,
   "polarScatter": 1,
-  "radar": 1,
+  "radar": 2,
   "radar2": 1,
   "radar3": 1,
   "radar4": 1,
@@ -133,6 +134,7 @@
   "toolbox-title": 4,
   "toolbox-tooltip": 1,
   "tooltip": 10,
+  "tooltip-appendToBody": 4,
   "tooltip-axisPointer": 20,
   "tooltip-axisPointer2": 1,
   "tooltip-cascade": 4,
@@ -144,7 +146,7 @@
   "tree-legend": 1,
   "tree-radial": 1,
   "treemap-disk": 3,
-  "treemap-disk2": 2,
+  "treemap-disk2": 3,
   "treemap-obama": 2,
   "treemap-option": 1,
   "treemap-option2": 2,

test/runTest/actions/brush3.json

-[{"name":"Action 1","ops":[{"type":"mousedown","time":404,"x":22,"y":72},{"type":"mouseup","time":505,"x":22,"y":72},{"time":506,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":622,"x":26,"y":73},{"type":"mousemove","time":822,"x":154,"y":99},{"type":"mousemove","time":1029,"x":154,"y":105},{"type":"mousemove","time":1255,"x":153,"y":118},{"type":"mousemove","time":1455,"x":154,"y":120},{"type":"mousedown","time":1556,"x":154,"y":120},{"type":"mousemove","time":1593,"x":154,"y":120},{"type":"mousemove","time":1803,"x":306,"y":177},{"type":"mousemove","time":2006,"x":378,"y":198},{"type":"mousemove","time":2206,"x":386,"y":199},{"type":"mouseup","time":2449,"x":386,"y":199},{"time":2450,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2765,"x":387,"y":197},{"type":"mousemove","time":2965,"x":405,"y":158},{"type":"mousemove","time":3174,"x":405,"y":157},{"type":"mousedown","time":3181,"x":405,"y":157},{"type":"mouseup","time":3258,"x":405,"y":157},{"time":3259,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3724,"x":405,"y":157},{"type":"mousemove","time":3924,"x":131,"y":97},{"type":"mousemove","time":4124,"x":63,"y":76},{"type":"mousemove","time":4324,"x":43,"y":71},{"type":"mousemove","time":4575,"x":52,"y":70},{"type":"mousedown","time":4658,"x":52,"y":70},{"type":"mouseup","time":4743,"x":52,"y":70},{"time":4744,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":4775,"x":53,"y":70},{"type":"mousemove","time":4977,"x":206,"y":139},{"type":"mousemove","time":5177,"x":239,"y":138},{"type":"mousemove","time":5377,"x":235,"y":129},{"type":"mousedown","time":5434,"x":235,"y":129},{"type":"mousemove","time":5578,"x":190,"y":129},{"type":"mousemove","time":5781,"x":196,"y":176},{"type":"mousemove","time":5991,"x":281,"y":190},{"type":"mousemove","time":6204,"x":371,"y":182},{"type":"mousemove","time":6412,"x":389,"y":157},{"type":"mousemove","time":6620,"x":309,"y":118},{"type":"mouseup","time":6839,"x":295,"y":120},{"time":6840,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":6849,"x":295,"y":120},{"type":"mousemove","time":7050,"x":317,"y":122},{"type":"mousemove","time":7263,"x":386,"y":121},{"type":"mousemove","time":7463,"x":400,"y":119},{"type":"mousedown","time":7764,"x":400,"y":119},{"type":"mouseup","time":7849,"x":400,"y":119},{"time":7850,"delay":400,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1568030045858},{"name":"Action 2","ops":[{"type":"mousedown","time":378,"x":202,"y":401},{"type":"mousemove","time":521,"x":201,"y":400},{"type":"mousemove","time":722,"x":178,"y":377},{"type":"mousemove","time":923,"x":160,"y":352},{"type":"mousemove","time":1123,"x":150,"y":337},{"type":"mouseup","time":1514,"x":150,"y":337},{"time":1515,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":2314,"x":150,"y":337},{"type":"mousemove","time":2416,"x":150,"y":337},{"type":"mousemove","time":2633,"x":255,"y":338},{"type":"mousemove","time":2833,"x":284,"y":342},{"type":"mouseup","time":3083,"x":284,"y":342},{"time":3084,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3165,"x":284,"y":342}],"scrollY":116,"scrollX":0,"timestamp":1568030060979}]
\ No newline at end of file
+[{"name":"Action 1","ops":[{"type":"mousedown","time":404,"x":22,"y":72},{"type":"mouseup","time":505,"x":22,"y":72},{"time":506,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":622,"x":26,"y":73},{"type":"mousemove","time":822,"x":154,"y":99},{"type":"mousemove","time":1029,"x":154,"y":105},{"type":"mousemove","time":1255,"x":153,"y":118},{"type":"mousemove","time":1455,"x":154,"y":120},{"type":"mousedown","time":1556,"x":154,"y":120},{"type":"mousemove","time":1593,"x":154,"y":120},{"type":"mousemove","time":1803,"x":306,"y":177},{"type":"mousemove","time":2006,"x":378,"y":198},{"type":"mousemove","time":2206,"x":386,"y":199},{"type":"mouseup","time":2449,"x":386,"y":199},{"time":2450,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2765,"x":387,"y":197},{"type":"mousemove","time":2965,"x":405,"y":158},{"type":"mousemove","time":3174,"x":405,"y":157},{"type":"mousedown","time":3181,"x":405,"y":157},{"type":"mouseup","time":3258,"x":405,"y":157},{"time":3259,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3724,"x":405,"y":157},{"type":"mousemove","time":3924,"x":131,"y":97},{"type":"mousemove","time":4124,"x":63,"y":76},{"type":"mousemove","time":4324,"x":43,"y":71},{"type":"mousemove","time":4575,"x":52,"y":70},{"type":"mousedown","time":4658,"x":52,"y":70},{"type":"mouseup","time":4743,"x":52,"y":70},{"time":4744,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":4775,"x":53,"y":70},{"type":"mousemove","time":4977,"x":206,"y":139},{"type":"mousemove","time":5177,"x":239,"y":138},{"type":"mousemove","time":5377,"x":235,"y":129},{"type":"mousedown","time":5434,"x":235,"y":129},{"type":"mousemove","time":5578,"x":190,"y":129},{"type":"mousemove","time":5781,"x":196,"y":176},{"type":"mousemove","time":5991,"x":281,"y":190},{"type":"mousemove","time":6204,"x":371,"y":182},{"type":"mousemove","time":6412,"x":389,"y":157},{"type":"mousemove","time":6620,"x":309,"y":118},{"type":"mouseup","time":6839,"x":295,"y":120},{"time":6840,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":6849,"x":295,"y":120},{"type":"mousemove","time":7050,"x":317,"y":122},{"type":"mousemove","time":7263,"x":386,"y":121},{"type":"mousemove","time":7463,"x":400,"y":119},{"type":"mousedown","time":7764,"x":400,"y":119},{"type":"mouseup","time":7849,"x":400,"y":119},{"time":7850,"delay":400,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1568030045858},{"name":"Action 2","ops":[{"type":"mousedown","time":378,"x":202,"y":401},{"type":"mousemove","time":521,"x":201,"y":400},{"type":"mousemove","time":722,"x":178,"y":377},{"type":"mousemove","time":923,"x":160,"y":352},{"type":"mousemove","time":1123,"x":150,"y":337},{"type":"mouseup","time":1514,"x":150,"y":337},{"time":1515,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":2314,"x":150,"y":337},{"type":"mousemove","time":2416,"x":150,"y":337},{"type":"mousemove","time":2633,"x":255,"y":338},{"type":"mousemove","time":2833,"x":284,"y":342},{"type":"mouseup","time":3083,"x":284,"y":342},{"time":3084,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3165,"x":284,"y":342}],"scrollY":116,"scrollX":0,"timestamp":1568030060979},{"name":"Action 3","ops":[{"type":"mousemove","time":655,"x":531,"y":436},{"type":"mousemove","time":857,"x":630,"y":342},{"type":"mousemove","time":1058,"x":704,"y":277},{"type":"mousemove","time":1263,"x":740,"y":256},{"type":"mousemove","time":1485,"x":763,"y":221},{"type":"mousemove","time":1686,"x":757,"y":209},{"type":"mousemove","time":1913,"x":757,"y":209},{"type":"mousedown","time":2365,"x":757,"y":209},{"type":"mouseup","time":2375,"x":757,"y":209},{"time":2376,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2706,"x":755,"y":209},{"type":"mousemove","time":2906,"x":726,"y":216},{"type":"mousemove","time":3106,"x":705,"y":216},{"type":"mousemove","time":3313,"x":701,"y":215},{"type":"mousedown","time":3565,"x":701,"y":215},{"type":"mouseup","time":3574,"x":701,"y":215},{"time":3575,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3772,"x":696,"y":217},{"type":"mousemove","time":3973,"x":393,"y":372},{"type":"mousemove","time":4173,"x":331,"y":382},{"type":"mousemove","time":4380,"x":358,"y":369},{"type":"mousedown","time":4616,"x":358,"y":369},{"type":"mousemove","time":4625,"x":360,"y":370},{"type":"mousemove","time":4834,"x":429,"y":413},{"type":"mousemove","time":5053,"x":477,"y":430},{"type":"mousemove","time":5258,"x":524,"y":440},{"type":"mousemove","time":5484,"x":536,"y":442},{"type":"mouseup","time":5732,"x":536,"y":442},{"time":5733,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":5745,"x":542,"y":435},{"type":"mousemove","time":5949,"x":642,"y":296},{"type":"mousemove","time":6158,"x":675,"y":252},{"type":"mousemove","time":6368,"x":681,"y":231},{"type":"mousemove","time":6569,"x":699,"y":220},{"type":"mousemove","time":6785,"x":706,"y":215},{"type":"mousedown","time":6918,"x":706,"y":215},{"type":"mouseup","time":6927,"x":706,"y":215},{"time":6928,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":7122,"x":706,"y":215},{"type":"mousemove","time":7322,"x":556,"y":259},{"type":"mousemove","time":7522,"x":403,"y":305},{"type":"mousedown","time":7834,"x":403,"y":305},{"type":"mousemove","time":7844,"x":398,"y":305},{"type":"mousemove","time":8053,"x":316,"y":304},{"type":"mousemove","time":8255,"x":255,"y":308},{"type":"mousemove","time":8455,"x":319,"y":317},{"type":"mousemove","time":8665,"x":372,"y":311},{"type":"mousewheel","time":9072,"x":372,"y":311,"deltaY":-1},{"type":"mouseup","time":9084,"x":372,"y":311},{"time":9085,"delay":400,"type":"screenshot-auto"},{"type":"mousewheel","time":9094,"x":372,"y":311,"deltaY":-2},{"type":"mousewheel","time":9118,"x":372,"y":311,"deltaY":-2},{"type":"mousewheel","time":9149,"x":372,"y":311,"deltaY":-3},{"type":"mousewheel","time":9191,"x":372,"y":311,"deltaY":-1},{"type":"mousewheel","time":9272,"x":372,"y":311,"deltaY":-1},{"type":"mousewheel","time":9297,"x":372,"y":311,"deltaY":-3},{"type":"mousewheel","time":9327,"x":372,"y":311,"deltaY":-3},{"type":"mousewheel","time":9353,"x":372,"y":311,"deltaY":-4},{"type":"mousewheel","time":9383,"x":372,"y":311,"deltaY":-2},{"type":"mousewheel","time":9939,"x":372,"y":311,"deltaY":1},{"type":"mousewheel","time":9965,"x":372,"y":311,"deltaY":1},{"type":"mousewheel","time":9994,"x":372,"y":311,"deltaY":3},{"type":"mousewheel","time":10021,"x":372,"y":311,"deltaY":4},{"type":"mousewheel","time":10047,"x":372,"y":311,"deltaY":3},{"type":"mousewheel","time":10079,"x":372,"y":311,"deltaY":2},{"type":"mousewheel","time":10110,"x":372,"y":311,"deltaY":4},{"type":"mousewheel","time":10133,"x":372,"y":311,"deltaY":3},{"type":"mousewheel","time":10157,"x":372,"y":311,"deltaY":3},{"type":"mousewheel","time":10187,"x":372,"y":311,"deltaY":1},{"type":"mousewheel","time":10298,"x":372,"y":311,"deltaY":1},{"type":"mousewheel","time":10323,"x":372,"y":311,"deltaY":2},{"type":"mousewheel","time":10350,"x":372,"y":311,"deltaY":1},{"type":"mousewheel","time":10381,"x":372,"y":311,"deltaY":1},{"type":"mousemove","time":10748,"x":372,"y":312},{"type":"mousemove","time":10958,"x":434,"y":368},{"type":"mousedown","time":11149,"x":434,"y":368},{"type":"mousemove","time":11159,"x":432,"y":367},{"type":"mousemove","time":11359,"x":332,"y":352},{"type":"mousemove","time":11567,"x":291,"y":347},{"type":"mousemove","time":11780,"x":287,"y":346},{"type":"mousemove","time":11983,"x":313,"y":347},{"type":"mousemove","time":12186,"x":395,"y":322},{"type":"mousemove","time":12401,"x":486,"y":301},{"type":"mousemove","time":12609,"x":494,"y":302},{"type":"mouseup","time":12810,"x":494,"y":302},{"time":12811,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":12821,"x":510,"y":295},{"type":"mousemove","time":13030,"x":776,"y":210}],"scrollY":614,"scrollX":0,"timestamp":1578508396758}]
\ No newline at end of file

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/legend.json

-[{"name":"Action 1","ops":[{"type":"mousedown","time":287,"x":398,"y":538},{"type":"mousemove","time":321,"x":398,"y":538},{"type":"mousemove","time":534,"x":320,"y":484},{"type":"mousemove","time":743,"x":196,"y":432},{"type":"mouseup","time":1133,"x":196,"y":432},{"time":1134,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":1574,"x":196,"y":432},{"type":"mousemove","time":1646,"x":200,"y":432},{"type":"mousemove","time":1846,"x":372,"y":443},{"type":"mousemove","time":2048,"x":605,"y":452},{"type":"mousemove","time":2269,"x":664,"y":457},{"type":"mousemove","time":2488,"x":664,"y":458},{"type":"mouseup","time":2629,"x":664,"y":458},{"time":2630,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":3295,"x":664,"y":458},{"type":"mousemove","time":3348,"x":665,"y":458},{"type":"mousemove","time":3548,"x":736,"y":460},{"type":"mousemove","time":3767,"x":765,"y":462},{"type":"mousemove","time":4108,"x":765,"y":462},{"type":"mouseup","time":4122,"x":765,"y":462},{"time":4123,"delay":400,"type":"screenshot-auto"}],"scrollY":2102,"scrollX":0,"timestamp":1568042188728},{"name":"Action 2","ops":[{"type":"mousedown","time":476,"x":411,"y":530},{"type":"mousemove","time":610,"x":410,"y":530},{"type":"mousemove","time":820,"x":254,"y":457},{"type":"mousemove","time":1024,"x":219,"y":446},{"type":"mouseup","time":1259,"x":219,"y":446},{"time":1260,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":1819,"x":219,"y":446},{"type":"mousemove","time":1877,"x":223,"y":446},{"type":"mousemove","time":2120,"x":537,"y":451},{"type":"mousemove","time":2356,"x":652,"y":450},{"type":"mousemove","time":2662,"x":656,"y":450},{"type":"mouseup","time":2848,"x":656,"y":450},{"time":2849,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":3337,"x":656,"y":450},{"type":"mousemove","time":3376,"x":658,"y":450},{"type":"mousemove","time":3591,"x":766,"y":455},{"type":"mousemove","time":3813,"x":784,"y":455}],"scrollY":2488,"scrollX":0,"timestamp":1568042200067},{"name":"Action 3","ops":[{"type":"mousemove","time":118,"x":411,"y":506},{"type":"mousemove","time":351,"x":411,"y":506},{"type":"mousedown","time":469,"x":411,"y":506},{"type":"mousemove","time":568,"x":415,"y":501},{"type":"mousemove","time":773,"x":477,"y":455},{"type":"mousemove","time":1048,"x":544,"y":427},{"type":"mousemove","time":1310,"x":545,"y":427},{"type":"mousemove","time":1494,"x":545,"y":427},{"type":"mouseup","time":1615,"x":545,"y":428},{"time":1616,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1709,"x":530,"y":429},{"type":"mousemove","time":1918,"x":497,"y":414},{"type":"mousemove","time":2119,"x":489,"y":411},{"type":"mousedown","time":2506,"x":489,"y":411},{"type":"mouseup","time":2593,"x":489,"y":411},{"time":2594,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":3705,"x":489,"y":411},{"type":"mouseup","time":3772,"x":489,"y":411},{"time":3773,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3819,"x":489,"y":411},{"type":"mousemove","time":4019,"x":489,"y":411},{"type":"mousedown","time":4628,"x":489,"y":411},{"type":"mouseup","time":4692,"x":489,"y":411},{"time":4693,"delay":400,"type":"screenshot-auto"}],"scrollY":2898,"scrollX":0,"timestamp":1568042216430},{"name":"Action 4","ops":[{"type":"mousedown","time":544,"x":412,"y":484},{"type":"mousemove","time":694,"x":411,"y":483},{"type":"mousemove","time":894,"x":284,"y":431},{"type":"mousemove","time":1094,"x":195,"y":408},{"type":"mousemove","time":1294,"x":164,"y":400},{"type":"mouseup","time":1564,"x":164,"y":400},{"time":1565,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1887,"x":164,"y":400},{"type":"mousemove","time":2087,"x":163,"y":403},{"type":"mousedown","time":2259,"x":163,"y":403},{"type":"mousemove","time":2287,"x":163,"y":402},{"type":"mousemove","time":2490,"x":253,"y":349},{"type":"mousemove","time":2690,"x":330,"y":316},{"type":"mousemove","time":2894,"x":330,"y":316},{"type":"mouseup","time":3013,"x":330,"y":316},{"time":3014,"delay":400,"type":"screenshot-auto"}],"scrollY":3293,"scrollX":0,"timestamp":1568042227380},{"name":"Action 5","ops":[{"type":"mousemove","time":255,"x":313,"y":199},{"type":"mousemove","time":455,"x":312,"y":188},{"type":"mousemove","time":775,"x":312,"y":187},{"type":"mousemove","time":833,"x":312,"y":188},{"type":"screenshot","time":1756},{"type":"mousemove","time":1918,"x":313,"y":188},{"type":"mousemove","time":2119,"x":342,"y":188},{"type":"mousemove","time":2319,"x":345,"y":188},{"type":"mousemove","time":2951,"x":351,"y":187},{"type":"mousemove","time":3154,"x":388,"y":186},{"type":"mousemove","time":3354,"x":394,"y":186},{"type":"mousemove","time":3603,"x":394,"y":185},{"type":"screenshot","time":4054}],"scrollY":4122,"scrollX":0,"timestamp":1568042268271},{"name":"Action 6","ops":[{"type":"mousedown","time":640,"x":304,"y":81},{"type":"mouseup","time":739,"x":304,"y":81},{"time":740,"delay":1500,"type":"screenshot-auto"},{"type":"mousemove","time":842,"x":305,"y":81},{"type":"mousemove","time":1042,"x":450,"y":91},{"type":"mousemove","time":1242,"x":450,"y":91},{"type":"mousemove","time":1458,"x":437,"y":86},{"type":"mousedown","time":1626,"x":437,"y":86},{"type":"mouseup","time":1724,"x":437,"y":86},{"time":1725,"delay":1500,"type":"screenshot-auto"},{"type":"mousemove","time":1765,"x":437,"y":86},{"type":"mousemove","time":2124,"x":438,"y":86},{"type":"mousemove","time":2326,"x":501,"y":84},{"type":"mousemove","time":2529,"x":559,"y":81},{"type":"mousemove","time":2729,"x":572,"y":81},{"type":"mousemove","time":2931,"x":577,"y":81},{"type":"mousedown","time":3109,"x":577,"y":81},{"type":"mouseup","time":3197,"x":577,"y":81},{"time":3198,"delay":1500,"type":"screenshot-auto"},{"type":"mousedown","time":4502,"x":577,"y":81},{"type":"mouseup","time":4612,"x":577,"y":81},{"time":4613,"delay":1500,"type":"screenshot-auto"},{"type":"mousemove","time":5801,"x":573,"y":81},{"type":"mousemove","time":6003,"x":548,"y":80},{"type":"mousedown","time":6158,"x":542,"y":80},{"type":"mousemove","time":6216,"x":542,"y":80},{"type":"mouseup","time":6225,"x":542,"y":80},{"time":6226,"delay":1500,"type":"screenshot-auto"},{"type":"mousemove","time":6487,"x":543,"y":80}],"scrollY":0,"scrollX":0,"timestamp":1568042329369}]
\ No newline at end of file
+[{"name":"Action 1","ops":[{"type":"mousedown","time":287,"x":398,"y":538},{"type":"mousemove","time":321,"x":398,"y":538},{"type":"mousemove","time":534,"x":320,"y":484},{"type":"mousemove","time":743,"x":196,"y":432},{"type":"mouseup","time":1133,"x":196,"y":432},{"time":1134,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":1574,"x":196,"y":432},{"type":"mousemove","time":1646,"x":200,"y":432},{"type":"mousemove","time":1846,"x":372,"y":443},{"type":"mousemove","time":2048,"x":605,"y":452},{"type":"mousemove","time":2269,"x":664,"y":457},{"type":"mousemove","time":2488,"x":664,"y":458},{"type":"mouseup","time":2629,"x":664,"y":458},{"time":2630,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":3295,"x":664,"y":458},{"type":"mousemove","time":3348,"x":665,"y":458},{"type":"mousemove","time":3548,"x":736,"y":460},{"type":"mousemove","time":3767,"x":765,"y":462},{"type":"mousemove","time":4108,"x":765,"y":462},{"type":"mouseup","time":4122,"x":765,"y":462},{"time":4123,"delay":400,"type":"screenshot-auto"}],"scrollY":2102,"scrollX":0,"timestamp":1568042188728},{"name":"Action 2","ops":[{"type":"mousedown","time":476,"x":411,"y":530},{"type":"mousemove","time":610,"x":410,"y":530},{"type":"mousemove","time":820,"x":254,"y":457},{"type":"mousemove","time":1024,"x":219,"y":446},{"type":"mouseup","time":1259,"x":219,"y":446},{"time":1260,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":1819,"x":219,"y":446},{"type":"mousemove","time":1877,"x":223,"y":446},{"type":"mousemove","time":2120,"x":537,"y":451},{"type":"mousemove","time":2356,"x":652,"y":450},{"type":"mousemove","time":2662,"x":656,"y":450},{"type":"mouseup","time":2848,"x":656,"y":450},{"time":2849,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":3337,"x":656,"y":450},{"type":"mousemove","time":3376,"x":658,"y":450},{"type":"mousemove","time":3591,"x":766,"y":455},{"type":"mousemove","time":3813,"x":784,"y":455}],"scrollY":2488,"scrollX":0,"timestamp":1568042200067},{"name":"Action 3","ops":[{"type":"mousemove","time":118,"x":411,"y":506},{"type":"mousemove","time":351,"x":411,"y":506},{"type":"mousedown","time":469,"x":411,"y":506},{"type":"mousemove","time":568,"x":415,"y":501},{"type":"mousemove","time":773,"x":477,"y":455},{"type":"mousemove","time":1048,"x":544,"y":427},{"type":"mousemove","time":1310,"x":545,"y":427},{"type":"mousemove","time":1494,"x":545,"y":427},{"type":"mouseup","time":1615,"x":545,"y":428},{"time":1616,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1709,"x":530,"y":429},{"type":"mousemove","time":1918,"x":497,"y":414},{"type":"mousemove","time":2119,"x":489,"y":411},{"type":"mousedown","time":2506,"x":489,"y":411},{"type":"mouseup","time":2593,"x":489,"y":411},{"time":2594,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":3705,"x":489,"y":411},{"type":"mouseup","time":3772,"x":489,"y":411},{"time":3773,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3819,"x":489,"y":411},{"type":"mousemove","time":4019,"x":489,"y":411},{"type":"mousedown","time":4628,"x":489,"y":411},{"type":"mouseup","time":4692,"x":489,"y":411},{"time":4693,"delay":400,"type":"screenshot-auto"}],"scrollY":2898,"scrollX":0,"timestamp":1568042216430},{"name":"Action 4","ops":[{"type":"mousedown","time":544,"x":412,"y":484},{"type":"mousemove","time":694,"x":411,"y":483},{"type":"mousemove","time":894,"x":284,"y":431},{"type":"mousemove","time":1094,"x":195,"y":408},{"type":"mousemove","time":1294,"x":164,"y":400},{"type":"mouseup","time":1564,"x":164,"y":400},{"time":1565,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1887,"x":164,"y":400},{"type":"mousemove","time":2087,"x":163,"y":403},{"type":"mousedown","time":2259,"x":163,"y":403},{"type":"mousemove","time":2287,"x":163,"y":402},{"type":"mousemove","time":2490,"x":253,"y":349},{"type":"mousemove","time":2690,"x":330,"y":316},{"type":"mousemove","time":2894,"x":330,"y":316},{"type":"mouseup","time":3013,"x":330,"y":316},{"time":3014,"delay":400,"type":"screenshot-auto"}],"scrollY":3293,"scrollX":0,"timestamp":1568042227380},{"name":"Action 5","ops":[{"type":"mousemove","time":255,"x":313,"y":199},{"type":"mousemove","time":455,"x":312,"y":188},{"type":"mousemove","time":775,"x":312,"y":187},{"type":"mousemove","time":833,"x":312,"y":188},{"type":"screenshot","time":1756},{"type":"mousemove","time":1918,"x":313,"y":188},{"type":"mousemove","time":2119,"x":342,"y":188},{"type":"mousemove","time":2319,"x":345,"y":188},{"type":"mousemove","time":2951,"x":351,"y":187},{"type":"mousemove","time":3154,"x":388,"y":186},{"type":"mousemove","time":3354,"x":394,"y":186},{"type":"mousemove","time":3603,"x":394,"y":185},{"type":"screenshot","time":4054}],"scrollY":4122,"scrollX":0,"timestamp":1568042268271},{"name":"Action 6","ops":[{"type":"mousedown","time":640,"x":304,"y":81},{"type":"mouseup","time":739,"x":304,"y":81},{"time":740,"delay":1500,"type":"screenshot-auto"},{"type":"mousemove","time":842,"x":305,"y":81},{"type":"mousemove","time":1042,"x":450,"y":91},{"type":"mousemove","time":1242,"x":450,"y":91},{"type":"mousemove","time":1458,"x":437,"y":86},{"type":"mousedown","time":1626,"x":437,"y":86},{"type":"mouseup","time":1724,"x":437,"y":86},{"time":1725,"delay":1500,"type":"screenshot-auto"},{"type":"mousemove","time":1765,"x":437,"y":86},{"type":"mousemove","time":2124,"x":438,"y":86},{"type":"mousemove","time":2326,"x":501,"y":84},{"type":"mousemove","time":2529,"x":559,"y":81},{"type":"mousemove","time":2729,"x":572,"y":81},{"type":"mousemove","time":2931,"x":577,"y":81},{"type":"mousedown","time":3109,"x":577,"y":81},{"type":"mouseup","time":3197,"x":577,"y":81},{"time":3198,"delay":1500,"type":"screenshot-auto"},{"type":"mousedown","time":4502,"x":577,"y":81},{"type":"mouseup","time":4612,"x":577,"y":81},{"time":4613,"delay":1500,"type":"screenshot-auto"},{"type":"mousemove","time":5801,"x":573,"y":81},{"type":"mousemove","time":6003,"x":548,"y":80},{"type":"mousedown","time":6158,"x":542,"y":80},{"type":"mousemove","time":6216,"x":542,"y":80},{"type":"mouseup","time":6225,"x":542,"y":80},{"time":6226,"delay":1500,"type":"screenshot-auto"},{"type":"mousemove","time":6487,"x":543,"y":80}],"scrollY":0,"scrollX":0,"timestamp":1568042329369},{"name":"Action 7","ops":[{"type":"mousemove","time":1189,"x":458,"y":539},{"type":"mousemove","time":1389,"x":442,"y":494},{"type":"mousemove","time":1596,"x":388,"y":388},{"type":"mousemove","time":1813,"x":320,"y":260},{"type":"mousemove","time":2079,"x":291,"y":216},{"type":"mousemove","time":2388,"x":291,"y":215},{"type":"mousemove","time":2589,"x":285,"y":212},{"type":"mousemove","time":2798,"x":267,"y":203},{"type":"mousemove","time":3005,"x":263,"y":202},{"type":"mousemove","time":3204,"x":262,"y":202},{"type":"mousemove","time":3413,"x":261,"y":202},{"type":"mousedown","time":3624,"x":261,"y":202},{"type":"mouseup","time":3799,"x":261,"y":202},{"time":3800,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":4898,"x":261,"y":202},{"type":"mouseup","time":5051,"x":261,"y":202},{"time":5052,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":5664,"x":261,"y":202},{"type":"mouseup","time":5819,"x":261,"y":202},{"time":5820,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":6729,"x":261,"y":202},{"type":"mouseup","time":6930,"x":261,"y":202},{"time":6931,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":7703,"x":263,"y":206},{"type":"mousemove","time":7912,"x":374,"y":419},{"type":"mousemove","time":8212,"x":387,"y":441},{"type":"mousemove","time":8420,"x":396,"y":462},{"type":"mousedown","time":8600,"x":396,"y":463},{"type":"mousemove","time":8620,"x":396,"y":463},{"type":"mousemove","time":8803,"x":397,"y":463},{"type":"mousemove","time":9003,"x":433,"y":462},{"type":"mousemove","time":9209,"x":477,"y":459},{"type":"mousemove","time":9417,"x":504,"y":456},{"type":"mousemove","time":9626,"x":531,"y":455},{"type":"mousemove","time":9832,"x":549,"y":455},{"type":"mousemove","time":10033,"x":550,"y":455},{"type":"mouseup","time":10284,"x":550,"y":455},{"time":10285,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":10687,"x":550,"y":458},{"type":"mousemove","time":10888,"x":537,"y":517},{"type":"mousemove","time":11089,"x":526,"y":541}],"scrollY":2276,"scrollX":0,"timestamp":1577710763731}]
\ 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/runTest/actions/tooltip-appendToBody.json

+[{"name":"Action 1","ops":[{"type":"mousemove","time":877,"x":731,"y":147},{"type":"mousemove","time":1084,"x":563,"y":160},{"type":"mousemove","time":1309,"x":562,"y":160},{"type":"mousemove","time":1510,"x":364,"y":193},{"type":"mousemove","time":1719,"x":320,"y":194},{"type":"mousemove","time":1926,"x":316,"y":208},{"type":"mousemove","time":2126,"x":316,"y":211},{"type":"mousemove","time":2826,"x":316,"y":212},{"type":"mousemove","time":3026,"x":314,"y":234},{"type":"mousemove","time":3226,"x":315,"y":242},{"type":"mousemove","time":3435,"x":315,"y":242},{"type":"mousemove","time":3493,"x":315,"y":242},{"type":"mousemove","time":3693,"x":315,"y":262},{"type":"mousemove","time":3893,"x":316,"y":273},{"type":"mousemove","time":4093,"x":319,"y":290},{"type":"mousemove","time":4393,"x":319,"y":291},{"type":"mousemove","time":4593,"x":342,"y":290},{"type":"mousemove","time":4797,"x":604,"y":269},{"type":"mousemove","time":4998,"x":612,"y":262},{"type":"mousemove","time":5209,"x":625,"y":249},{"type":"mousemove","time":5415,"x":607,"y":249},{"type":"mousemove","time":5627,"x":505,"y":248},{"type":"mousewheel","time":5764,"x":505,"y":248,"deltaY":1},{"type":"mousewheel","time":5815,"x":505,"y":248,"deltaY":4},{"type":"mousewheel","time":5847,"x":505,"y":248,"deltaY":7},{"type":"mousewheel","time":5873,"x":505,"y":248,"deltaY":4},{"type":"mousewheel","time":5907,"x":505,"y":248,"deltaY":5},{"type":"mousewheel","time":5930,"x":505,"y":248,"deltaY":1},{"type":"mousemove","time":6497,"x":501,"y":251},{"type":"mousemove","time":6697,"x":407,"y":330},{"type":"mousemove","time":6906,"x":405,"y":333},{"type":"mousedown","time":7161,"x":405,"y":333},{"type":"mousemove","time":7199,"x":388,"y":345},{"type":"mousemove","time":7409,"x":368,"y":363},{"type":"mousemove","time":7615,"x":368,"y":363},{"type":"mousemove","time":7828,"x":388,"y":369},{"type":"mousemove","time":8045,"x":389,"y":369},{"type":"mousemove","time":8251,"x":364,"y":359},{"type":"mousemove","time":8460,"x":358,"y":336},{"type":"mouseup","time":8811,"x":358,"y":336},{"time":8812,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":8823,"x":349,"y":333},{"type":"mousemove","time":9029,"x":292,"y":282},{"type":"mousemove","time":9231,"x":286,"y":272},{"type":"mousemove","time":9447,"x":283,"y":248},{"type":"mousemove","time":9647,"x":283,"y":251},{"type":"mousemove","time":9847,"x":283,"y":253}],"scrollY":0,"scrollX":0,"timestamp":1578864522547},{"name":"Action 2","ops":[{"type":"mousemove","time":1064,"x":179,"y":319},{"type":"mousemove","time":1264,"x":208,"y":323},{"type":"mousemove","time":1473,"x":239,"y":323},{"type":"mousemove","time":1681,"x":242,"y":323},{"type":"mousemove","time":1881,"x":274,"y":335},{"type":"mousemove","time":2083,"x":302,"y":343},{"type":"mousemove","time":2283,"x":324,"y":346},{"type":"mousemove","time":2483,"x":331,"y":348},{"type":"mousemove","time":2917,"x":331,"y":348},{"type":"mousemove","time":3117,"x":331,"y":336},{"type":"mousemove","time":3327,"x":333,"y":331},{"type":"mousemove","time":3543,"x":337,"y":346},{"type":"mousemove","time":3767,"x":336,"y":354},{"type":"mousemove","time":3975,"x":336,"y":356},{"type":"mousemove","time":4184,"x":336,"y":354},{"type":"mousemove","time":4384,"x":356,"y":323},{"type":"mousemove","time":4594,"x":357,"y":322},{"type":"mousemove","time":4883,"x":358,"y":322},{"type":"mousemove","time":5083,"x":362,"y":325},{"type":"mousemove","time":5283,"x":352,"y":331},{"type":"mousemove","time":5484,"x":344,"y":338},{"type":"mousemove","time":5699,"x":338,"y":343},{"type":"mousemove","time":5907,"x":337,"y":344},{"type":"mousemove","time":6119,"x":352,"y":342},{"type":"mousemove","time":6324,"x":344,"y":346},{"type":"mousemove","time":6532,"x":338,"y":350},{"type":"mousemove","time":6743,"x":334,"y":350},{"type":"mousemove","time":6959,"x":334,"y":350}],"scrollY":157,"scrollX":0,"timestamp":1578864545306},{"name":"Action 3","ops":[{"type":"mousemove","time":880,"x":188,"y":96},{"type":"mousemove","time":1080,"x":218,"y":58},{"type":"mousemove","time":1280,"x":233,"y":35},{"type":"mousemove","time":1487,"x":244,"y":26},{"type":"mousemove","time":1704,"x":247,"y":22},{"type":"mousedown","time":2221,"x":247,"y":22},{"type":"mouseup","time":2537,"x":247,"y":22},{"time":2538,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":3186,"x":247,"y":22},{"type":"mouseup","time":3772,"x":247,"y":22},{"time":3773,"delay":400,"type":"screenshot-auto"}],"scrollY":579,"scrollX":0,"timestamp":1578864579827},{"name":"Action 4","ops":[{"type":"mousemove","time":949,"x":276,"y":348},{"type":"mousemove","time":1156,"x":294,"y":338},{"type":"mousemove","time":1365,"x":314,"y":325},{"type":"mousemove","time":1574,"x":334,"y":319},{"type":"mousemove","time":1780,"x":337,"y":316},{"type":"mousemove","time":1989,"x":330,"y":317},{"type":"mousemove","time":2198,"x":331,"y":317},{"type":"mousemove","time":2409,"x":353,"y":311},{"type":"mousemove","time":2626,"x":356,"y":310},{"type":"mousemove","time":3164,"x":361,"y":307},{"type":"mousemove","time":3364,"x":390,"y":293},{"type":"mousemove","time":3575,"x":343,"y":324},{"type":"mousemove","time":3797,"x":348,"y":321},{"type":"mousemove","time":4040,"x":361,"y":305},{"type":"mousemove","time":4265,"x":357,"y":306},{"type":"mousemove","time":4474,"x":356,"y":308},{"type":"mousemove","time":4781,"x":359,"y":306},{"type":"mousemove","time":4990,"x":390,"y":289},{"type":"mousemove","time":5547,"x":390,"y":289},{"type":"mousemove","time":5747,"x":395,"y":291},{"type":"mousemove","time":5958,"x":392,"y":287},{"type":"mousemove","time":6164,"x":391,"y":290},{"type":"mousemove","time":6364,"x":394,"y":289},{"type":"mousemove","time":6567,"x":385,"y":277},{"type":"mousemove","time":6773,"x":385,"y":277},{"type":"mousemove","time":6970,"x":378,"y":281},{"type":"mousemove","time":7170,"x":345,"y":303},{"type":"mousemove","time":7372,"x":338,"y":306},{"type":"mousemove","time":7582,"x":324,"y":306},{"type":"mousemove","time":7797,"x":307,"y":307},{"type":"mousemove","time":7970,"x":307,"y":307},{"type":"mousemove","time":8171,"x":223,"y":294}],"scrollY":579,"scrollX":0,"timestamp":1578864604914}]
\ No newline at end of file

test/runTest/actions/treemap-disk2.json

-[{"name":"Action 1","ops":[{"type":"mousemove","time":783,"x":451,"y":369},{"type":"mousemove","time":983,"x":460,"y":399},{"type":"mousemove","time":1190,"x":482,"y":413},{"type":"screenshot","time":2593},{"type":"mousemove","time":2820,"x":481,"y":411},{"type":"mousemove","time":3029,"x":448,"y":369},{"type":"mousemove","time":3244,"x":441,"y":362},{"type":"mousemove","time":3554,"x":441,"y":362},{"type":"screenshot","time":4426},{"type":"mousemove","time":4571,"x":439,"y":361},{"type":"mousemove","time":4771,"x":403,"y":348},{"type":"mousemove","time":4978,"x":381,"y":345},{"type":"mousemove","time":5185,"x":377,"y":344},{"type":"mousemove","time":6345,"x":377,"y":344},{"type":"mousemove","time":6546,"x":368,"y":194},{"type":"mousemove","time":6747,"x":357,"y":149},{"type":"mousemove","time":6953,"x":354,"y":124},{"type":"mousemove","time":7187,"x":349,"y":96},{"type":"mousemove","time":8048,"x":349,"y":98},{"type":"mousemove","time":8248,"x":342,"y":120},{"type":"mousemove","time":8449,"x":340,"y":131},{"type":"mousemove","time":8655,"x":340,"y":132},{"type":"mousemove","time":8715,"x":340,"y":132},{"type":"screenshot","time":10033},{"type":"mousemove","time":10717,"x":340,"y":133},{"type":"mousemove","time":10917,"x":340,"y":153},{"type":"mousemove","time":11118,"x":339,"y":184},{"type":"mousedown","time":11267,"x":339,"y":184},{"type":"mousemove","time":11325,"x":339,"y":184},{"type":"mouseup","time":11359,"x":339,"y":184},{"time":11360,"delay":600,"type":"screenshot-auto"},{"type":"mousemove","time":13286,"x":342,"y":186},{"type":"mousemove","time":13487,"x":510,"y":245},{"type":"mousemove","time":13687,"x":638,"y":306},{"type":"mousemove","time":13896,"x":644,"y":312},{"type":"mousedown","time":14364,"x":644,"y":312},{"type":"mouseup","time":14496,"x":644,"y":312},{"time":14497,"delay":600,"type":"screenshot-auto"},{"type":"mousemove","time":15831,"x":645,"y":314},{"type":"mousemove","time":16031,"x":645,"y":328},{"type":"mousemove","time":16236,"x":646,"y":335},{"type":"mousemove","time":16548,"x":646,"y":335},{"type":"mousemove","time":16754,"x":646,"y":336},{"type":"mousemove","time":16814,"x":646,"y":336},{"type":"mousemove","time":17015,"x":564,"y":449},{"type":"mousemove","time":17215,"x":425,"y":544},{"type":"mousemove","time":17421,"x":347,"y":566},{"type":"mousemove","time":17632,"x":279,"y":589},{"type":"mousedown","time":17711,"x":279,"y":589},{"type":"mouseup","time":17807,"x":279,"y":590},{"time":17808,"delay":600,"type":"screenshot-auto"},{"type":"mousemove","time":17865,"x":279,"y":590},{"type":"mousemove","time":18097,"x":278,"y":591},{"type":"mousemove","time":18327,"x":278,"y":591},{"type":"mousemove","time":18434,"x":278,"y":592},{"type":"mousemove","time":18636,"x":277,"y":593},{"type":"mousemove","time":18837,"x":277,"y":594},{"type":"mousemove","time":19057,"x":277,"y":594},{"type":"mousemove","time":19292,"x":277,"y":596},{"type":"mousemove","time":19534,"x":281,"y":596},{"type":"mousemove","time":19734,"x":391,"y":544},{"type":"mousemove","time":19934,"x":507,"y":505},{"type":"mousemove","time":20135,"x":571,"y":461},{"type":"mousemove","time":20343,"x":572,"y":461},{"type":"screenshot","time":21692}],"scrollY":0,"scrollX":0,"timestamp":1568045404523},{"name":"Action 2","ops":[{"type":"mousewheel","time":282,"x":389,"y":313,"deltaY":4.000244140625},{"type":"mousewheel","time":415,"x":389,"y":313,"deltaY":1274.4915771484375},{"type":"mousewheel","time":498,"x":389,"y":313,"deltaY":323.3740234375},{"type":"mousewheel","time":883,"x":389,"y":313,"deltaY":4.000244140625},{"type":"mousewheel","time":966,"x":389,"y":313,"deltaY":28.831787109375},{"type":"mousewheel","time":1033,"x":389,"y":313,"deltaY":825.3546142578125},{"type":"mousewheel","time":1099,"x":389,"y":313,"deltaY":285.667724609375},{"type":"mousewheel","time":1183,"x":389,"y":313,"deltaY":265.6805419921875},{"type":"mousemove","time":1599,"x":390,"y":313},{"type":"mousedown","time":1743,"x":429,"y":305},{"type":"mousemove","time":1800,"x":426,"y":301},{"type":"mousemove","time":2017,"x":273,"y":158},{"type":"mousemove","time":2223,"x":140,"y":49},{"type":"mouseup","time":2245,"x":140,"y":49},{"time":2246,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2433,"x":393,"y":303},{"type":"mousemove","time":2642,"x":443,"y":388},{"type":"mousewheel","time":2734,"x":443,"y":387,"deltaY":4.000244140625},{"type":"mousewheel","time":2776,"x":443,"y":387,"deltaY":210.087890625},{"type":"mousewheel","time":2821,"x":443,"y":387,"deltaY":788.75244140625},{"type":"mousemove","time":2879,"x":443,"y":387},{"type":"mousemove","time":3017,"x":445,"y":389},{"type":"mousemove","time":3218,"x":496,"y":381},{"type":"mousedown","time":3277,"x":498,"y":379},{"type":"mousemove","time":3434,"x":448,"y":353},{"type":"mousemove","time":3655,"x":139,"y":194},{"type":"mouseup","time":3844,"x":139,"y":194},{"time":3845,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3858,"x":139,"y":194},{"type":"mousemove","time":3920,"x":140,"y":195},{"type":"mousemove","time":4129,"x":398,"y":320},{"type":"mousemove","time":4343,"x":472,"y":366},{"type":"mousewheel","time":4470,"x":472,"y":366,"deltaY":4.000244140625},{"type":"mousewheel","time":4519,"x":472,"y":366,"deltaY":194.4476318359375},{"type":"mousewheel","time":4563,"x":472,"y":366,"deltaY":215.1177978515625},{"type":"mousemove","time":4752,"x":482,"y":372},{"type":"mousemove","time":4954,"x":529,"y":394},{"type":"mousedown","time":5149,"x":532,"y":394},{"type":"mousemove","time":5166,"x":532,"y":394},{"type":"mousemove","time":5385,"x":417,"y":302},{"type":"mousemove","time":5588,"x":367,"y":258},{"type":"mousemove","time":5795,"x":350,"y":238},{"type":"mouseup","time":5963,"x":347,"y":236},{"time":5964,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":6001,"x":347,"y":236},{"type":"mousemove","time":6271,"x":347,"y":236},{"type":"mousewheel","time":6288,"x":347,"y":236,"deltaY":-4.000244140625},{"type":"mousewheel","time":6337,"x":347,"y":236,"deltaY":-432.744140625},{"type":"mousewheel","time":6383,"x":347,"y":236,"deltaY":-548.4722900390625},{"type":"mousewheel","time":6430,"x":347,"y":236,"deltaY":-305.631103515625},{"type":"mousewheel","time":6855,"x":347,"y":236,"deltaY":-4.000244140625},{"type":"mousewheel","time":6918,"x":347,"y":236,"deltaY":-173.311767578125},{"type":"mousewheel","time":6973,"x":347,"y":236,"deltaY":-208.1536865234375},{"type":"mousewheel","time":7122,"x":347,"y":236,"deltaY":-4.000244140625},{"type":"mousewheel","time":7206,"x":347,"y":236,"deltaY":-13.6578369140625},{"type":"mousewheel","time":7255,"x":347,"y":236,"deltaY":-82.4737548828125},{"type":"mousewheel","time":7313,"x":347,"y":236,"deltaY":-155.1434326171875},{"type":"mousewheel","time":7368,"x":347,"y":236,"deltaY":-176.4447021484375},{"type":"mousewheel","time":8040,"x":347,"y":236,"deltaY":-4.000244140625},{"type":"mousewheel","time":8098,"x":347,"y":236,"deltaY":-213.1671142578125},{"type":"mousewheel","time":8144,"x":347,"y":236,"deltaY":-485.894775390625},{"type":"mousemove","time":8973,"x":349,"y":240},{"type":"mousemove","time":9174,"x":394,"y":410},{"type":"mousemove","time":9380,"x":392,"y":391},{"type":"mousemove","time":9583,"x":397,"y":347},{"type":"mousedown","time":9650,"x":397,"y":346},{"type":"mousemove","time":9787,"x":431,"y":413},{"type":"mousemove","time":9987,"x":462,"y":465},{"type":"mousemove","time":10191,"x":492,"y":496},{"type":"mousemove","time":10398,"x":505,"y":506},{"type":"mouseup","time":10532,"x":505,"y":506},{"time":10533,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":10716,"x":505,"y":506},{"type":"mousemove","time":10876,"x":505,"y":506},{"type":"mousemove","time":11083,"x":504,"y":505}],"scrollY":0,"scrollX":0,"timestamp":1568969921384}]
\ No newline at end of file
+[{"name":"Action 1","ops":[{"type":"mousemove","time":783,"x":451,"y":369},{"type":"mousemove","time":983,"x":460,"y":399},{"type":"mousemove","time":1190,"x":482,"y":413},{"type":"screenshot","time":2593},{"type":"mousemove","time":2820,"x":481,"y":411},{"type":"mousemove","time":3029,"x":448,"y":369},{"type":"mousemove","time":3244,"x":441,"y":362},{"type":"mousemove","time":3554,"x":441,"y":362},{"type":"screenshot","time":4426},{"type":"mousemove","time":4571,"x":439,"y":361},{"type":"mousemove","time":4771,"x":403,"y":348},{"type":"mousemove","time":4978,"x":381,"y":345},{"type":"mousemove","time":5185,"x":377,"y":344},{"type":"mousemove","time":6345,"x":377,"y":344},{"type":"mousemove","time":6546,"x":368,"y":194},{"type":"mousemove","time":6747,"x":357,"y":149},{"type":"mousemove","time":6953,"x":354,"y":124},{"type":"mousemove","time":7187,"x":349,"y":96},{"type":"mousemove","time":8048,"x":349,"y":98},{"type":"mousemove","time":8248,"x":342,"y":120},{"type":"mousemove","time":8449,"x":340,"y":131},{"type":"mousemove","time":8655,"x":340,"y":132},{"type":"mousemove","time":8715,"x":340,"y":132},{"type":"screenshot","time":10033},{"type":"mousemove","time":10717,"x":340,"y":133},{"type":"mousemove","time":10917,"x":340,"y":153},{"type":"mousemove","time":11118,"x":339,"y":184},{"type":"mousedown","time":11267,"x":339,"y":184},{"type":"mousemove","time":11325,"x":339,"y":184},{"type":"mouseup","time":11359,"x":339,"y":184},{"time":11360,"delay":600,"type":"screenshot-auto"},{"type":"mousemove","time":13286,"x":342,"y":186},{"type":"mousemove","time":13487,"x":510,"y":245},{"type":"mousemove","time":13687,"x":638,"y":306},{"type":"mousemove","time":13896,"x":644,"y":312},{"type":"mousedown","time":14364,"x":644,"y":312},{"type":"mouseup","time":14496,"x":644,"y":312},{"time":14497,"delay":600,"type":"screenshot-auto"},{"type":"mousemove","time":15831,"x":645,"y":314},{"type":"mousemove","time":16031,"x":645,"y":328},{"type":"mousemove","time":16236,"x":646,"y":335},{"type":"mousemove","time":16548,"x":646,"y":335},{"type":"mousemove","time":16754,"x":646,"y":336},{"type":"mousemove","time":16814,"x":646,"y":336},{"type":"mousemove","time":17015,"x":564,"y":449},{"type":"mousemove","time":17215,"x":425,"y":544},{"type":"mousemove","time":17421,"x":347,"y":566},{"type":"mousemove","time":17632,"x":279,"y":589},{"type":"mousedown","time":17711,"x":279,"y":589},{"type":"mouseup","time":17807,"x":279,"y":590},{"time":17808,"delay":600,"type":"screenshot-auto"},{"type":"mousemove","time":17865,"x":279,"y":590},{"type":"mousemove","time":18097,"x":278,"y":591},{"type":"mousemove","time":18327,"x":278,"y":591},{"type":"mousemove","time":18434,"x":278,"y":592},{"type":"mousemove","time":18636,"x":277,"y":593},{"type":"mousemove","time":18837,"x":277,"y":594},{"type":"mousemove","time":19057,"x":277,"y":594},{"type":"mousemove","time":19292,"x":277,"y":596},{"type":"mousemove","time":19534,"x":281,"y":596},{"type":"mousemove","time":19734,"x":391,"y":544},{"type":"mousemove","time":19934,"x":507,"y":505},{"type":"mousemove","time":20135,"x":571,"y":461},{"type":"mousemove","time":20343,"x":572,"y":461},{"type":"screenshot","time":21692}],"scrollY":0,"scrollX":0,"timestamp":1568045404523},{"name":"Action 2","ops":[{"type":"mousewheel","time":282,"x":389,"y":313,"deltaY":4.000244140625},{"type":"mousewheel","time":415,"x":389,"y":313,"deltaY":1274.4915771484375},{"type":"mousewheel","time":498,"x":389,"y":313,"deltaY":323.3740234375},{"type":"mousewheel","time":883,"x":389,"y":313,"deltaY":4.000244140625},{"type":"mousewheel","time":966,"x":389,"y":313,"deltaY":28.831787109375},{"type":"mousewheel","time":1033,"x":389,"y":313,"deltaY":825.3546142578125},{"type":"mousewheel","time":1099,"x":389,"y":313,"deltaY":285.667724609375},{"type":"mousewheel","time":1183,"x":389,"y":313,"deltaY":265.6805419921875},{"type":"mousemove","time":1599,"x":390,"y":313},{"type":"mousedown","time":1743,"x":429,"y":305},{"type":"mousemove","time":1800,"x":426,"y":301},{"type":"mousemove","time":2017,"x":273,"y":158},{"type":"mousemove","time":2223,"x":140,"y":49},{"type":"mouseup","time":2245,"x":140,"y":49},{"time":2246,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2433,"x":393,"y":303},{"type":"mousemove","time":2642,"x":443,"y":388},{"type":"mousewheel","time":2734,"x":443,"y":387,"deltaY":4.000244140625},{"type":"mousewheel","time":2776,"x":443,"y":387,"deltaY":210.087890625},{"type":"mousewheel","time":2821,"x":443,"y":387,"deltaY":788.75244140625},{"type":"mousemove","time":2879,"x":443,"y":387},{"type":"mousemove","time":3017,"x":445,"y":389},{"type":"mousemove","time":3218,"x":496,"y":381},{"type":"mousedown","time":3277,"x":498,"y":379},{"type":"mousemove","time":3434,"x":448,"y":353},{"type":"mousemove","time":3655,"x":139,"y":194},{"type":"mouseup","time":3844,"x":139,"y":194},{"time":3845,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3858,"x":139,"y":194},{"type":"mousemove","time":3920,"x":140,"y":195},{"type":"mousemove","time":4129,"x":398,"y":320},{"type":"mousemove","time":4343,"x":472,"y":366},{"type":"mousewheel","time":4470,"x":472,"y":366,"deltaY":4.000244140625},{"type":"mousewheel","time":4519,"x":472,"y":366,"deltaY":194.4476318359375},{"type":"mousewheel","time":4563,"x":472,"y":366,"deltaY":215.1177978515625},{"type":"mousemove","time":4752,"x":482,"y":372},{"type":"mousemove","time":4954,"x":529,"y":394},{"type":"mousedown","time":5149,"x":532,"y":394},{"type":"mousemove","time":5166,"x":532,"y":394},{"type":"mousemove","time":5385,"x":417,"y":302},{"type":"mousemove","time":5588,"x":367,"y":258},{"type":"mousemove","time":5795,"x":350,"y":238},{"type":"mouseup","time":5963,"x":347,"y":236},{"time":5964,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":6001,"x":347,"y":236},{"type":"mousemove","time":6271,"x":347,"y":236},{"type":"mousewheel","time":6288,"x":347,"y":236,"deltaY":-4.000244140625},{"type":"mousewheel","time":6337,"x":347,"y":236,"deltaY":-432.744140625},{"type":"mousewheel","time":6383,"x":347,"y":236,"deltaY":-548.4722900390625},{"type":"mousewheel","time":6430,"x":347,"y":236,"deltaY":-305.631103515625},{"type":"mousewheel","time":6855,"x":347,"y":236,"deltaY":-4.000244140625},{"type":"mousewheel","time":6918,"x":347,"y":236,"deltaY":-173.311767578125},{"type":"mousewheel","time":6973,"x":347,"y":236,"deltaY":-208.1536865234375},{"type":"mousewheel","time":7122,"x":347,"y":236,"deltaY":-4.000244140625},{"type":"mousewheel","time":7206,"x":347,"y":236,"deltaY":-13.6578369140625},{"type":"mousewheel","time":7255,"x":347,"y":236,"deltaY":-82.4737548828125},{"type":"mousewheel","time":7313,"x":347,"y":236,"deltaY":-155.1434326171875},{"type":"mousewheel","time":7368,"x":347,"y":236,"deltaY":-176.4447021484375},{"type":"mousewheel","time":8040,"x":347,"y":236,"deltaY":-4.000244140625},{"type":"mousewheel","time":8098,"x":347,"y":236,"deltaY":-213.1671142578125},{"type":"mousewheel","time":8144,"x":347,"y":236,"deltaY":-485.894775390625},{"type":"mousemove","time":8973,"x":349,"y":240},{"type":"mousemove","time":9174,"x":394,"y":410},{"type":"mousemove","time":9380,"x":392,"y":391},{"type":"mousemove","time":9583,"x":397,"y":347},{"type":"mousedown","time":9650,"x":397,"y":346},{"type":"mousemove","time":9787,"x":431,"y":413},{"type":"mousemove","time":9987,"x":462,"y":465},{"type":"mousemove","time":10191,"x":492,"y":496},{"type":"mousemove","time":10398,"x":505,"y":506},{"type":"mouseup","time":10532,"x":505,"y":506},{"time":10533,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":10716,"x":505,"y":506},{"type":"mousemove","time":10876,"x":505,"y":506},{"type":"mousemove","time":11083,"x":504,"y":505}],"scrollY":0,"scrollX":0,"timestamp":1568969921384},{"name":"Action 3","ops":[{"type":"mousemove","time":447,"x":665,"y":124},{"type":"mousemove","time":665,"x":407,"y":125},{"type":"mousemove","time":891,"x":343,"y":118},{"type":"mousemove","time":1014,"x":343,"y":117},{"type":"mousemove","time":1214,"x":355,"y":48},{"type":"mousemove","time":1414,"x":344,"y":30},{"type":"mousemove","time":1614,"x":337,"y":14},{"type":"mousemove","time":1814,"x":329,"y":18},{"type":"mousemove","time":2014,"x":326,"y":21},{"type":"mousedown","time":2180,"x":326,"y":21},{"type":"mouseup","time":2192,"x":326,"y":21},{"time":2193,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3047,"x":327,"y":21},{"type":"mousemove","time":3247,"x":382,"y":21},{"type":"mousemove","time":3447,"x":416,"y":16},{"type":"mousemove","time":3656,"x":418,"y":15},{"type":"mousedown","time":3672,"x":418,"y":15},{"type":"mouseup","time":3686,"x":418,"y":15},{"time":3687,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":4048,"x":419,"y":15},{"type":"mousemove","time":4248,"x":513,"y":17},{"type":"mousemove","time":4448,"x":544,"y":17},{"type":"mousedown","time":4630,"x":545,"y":17},{"type":"mouseup","time":4641,"x":545,"y":17},{"time":4642,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":4702,"x":545,"y":17},{"type":"mousemove","time":5331,"x":544,"y":17},{"type":"mousemove","time":5534,"x":351,"y":5},{"type":"mousemove","time":5736,"x":221,"y":13},{"type":"mousemove","time":5945,"x":148,"y":48},{"type":"mousemove","time":6147,"x":130,"y":43},{"type":"mousemove","time":6361,"x":130,"y":43},{"type":"mousedown","time":6407,"x":130,"y":43},{"type":"mouseup","time":6418,"x":130,"y":43},{"time":6419,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":6931,"x":138,"y":43},{"type":"mousemove","time":7131,"x":274,"y":27},{"type":"mousemove","time":7332,"x":359,"y":46},{"type":"mousemove","time":7540,"x":388,"y":51},{"type":"mousedown","time":7707,"x":388,"y":51},{"type":"mouseup","time":7718,"x":388,"y":51},{"time":7719,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":8009,"x":390,"y":51},{"type":"mousemove","time":8213,"x":487,"y":55},{"type":"mousemove","time":8427,"x":557,"y":57},{"type":"mousemove","time":8656,"x":565,"y":55},{"type":"mousedown","time":9013,"x":565,"y":55},{"type":"mouseup","time":9029,"x":565,"y":55},{"time":9030,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":10776,"x":565,"y":55},{"type":"mousemove","time":11793,"x":566,"y":55},{"type":"mousemove","time":12004,"x":733,"y":26}],"scrollY":0,"scrollX":0,"timestamp":1579025851293}]
\ No newline at end of file

test/sankey-horizontal.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>
-    </head>
-    <body>
-        <style>
-            html, body, #main {
-                width: 100%;
-                height: 100%;
-                /*border: 1px solid #000;*/
-            }
-        </style>
-        <div id="main"><div>
-        <script>
-            require(['echarts'], function (echarts) {
-
-                var chart = echarts.init(document.getElementById('main'), null, {});
-
-                window.onresize = function () {
-                    chart.resize();
-                };
-
-                var testData =  {
-                    nodes: [
-                        {
-                            name: 'a'
-                        },
-                        {
-                            name: 'b'
-                        },
-                        {
-                            name: 'a1'
-                        },
-                        {
-                            name: 'b1'
-                        },
-                        {
-                            name: 'c'
-                        },
-                        {
-                            name: 'e'
-                        }
-                    ],
-                    links: [
-                        {
-                            source: 'a',
-                            target: 'a1',
-                            value: 5
-                        },
-                        {
-                            source: 'e',
-                            target: 'b',
-                            value: 3
-                        },
-                        {
-                            source: 'a',
-                            target: 'b1',
-                            value: 3
-                        },
-                        {
-                            source: 'b1',
-                            target: 'a1',
-                            value: 1
-                        },
-                        {
-                            source: 'b1',
-                            target: 'c',
-                            value: 2
-                        },
-                        {
-                            source: 'b',
-                            target: 'c',
-                            value: 1
-                        }
-                    ]
-                };
-
-                chart.setOption({
-                    color: ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#d1e5f0', '#92c5de', '#4393c3', '#2166ac', '#053061'],
-                    tooltip: {
-                        trigger: 'item',
-                        triggerOn: 'mousemove'
-                    },
-                    animation: false,
-                    series: [
-                        {
-                            type: 'sankey',
-                            bottom: '10%',
-                            focusNodeAdjacency: true,
-                            data: testData.nodes,
-                            links: testData.links,
-                            label: {
-                                position: 'left'
-                            },
-                            // Used to test when the data is null whether it is work well.
-                            // data: [],
-                            // links: [],
-                            lineStyle: {
-                                normal: {
-                                    color: 'source',
-                                    curveness: 0.5
-                                }
-                            }
-                        }
-                    ]
-                });
-            });
-        </script>
-    </body>
-</html>
\ No newline at end of file

test/sankey-vertical.html

@@ -25,21 +25,16 @@ under the License.
         <script src="lib/esl.js"></script>
         <script src="lib/config.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <link rel="stylesheet" href="lib/reset.css"/>
     </head>
     <body>
-        <style>
-            html, body, #main {
-                width: 100%;
-                height: 100%;
-                /*border: 1px solid #000;*/
-            }
-        </style>
-        <div id="main"><div>
+
+        <div id="main"></div>
+
         <script>
             require(['echarts'], function (echarts) {
 
-                var chart = echarts.init(document.getElementById('main'), null, {});
-
                 window.onresize = function () {
                     chart.resize();
                 };
@@ -117,10 +112,17 @@ under the License.
                 var testData =  {
                     nodes: [
                         {
-                            name: 'a'
+                            name: 'a',
+                            emphasis: {
+                                itemStyle: {
+                                    color: 'yellow',
+                                    opacity: 0.6
+                                }
+                            }
                         },
                         {
-                            name: 'b'
+                            name: 'b',
+                            value: 4
                         },
                         {
                             name: 'a1'
@@ -132,14 +134,21 @@ under the License.
                             name: 'c'
                         },
                         {
-                            name: 'e'
+                            name: 'e',
+                            value: 10
                         }
                     ],
                     links: [
                         {
                             source: 'a',
                             target: 'a1',
-                            value: 5
+                            value: 5,
+                            emphasis: {
+                                lineStyle: {
+                                    color: 'green',
+                                    opacity: 0.2
+                                }
+                            }
                         },
                         {
                             source: 'e',
@@ -169,11 +178,14 @@ under the License.
                     ]
                 };
 
-                chart.setOption({
+                var option = {
                     color: ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#d1e5f0', '#92c5de', '#4393c3', '#2166ac', '#053061'],
                     tooltip: {
                         trigger: 'item',
-                        triggerOn: 'mousemove'
+                        triggerOn: 'mousemove',
+                        formatter: function (params) {
+                            return params.name + ': ' + params.value;
+                        }
                     },
                     animation: false,
                     series: [
@@ -189,12 +201,22 @@ under the License.
                             },
                             lineStyle: {
                                 normal: {
-                                    color: 'source',
-                                    curveness: 0.5
+                                    color: 'source'
                                 }
                             }
                         }
                     ]
+                };
+
+                var chart = testHelper.create(echarts, 'main' , {
+                    title: [
+                        "1. when hover on node 'a1' the edge 'a1-a' is green with opacity 0.2 and the node 'a' is yellow with opacity 0.6.",
+                        "2. when hover on edge 'a1-a' the color is green with opacity 0.2 and the node 'a' is yellow with opacity 0.6.",
+                        "3. when hover on node 'a' the color is yellow with opacity 0.6 and the edge 'a1-a' is green with opacity 0.2.",
+                        "4. node 'e' and node 'b''s value is customized which is longer than the max sum of inEdges or outEdges."
+                    ],
+                    option: option,
+                    height: 700
                 });
             });
         </script>

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%'
             }],

test/stream-filter2.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>
+        <!-- <script src="ut/lib/canteen.js"></script> -->
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+        </style>
+
+
+
+        <div id="main0"></div>
+
+
+
+
+
+        <script>
+        require(['echarts'/*, 'map/js/china' */], function (echarts) {
+            var option;
+
+            option = {
+                legend: {
+                    left: 'center',
+                    data: ['K', 'CK'],
+                    selected: {
+                        'K': false,
+                        'CK': true
+                    }
+                },
+                grid: [{
+                    left: '10%',
+                    right: '10%',
+                    height: '50%'
+                }],
+                xAxis: [{
+                    type: 'category',
+                    boundaryGap: true,
+                    axisLine: {onZero: false},
+                    splitLine: {show: false},
+                    data: [
+                        '2012-10-10'
+                    ]
+                }],
+                yAxis: [{
+                    scale: true,
+                    splitArea: {show: true}
+                }],
+                axisPointer: {
+                    link: [{
+                        xAxisIndex: [0, 1]
+                    }]
+                },
+                dataZoom: [
+                    {
+                        type: 'inside',
+                        xAxisIndex: [0, 0],
+                        start: 0,
+                        end: 100
+                    }
+                ],
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {type: 'line'}
+                },
+                toolbox: {
+                    show: true,
+                    feature: {
+                        dataZoom: {yAxisIndex: false},
+                        dataView: {readOnly: false},
+                        restore: {},
+                        saveAsImage: {}
+                    }
+                },
+                series: [
+                    {
+                        name: 'K',
+                        type: 'candlestick',
+                        itemStyle: {
+                            normal: {
+                                color: '#B22222',
+                                color0: '#008000',
+                                opacity: 0.4
+                            }
+                        },
+                        data: [
+                            [
+                                2993.9617,
+                                3007.8834,
+                                2989.8125,
+                                3026.3834,
+                                20861480200.0,
+                                221201755725.0
+                            ]
+                        ]
+                    },
+                    {
+                        name: 'CK',
+                        type: 'candlestick',
+                        data: [
+                            [
+                                2934.3873,
+                                2954.6415,
+                                2934.3873,
+                                2954.6415
+                            ]
+                        ]
+                    }
+                ]
+            };
+
+            var chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'The chart should rendered normally when a series is filtered'
+                ],
+                option: option
+                // height: 300,
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // recordCanvas: true,
+            });
+        });
+        </script>
+
+
+    </body>
+</html>
+

test/tree-addNode.html

@@ -25,26 +25,22 @@ under the License.
         <script src="lib/esl.js"></script>
         <script src="lib/config.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <link rel="stylesheet" href="lib/reset.css" />
     </head>
     <body>
-        <style>
-            html, body, #main {
-                width: 100%;
-                padding: 0;
-                margin: 0;
-                height: 100%;
-            }
-        </style>
-        <div id="main"></div>
+
+        <div id="main0"></div>
+        <div id="main1"></div>
+
         <script>
             require([
                 'echarts'
                 ], function (echarts) {
-                    var chart = echarts.init(document.getElementById('main'), null, {
-                    });
 
                     window.onresize = function () {
-                        chart.resize();
+                        chart0.resize();
+                        chart1.resize();
                     };
 
                     var data = {
@@ -84,76 +80,104 @@ under the License.
                         ]
                     };
 
-                    chart.setOption({
-
-                        tooltip: {
-                            trigger: 'item',
-                            triggerOn: 'mousemove'
-                        },
-
-                        legend: {
-                            top: '2%',
-                            left: '3%',
-                            orient: 'vertical',
-                            data: [{
-                                name: 'tree1',
-                                icon: 'rectangle'
-                            }],
-                            borderColor: '#c23531'
-                        },
-
-                        series:[
-                            {
-                                type: 'tree',
-                                id: '2',
-                                name: 'tree1',
-                                data: [data],
-                                // Used to test when the data is null whether it is work well.
-                                // data: [],
-
-                                top: '20%',
-                                left: '30%',
-                                bottom: '22%',
-                                right: '20%',
-
-                                roam: true,
-
-                                symbolSize: 15,
-                                orient: 'RL',
-
-                                label: {
-                                    position: 'right',
-                                    verticalAlign: 'middle',
-                                    align: 'left',
-                                    formatter: '{b}: {c}'
-                                },
-
-                                leaves: {
+                    function getOption(edgeShape, id) {
+                        return {
+                            tooltip: {
+                                trigger: 'item',
+                                triggerOn: 'mousemove'
+                            },
+
+                            legend: {
+                                top: '2%',
+                                left: '3%',
+                                orient: 'vertical',
+                                data: [{
+                                    name: 'tree1',
+                                    icon: 'rectangle'
+                                }],
+                                borderColor: '#c23531'
+                            },
+
+                            series:[
+                                {
+                                    type: 'tree',
+                                    id: id,
+                                    name: 'tree1',
+                                    data: [data],
+                                    // Used to test when the data is null whether it is work well.
+                                    // data: [],
+
+                                    top: '20%',
+                                    left: '30%',
+                                    bottom: '22%',
+                                    right: '20%',
+
+                                    roam: true,
+
+                                    edgeShape: edgeShape,
+
+                                    symbolSize: 15,
+                                    orient: 'RL',
+
                                     label: {
-                                        position: 'left',
+                                        position: 'right',
                                         verticalAlign: 'middle',
-                                        align: 'right',
-                                        formatter: function (params) {
-                                            return params.data.name + params.dataIndex;
+                                        align: 'left',
+                                        formatter: '{b}: {c}'
+                                    },
+
+                                    leaves: {
+                                        label: {
+                                            position: 'left',
+                                            verticalAlign: 'middle',
+                                            align: 'right',
+                                            formatter: function (params) {
+                                                return params.data.name + params.dataIndex;
+                                            }
                                         }
-                                    }
-                                },
+                                    },
+
+                                    expandAndCollapse: true,
+                                    animationDuration: 550,
+                                    animationDurationUpdate: 750
+                                }
+                            ]
+                        }
+                    }
+
+                    var chart0 = testHelper.create(echarts, 'main0', {
+                        title: [
+                            '[edgeShape: **curve**]'
+                        ],
+                        option: getOption('curve', '0'),
+                        height: 500
+                    });
 
-                                expandAndCollapse: true,
-                                animationDuration: 550,
-                                animationDurationUpdate: 750
-                            }
-                        ]
+                    var chart1 = testHelper.create(echarts, 'main1', {
+                        title: [
+                            '[edgeShape: **polyline**]'
+                        ],
+                        option: getOption('polyline', '1'),
+                        height: 500
                     });
 
                     setTimeout(function() {
                         var cloneData = echarts.util.clone(data);
                         var appendNode = cloneData.children[1].children.splice(2, 1);
                         cloneData.children.push(appendNode[0]);
-                        chart.setOption({
+
+                        chart0.setOption({
+                            series: [{
+                                type: 'tree',
+                                id: '0',
+                                data: [cloneData]
+                            }]
+                        }, false);
+
+                        chart1.setOption({
                             series: [{
                                 type: 'tree',
-                                id: '2',
+                                id: '1',
                                 data: [cloneData]
                             }]
                         }, false);

test/tree-polyline.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'/*, 'map/js/china' */
+            ], function (echarts) {
+
+                var data = {
+                    "name": "flare",
+                    "children": [
+                        {
+                            "name": "data",
+                            "children": [
+                                {
+                                        "name": "converters",
+                                        "children": [
+                                        {"name": "Converters", "value": 721},
+                                        {"name": "DelimitedTextConverter", "value": 4294}
+                                        ]
+                                },
+                                {
+                                    "name": "DataUtil",
+                                    "value": 3322
+                                }
+                            ]
+                        },
+                        {
+                            "name": "display",
+                            "children": [
+                                {"name": "DirtySprite", "value": 8833},
+                                {"name": "LineSprite", "value": 1732},
+                                {"name": "RectSprite", "value": 3623}
+                            ]
+                        },
+                        {
+                            "name": "flex",
+                            "children": [
+                                {"name": "FlareVis", "value": 4116}
+                            ]
+                        },
+                        {
+                            "name": "query",
+                            "children": [
+                            {"name": "AggregateExpression", "value": 1616},
+                            {"name": "And", "value": 1027},
+                            {"name": "Arithmetic", "value": 3891},
+                            {"name": "Average", "value": 891},
+                            {"name": "BinaryExpression", "value": 2893},
+                            {"name": "Comparison", "value": 5103},
+                            {"name": "CompositeExpression", "value": 3677},
+                            {"name": "Count", "value": 781},
+                            {"name": "DateUtil", "value": 4141},
+                            {"name": "Distinct", "value": 933},
+                            {"name": "Expression", "value": 5130},
+                            {"name": "ExpressionIterator", "value": 3617},
+                            {"name": "Fn", "value": 3240},
+                            {"name": "If", "value": 2732},
+                            {"name": "IsA", "value": 2039},
+                            {"name": "Literal", "value": 1214},
+                            {"name": "Match", "value": 3748},
+                            {"name": "Maximum", "value": 843},
+                            {
+                                "name": "methods",
+                                "children": [
+                                {"name": "add", "value": 593},
+                                {"name": "and", "value": 330},
+                                {"name": "average", "value": 287},
+                                {"name": "count", "value": 277},
+                                {"name": "distinct", "value": 292},
+                                {"name": "div", "value": 595},
+                                {"name": "eq", "value": 594},
+                                {"name": "fn", "value": 460},
+                                {"name": "gt", "value": 603},
+                                {"name": "gte", "value": 625},
+                                {"name": "iff", "value": 748},
+                                {"name": "isa", "value": 461},
+                                {"name": "lt", "value": 597},
+                                {"name": "lte", "value": 619},
+                                {"name": "max", "value": 283},
+                                {"name": "min", "value": 283},
+                                {"name": "mod", "value": 591},
+                                {"name": "mul", "value": 603},
+                                {"name": "neq", "value": 599},
+                                {"name": "not", "value": 386},
+                                {"name": "or", "value": 323},
+                                {"name": "orderby", "value": 307},
+                                {"name": "range", "value": 772},
+                                {"name": "select", "value": 296},
+                                {"name": "stddev", "value": 363},
+                                {"name": "sub", "value": 600},
+                                {"name": "sum", "value": 280},
+                                {"name": "update", "value": 307},
+                                {"name": "variance", "value": 335},
+                                {"name": "where", "value": 299},
+                                {"name": "xor", "value": 354},
+                                {"name": "x_x", "value": 264}
+                                ]
+                            },
+                            {"name": "Minimum", "value": 843},
+                            {"name": "Not", "value": 1554},
+                            {"name": "Or", "value": 970},
+                            {"name": "Query", "value": 13896},
+                            {"name": "Range", "value": 1594},
+                            {"name": "StringUtil", "value": 4130},
+                            {"name": "Sum", "value": 791},
+                            {"name": "Variable", "value": 1124},
+                            {"name": "Variance", "value": 1876},
+                            {"name": "Xor", "value": 1101}
+                            ]
+                            },
+                        {
+                            "name": "scale",
+                            "children": [
+                            {"name": "IScaleMap", "value": 2105},
+                            {"name": "LinearScale", "value": 1316},
+                            {"name": "LogScale", "value": 3151},
+                            {"name": "OrdinalScale", "value": 3770},
+                            {"name": "QuantileScale", "value": 2435},
+                            {"name": "QuantitativeScale", "value": 4839},
+                            {"name": "RootScale", "value": 1756},
+                            {"name": "Scale", "value": 4268},
+                            {"name": "ScaleType", "value": 1821},
+                            {"name": "TimeScale", "value": 5833}
+                            ]
+                        }]
+                    };
+
+                var option = {
+                    tooltip: {
+                        trigger: 'item',
+                        triggerOn: 'mousemove'
+                    },
+
+                    series:[
+                        {
+                            type: 'tree',
+                            id: 0,
+                            name: 'tree1',
+                            data: [data],
+
+                            top: '10%',
+                            left: '8%',
+                            bottom: '22%',
+                            right: '20%',
+
+                            symbolSize: 7,
+
+                            edgeShape: 'polyline',
+                            edgeForkPosition: '63%',
+                            initialTreeDepth: 3,
+
+                            lineStyle: {
+                                width: 4
+                            },
+
+                            label: {
+                                backgroundColor: '#fff',
+                                position: 'left',
+                                verticalAlign: 'middle',
+                                align: 'right'
+                            },
+
+                            leaves: {
+                                label: {
+                                    position: 'right',
+                                    verticalAlign: 'middle',
+                                    align: 'left'
+                                }
+                            },
+
+                            expandAndCollapse: true,
+                            animationDuration: 550,
+                            animationDurationUpdate: 750
+                        }
+                    ]
+                };
+
+                var chart = testHelper.create(echarts, 'main0', {
+                    title: 'The corners of the two outermost edges of the subtree should be continuous, not jagged',
+                    option: option,
+                    height: 900
+                });
+            });
+
+        </script>
+    </body>
+</html>
\ No newline at end of file

test/tree-recurrentRemoveNode.html

@@ -25,26 +25,22 @@ under the License.
         <script src="lib/esl.js"></script>
         <script src="lib/config.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <link rel="stylesheet" href="lib/reset.css" />
     </head>
     <body>
-        <style>
-            html, body, #main {
-                width: 100%;
-                padding: 0;
-                margin: 0;
-                height: 100%;
-            }
-        </style>
-        <div id="main"></div>
+
+        <div id="main0"></div>
+        <div id="main1"></div>
+
         <script>
             require([
                 'echarts'
                 ], function (echarts) {
-                    var chart = echarts.init(document.getElementById('main'), null, {
-                    });
 
                     window.onresize = function () {
-                        chart.resize();
+                        chart0.resize();
+                        chart1.resize();
                     };
 
                     var data = {
@@ -80,72 +76,100 @@ under the License.
                         ]
                     };
 
-                    chart.setOption({
-
-                        tooltip: {
-                            trigger: 'item',
-                            triggerOn: 'mousemove'
-                        },
-
-                        legend: {
-                            top: '2%',
-                            left: '3%',
-                            orient: 'vertical',
-                            data: [{
-                                name: 'tree1',
-                                icon: 'rectangle'
-                            }],
-                            borderColor: '#c23531'
-                        },
-
-                        series:[
-                            {
-                                type: 'tree',
-                                id: '2',
-                                name: 'tree1',
-                                data: [data],
+                    function getOption(edgeShape, id) {
+                        return {
+                            tooltip: {
+                                trigger: 'item',
+                                triggerOn: 'mousemove'
+                            },
 
-                                top: '20%',
-                                left: '30%',
-                                bottom: '22%',
-                                right: '20%',
+                            legend: {
+                                top: '2%',
+                                left: '3%',
+                                orient: 'vertical',
+                                data: [{
+                                    name: 'tree1',
+                                    icon: 'rectangle'
+                                }],
+                                borderColor: '#c23531'
+                            },
+
+                            series:[
+                                {
+                                    type: 'tree',
+                                    id: id,
+                                    name: 'tree1',
+                                    data: [data],
+
+                                    top: '20%',
+                                    left: '30%',
+                                    bottom: '22%',
+                                    right: '20%',
 
-                                symbolSize: 7,
-                                orient: 'RL',
+                                    symbolSize: 7,
+                                    orient: 'RL',
 
-                                label: {
-                                    position: 'right',
-                                    verticalAlign: 'middle',
-                                    align: 'left' 
-                                },
+                                    edgeShape: edgeShape,
 
-                                leaves: {
                                     label: {
-                                            position: 'left',
-                                            verticalAlign: 'middle',
-                                            align: 'right'
-                                    }
-                                },
-                    
-                                expandAndCollapse: true,
-                                animationDuration: 550,
-                                animationDurationUpdate: 750
-                            }
-                        ]
+                                        position: 'right',
+                                        verticalAlign: 'middle',
+                                        align: 'left'
+                                    },
+
+                                    leaves: {
+                                        label: {
+                                                position: 'left',
+                                                verticalAlign: 'middle',
+                                                align: 'right'
+                                        }
+                                    },
+
+                                    expandAndCollapse: true,
+                                    animationDuration: 550,
+                                    animationDurationUpdate: 750
+                                }
+                            ]
+                        }
+                    }
+
+                    var chart0 = testHelper.create(echarts, 'main0', {
+                        title: [
+                            '[edgeShape: **curve**]'
+                        ],
+                        option: getOption('curve', '0'),
+                        height: 500
+                    });
+
+                    var chart1 = testHelper.create(echarts, 'main1', {
+                        title: [
+                            '[edgeShape: **polyline**]'
+                        ],
+                        option: getOption('polyline', '1'),
+                        height: 500
                     });
 
                     var cloneData = echarts.util.clone(data);
+
                     setInterval(function() {
                         cloneData.children[1].children.splice(0, 1);
-                        chart.setOption({
+
+                        chart0.setOption({
+                            series: [{
+                                type: 'tree',
+                                id: '0',
+                                data: [cloneData]
+                            }]
+                        }, false);
+
+                        chart1.setOption({
                             series: [{
                                 type: 'tree',
-                                id: '2',
+                                id: '1',
                                 data: [cloneData]
                             }]
                         }, false);
                     }, 1000);
- 
                 });
         </script>
     </body>

test/tree-removeNode.html

@@ -25,26 +25,22 @@ under the License.
         <script src="lib/esl.js"></script>
         <script src="lib/config.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <link rel="stylesheet" href="lib/reset.css" />
     </head>
     <body>
-        <style>
-            html, body, #main {
-                width: 100%;
-                padding: 0;
-                margin: 0;
-                height: 100%;
-            }
-        </style>
-        <div id="main"></div>
+
+        <div id="main0"></div>
+        <div id="main1"></div>
+
         <script>
             require([
                 'echarts'
                 ], function (echarts) {
-                    var chart = echarts.init(document.getElementById('main'), null, {
-                    });
 
                     window.onresize = function () {
-                        chart.resize();
+                        chart0.resize();
+                        chart1.resize();
                     };
 
                     var data = {
@@ -80,67 +76,94 @@ under the License.
                         ]
                     };
 
-                    chart.setOption({
-
-                        tooltip: {
-                            trigger: 'item',
-                            triggerOn: 'mousemove'
-                        },
-
-                        legend: {
-                            top: '2%',
-                            left: '3%',
-                            orient: 'vertical',
-                            data: [{
-                                name: 'tree1',
-                                icon: 'rectangle'
-                            }],
-                            borderColor: '#c23531'
-                        },
-
-                        series:[
-                            {
-                                type: 'tree',
-                                id: '2',
-                                name: 'tree1',
-                                data: [data],
+                    function getOption(edgeShape, id) {
+                        return {
+                            tooltip: {
+                                trigger: 'item',
+                                triggerOn: 'mousemove'
+                            },
+
+                            legend: {
+                                top: '2%',
+                                left: '3%',
+                                orient: 'vertical',
+                                data: [{
+                                    name: 'tree1',
+                                    icon: 'rectangle'
+                                }],
+                                borderColor: '#c23531'
+                            },
 
-                                top: '20%',
-                                left: '30%',
-                                bottom: '22%',
-                                right: '20%',
+                            series:[
+                                {
+                                    type: 'tree',
+                                    id: id,
+                                    name: 'tree1',
+                                    data: [data],
 
-                                symbolSize: 7,
-                                orient: 'RL',
+                                    top: '20%',
+                                    left: '30%',
+                                    bottom: '22%',
+                                    right: '20%',
 
-                                label: {
-                                    position: 'right',
-                                    verticalAlign: 'middle',
-                                    align: 'left' 
-                                },
+                                    symbolSize: 7,
+                                    orient: 'RL',
+                                    edgeShape: edgeShape,
 
-                                leaves: {
                                     label: {
-                                            position: 'left',
-                                            verticalAlign: 'middle',
-                                            align: 'right'
-                                    }
-                                },
-                                
-                                expandAndCollapse: true,
-                                animationDuration: 550,
-                                animationDurationUpdate: 750
-                            }
-                        ]
+                                        position: 'right',
+                                        verticalAlign: 'middle',
+                                        align: 'left'
+                                    },
+
+                                    leaves: {
+                                        label: {
+                                                position: 'left',
+                                                verticalAlign: 'middle',
+                                                align: 'right'
+                                        }
+                                    },
+
+                                    expandAndCollapse: true,
+                                    animationDuration: 550,
+                                    animationDurationUpdate: 750
+                                }
+                            ]
+                        }
+                    }
+
+                    var chart0 = testHelper.create(echarts, 'main0', {
+                        title: [
+                            '[edgeShape: **curve**]'
+                        ],
+                        option: getOption('curve', '0'),
+                        height: 500
+                    });
+
+                    var chart1 = testHelper.create(echarts, 'main1', {
+                        title: [
+                            '[edgeShape: **polyline**]'
+                        ],
+                        option: getOption('polyline', '1'),
+                        height: 500
                     });
 
                     setTimeout(function() {
                         var cloneData = echarts.util.clone(data);
                         cloneData.children.splice(0, 1);
-                        chart.setOption({
+
+                        chart0.setOption({
+                            series: [{
+                                type: 'tree',
+                                id: '0',
+                                data: [cloneData]
+                            }]
+                        }, false);
+
+                        chart1.setOption({
                             series: [{
                                 type: 'tree',
-                                id: '2',
+                                id: '1',
                                 data: [cloneData]
                             }]
                         }, false);

test/treemap-disk2.html

@@ -23,6 +23,7 @@ under the License.
         <meta charset="utf-8">
         <script src="lib/esl.js"></script>
         <script src="lib/config.js"></script>
+        <script src="lib/testHelper.js"></script>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
     </head>
     <body>
@@ -59,8 +60,18 @@ under the License.
                 font-size: 16px;
                 margin-bottom: 5px;
             }
+            #btn-area {
+                position: fixed;
+                left: 10px;
+                top: 10px;
+                z-index: 999999;
+                background-color: #fff;
+            }
         </style>
 
+        <div id="btn-area">
+        </div>
+
         <div id="main"></div>
 
         <script src="data/disk.tree.js"></script>
@@ -145,6 +156,7 @@ under the License.
                                         '#675bba', '#fec42c', '#dd4444',
                                         '#d4df5a', '#cd4870'
                                     ],
+                                    highDownTarget: 'subtree',
                                     colorMappingBy: 'value',
                                     itemStyle: {
                                         normal: {
@@ -176,6 +188,45 @@ under the License.
                 chart.on('click', function (params) {
                     console.log(params);
                 });
+
+                initBtns('Only single bg highlighted for non-leaf', [
+                    'Disk Usage',
+                    'PrivateFrameworks'
+                ]);
+                initBtns('Both of the bg and content is highlighted for leaf', [
+                    'Alex.SpeechVoice'
+                ]);
+
+                function initBtns(desc, names) {
+                    var btnArea = document.getElementById('btn-area');
+
+                    var descEl = document.createElement('span');
+                    descEl.innerHTML = testHelper.encodeHTML(desc) + '&nbsp;:&nbsp;&nbsp;';
+                    btnArea.appendChild(descEl);
+
+                    var highDown = ['highlight', 'downplay'];
+
+                    for (var i = 0; i < names.length; i++) {
+                        for (var j = 0; j < highDown.length; j++) {
+                            var highDownName = highDown[j];
+                            var name = names[i];
+                            var btnEl = document.createElement('button');
+                            btnEl.innerHTML = testHelper.encodeHTML(highDownName + ': ' + name);
+                            btnEl.onclick = echarts.util.curry(clickHandler, highDownName, name);
+                            btnArea.appendChild(btnEl);
+                        }
+                    }
+
+                    function clickHandler(highDownName, name) {
+                        chart.dispatchAction({
+                            type: highDownName,
+                            seriesIndex: 0,
+                            name: name
+                        });
+                    }
+
+                    btnArea.appendChild(document.createElement('br'));
+                }
             }
 
         </script>

test/ut/.jshintrc

-{
-    "bitwise": false,
-    "camelcase": true,
-    "curly": true,
-    "es3": true,
-    "eqeqeq": true,
-    "forin": true,
-    "freeze": true,
-    "immed": true,
-    "latedef": "nofunc",
-    "newcap": true,
-    "noarg": true,
-    "noempty": true,
-    "nonbsp": true,
-    "nonew": true,
-    "plusplus": false,
-    "quotmark": "single",
-    "undef": true,
-    "predef": ["define", "require", "requireES", "describe", "expect", "beforeEach", "it"],
-    "unused": "vars",
-    "strict": false,
-    "maxparams": 20,
-    "maxdepth": 6,
-    "maxlen": 120,
-
-    "asi": false,
-    "boss": true,
-    "debug": false,
-    "eqnull": true,
-    "esnext": false,
-    "evil": false,
-    "expr": true,
-    "funcscope": false,
-    "globalstrict": false,
-    "iterator": false,
-    "lastsemic": false,
-    "laxbreak": true,
-    "laxcomma": false,
-    "loopfunc": false,
-    "multistr": false,
-    "notypeof": false,
-    "proto": false,
-    "scripturl": false,
-    "shadow": true,
-    "sub": true,
-    "supernew": false,
-    "validthis": true,
-
-    "browser": true,
-    "jasmine": true,
-    "couch": false,
-    "devel": true,
-    "dojo": false,
-    "jquery": false,
-    "mootools": false,
-    "node": true,
-    "nonstandard": true,
-    "prototypejs": false,
-    "rhino": false,
-    "wsh": true
-}

test/ut/configure

-if [ "$#" -eq 1 ]; then
-    # use specific version
-    old=$1
-else
-    # use last release
-    old=$(git rev-list --tags --max-count=1)
-fi
-mkdir -p tmp
-cp ../../dist/echarts.js "tmp/newEcharts.js"
-git show $old:dist/echarts.js > 'tmp/oldEcharts.js'