Fix: visualMap setOption at second time, visual props remain if not modified....

Fix: visualMap setOption at second time, visual props remain if not modified. And suplement test cases.

src/component/visualMap/VisualMapModel.js

@@ -145,8 +145,6 @@ define(function(require) {
         doMergeOption: function (newOption, isInit) {
             var thisOption = this.option;
 
-            // Visual attributes merge is not supported, otherwise it
-            // brings overcomplicated merge logic. See #2853.
             !isInit && replaceVisualOption(thisOption, newOption);
 
             // FIXME
@@ -496,18 +494,28 @@ define(function(require) {
 
     });
 
-    function replaceVisualOption(targetOption, sourceOption) {
-        zrUtil.each(
-            ['inRange', 'outOfRange', 'target', 'controller', 'color'],
-            function (key) {
-                if (sourceOption.hasOwnProperty(key)) {
-                    targetOption[key] = zrUtil.clone(sourceOption[key]);
-                }
-                else {
-                    delete targetOption[key];
-                }
+    function replaceVisualOption(thisOption, newOption) {
+        // Visual attributes merge is not supported, otherwise it
+        // brings overcomplicated merge logic. See #2853. So if
+        // newOption has anyone of these keys, all of these keys
+        // will be reset. Otherwise, all keys remain.
+        var visualKeys = [
+            'inRange', 'outOfRange', 'target', 'controller', 'color'
+        ];
+        var has;
+        zrUtil.each(visualKeys, function (key) {
+            if (newOption.hasOwnProperty(key)) {
+                has = true;
+            }
+        });
+        has && zrUtil.each(visualKeys, function (key) {
+            if (newOption.hasOwnProperty(key)) {
+                thisOption[key] = zrUtil.clone(newOption[key]);
+            }
+            else {
+                delete thisOption[key];
             }
-        );
+        });
     }
 
     return VisualMapModel;

test/ut/core/utHelper.js

@@ -8,6 +8,151 @@
 
     var nativeSlice = Array.prototype.slice;
 
+    /**
+     * Usage:
+     * var testCase = helper.prepare([
+     *     'echarts/chart/line',
+     *     'echarts/component/grid',
+     *     'echarts/component/toolbox'
+     * ])
+     *
+     * testCase('test_case_1', function (grid, line, toolbox) {
+     *     // Real test case.
+     *     // this.echarts can be visited.
+     * });
+     *
+     * testCase.requireId(['echarts/model/Component'])('test_case_2', function (Component) {
+     *     // Real test case.
+     *     // this.echarts can be visited.
+     * });
+     *
+     * testCase.createChart()(function(grid, line, toolbox) {
+     *     // this.echarts can be visited.
+     *     // this.chart can be visited.
+     *     // this.charts[0] can be visited, this.charts[0] === this.chart
+     *     // this.el can be visited.
+     *     // this.els[0] can be visited, this.els[0] === this.el
+     * });
+     *
+     * testCase.createChart(2)(function(grid, line, toolbox) {
+     *     // this.echarts can be visited.
+     *     // this.chart can be visited.
+     *     // this.charts[0] can be visited, this.charts[0] === this.chart
+     *     // this.charts[1] can be visited.
+     *     // this.el can be visited.
+     *     // this.els[0] can be visited, this.els[0] === this.el
+     *     // this.els[1] can be visited.
+     * });
+     *
+     *
+     * @public
+     * @params {Array.<string>} [requireId] Like:
+     * @return {Function} testCase function wrap.
+     */
+    helper.prepare = function (requireId) {
+
+        window.beforeEach(function (done) {
+            window.jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+            done();
+        });
+
+        return wrapTestCaseFn(genContext({requireId: requireId}));
+
+
+        function wrapTestCaseFn(context) {
+
+            var testCase = function (name, doTest) {
+
+                var requireId = context.requireId;
+                if (!(requireId instanceof Array)) {
+                    requireId = requireId != null ? [] : [requireId];
+                }
+                requireId = ['echarts'].concat(requireId);
+
+                window.it(name, function (done) {
+                    helper.resetPackageLoader(onLoaderReset);
+
+                    function onLoaderReset() {
+                        window.require(requireId, onModuleLoaded);
+                    }
+
+                    function onModuleLoaded(echarts) {
+                        var createResult = createChart(context, echarts);
+
+                        var userScope = {
+                            echarts: echarts,
+                            chart: createResult.charts[0],
+                            charts: createResult.charts.slice(),
+                            el: createResult.els[0],
+                            els: createResult.els.slice()
+                        };
+                        doTest.apply(
+                            userScope,
+                            Array.prototype.slice.call(arguments, 1)
+                        );
+
+                        removeChart(createResult);
+
+                        done();
+                    }
+                });
+            };
+
+            testCase.requireId = function (requireId) {
+                return wrapTestCaseFn(genContext({requireId: requireId}, context));
+            };
+
+            testCase.createChart = function (chartCount) {
+                chartCount == null && (chartCount = 1);
+                return wrapTestCaseFn(genContext({chartCount: chartCount}, context));
+            };
+
+            return testCase;
+        }
+
+        function genContext(props, originalContext) {
+            var context = {};
+            if (originalContext) {
+                for (var key in originalContext) {
+                    if (originalContext.hasOwnProperty(key)) {
+                        context[key] = originalContext[key];
+                    }
+                }
+            }
+            if (props) {
+                for (var key in props) {
+                    if (props.hasOwnProperty(key)) {
+                        context[key] = props[key];
+                    }
+                }
+            }
+            return context;
+        }
+
+        function createChart(context, echarts) {
+            var els = [];
+            var charts = [];
+            for (var i = 0; i < context.chartCount || 0; i++) {
+                var el = document.createElement('div');
+                document.body.appendChild(el);
+                els.push(el);
+                charts.push(echarts.init(el, null, {renderer: 'canvas'}));
+            }
+            return {charts: charts, els: els};
+        }
+
+        function removeChart(createResult) {
+            for (var i = 0; i < createResult.charts.length; i++) {
+                var chart = createResult.charts[i];
+                chart && chart.dispose();
+            }
+            for (var i = 0; i < createResult.els.length; i++) {
+                var el = createResult.els[i];
+                el && document.body.removeChild(el);
+            }
+        }
+    };
+
     /**
      * @param {*} target
      * @param {*} source
@@ -161,85 +306,5 @@
         }
     };
 
-    /**
-     * Usage:
-     * var testCase = helper.chartBeforeAndAfter([
-     *     'echarts/component/grid',
-     *     'echarts/chart/line',
-     *     'echarts/chart/pie',
-     *     'echarts/chart/bar',
-     *     'echarts/component/toolbox',
-     *     'echarts/component/dataZoom'
-     * ])
-     *
-     * testCase('test_case_1', function (chart, echarts) {
-     *     // Real test case.
-     * });
-     *
-     * testCase('test_case_2', function (chart, echarts) {
-     *     // Real test case.
-     * });
-     *
-     * testCase('test_case_2', testCaseSpecifiedPackages, function (chart, echarts) {
-     *     // Real test case.
-     * });
-     *
-     *
-     * @public
-     * @params {Array.<string>} packages Like:
-     * @return {Function} testCase function wrap.
-     */
-    helper.chartBeforeAndAfter = function (packages) {
-
-        packages = packages.slice();
-        packages.unshift('echarts');
-
-        var el;
-        var chart;
-
-        window.beforeEach(function (done) {
-            window.jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
-
-            el = document.createElement('div');
-            document.body.appendChild(el);
-
-            helper.resetPackageLoader(done);
-        });
-
-        window.afterEach(function (done) {
-            if (el) {
-                document.body.removeChild(el);
-            }
-            if (chart) {
-                chart.dispose();
-            }
-            done();
-        });
-
-        var testCase = function (name, testCaseSpecifiedPackages, doTest) {
-            if (typeof testCaseSpecifiedPackages === 'function') {
-                doTest = testCaseSpecifiedPackages;
-                testCaseSpecifiedPackages = null;
-            }
-
-            if (testCaseSpecifiedPackages) {
-                testCaseSpecifiedPackages = testCaseSpecifiedPackages.slice();
-                testCaseSpecifiedPackages.unshift('echarts');
-            }
-
-            window.it(name, function (done) {
-                window.require(
-                    testCaseSpecifiedPackages || packages,
-                    function (echarts) {
-                        chart = echarts.init(el, null, {renderer: 'canvas'});
-                        doTest(chart, echarts);
-                        done();
-                    }
-                );
-            });
-        };
-
-        return testCase;
-    };
 
 })(window);
\ No newline at end of file

test/ut/spec/component/visualMap/setOption.js

+describe('vsiaulMap_setOption', function() {
+
+    var utHelper = window.utHelper;
+
+    var testCase = utHelper.prepare([
+        'echarts/component/grid',
+        'echarts/chart/scatter',
+        'echarts/component/visualMap'
+    ]);
+
+    testCase.createChart()('defaultTargetController', function () {
+        this.chart.setOption({
+            xAxis: {},
+            yAxis: {},
+            series: [{type: 'scatter', data: [[12, 223]]}],
+            visualMap: {
+                inRange: {
+                    color: ['red', 'blue', 'yellow']
+                }
+            }
+        });
+
+        var option = this.chart.getOption();
+
+        expect(option.visualMap.length).toEqual(1);
+        expect(option.visualMap[0].inRange.color).toEqual(['red', 'blue', 'yellow']);
+        expect(option.visualMap[0].target.inRange.color).toEqual(['red', 'blue', 'yellow']);
+        expect(option.visualMap[0].controller.inRange.color).toEqual(['red', 'blue', 'yellow']);
+    });
+
+    testCase.createChart()('ec2ColorCompatiable', function () {
+        this.chart.setOption({
+            xAxis: {},
+            yAxis: {},
+            series: [{type: 'scatter', data: [[12, 223]]}],
+            visualMap: {
+                color: ['yellow', 'blue', 'red']
+            }
+        });
+
+        var option = this.chart.getOption();
+
+        expect(option.visualMap.length).toEqual(1);
+        expect(option.visualMap[0].color).toEqual(['yellow', 'blue', 'red']);
+        expect(option.visualMap[0].target.inRange.color).toEqual(['red', 'blue', 'yellow']);
+        expect(option.visualMap[0].controller.inRange.color).toEqual(['red', 'blue', 'yellow']);
+    });
+
+    testCase.createChart()('remainVisualProp', function () {
+        this.chart.setOption({
+            xAxis: {},
+            yAxis: {},
+            series: [{type: 'scatter', data: [[12, 223]]}],
+            visualMap: {
+                inRange: {
+                    color: ['red', 'blue', 'yellow']
+                }
+            }
+        });
+
+        this.chart.setOption({
+            visualMap: {}
+        });
+
+        expectTheSame(this.chart.getOption());
+
+        this.chart.setOption({
+            series: [{data: [[44, 55]]}] // visualMap depends series
+        });
+
+        expectTheSame(this.chart.getOption());
+
+        function expectTheSame(option) {
+            expect(option.visualMap.length).toEqual(1);
+            expect(option.visualMap[0].inRange.color).toEqual(['red', 'blue', 'yellow']);
+            expect(option.visualMap[0].target.inRange.color).toEqual(['red', 'blue', 'yellow']);
+            expect(option.visualMap[0].controller.inRange.color).toEqual(['red', 'blue', 'yellow']);
+        }
+    });
+
+    testCase.createChart()('eraseAllVisualProps_notRelative', function () {
+        this.chart.setOption({
+            xAxis: {},
+            yAxis: {},
+            series: [{type: 'scatter', data: [[12, 223]]}],
+            visualMap: {
+                inRange: {
+                    color: ['red', 'blue', 'yellow'],
+                    symbolSize: [0.3, 0.5]
+                }
+            }
+        });
+
+        var option = this.chart.getOption();
+
+        this.chart.setOption({
+            visualMap: {
+                inRange: {
+                    symbolSize: [0.4, 0.6]
+                }
+            }
+        });
+
+        var option = this.chart.getOption();
+
+        expect(option.visualMap.length).toEqual(1);
+        expect(option.visualMap[0].inRange.hasOwnProperty('color')).toEqual(false);
+        expect(option.visualMap[0].target.inRange.hasOwnProperty('color')).toEqual(false);
+        expect(option.visualMap[0].controller.inRange.hasOwnProperty('color')).toEqual(false);
+        expect(option.visualMap[0].inRange.symbolSize).toEqual([0.4, 0.6]);
+        expect(option.visualMap[0].target.inRange.symbolSize).toEqual([0.4, 0.6]);
+        // Do not compare controller.inRange.symbolSize, which will be amplified to controller size.
+        // expect(option.visualMap[0].controller.inRange.symbolSize).toEqual([?, ?]);
+    });
+
+    testCase.createChart()('eraseAllVisualProps_reletive', function () {
+        this.chart.setOption({
+            xAxis: {},
+            yAxis: {},
+            series: [{type: 'scatter', data: [[12, 223]]}],
+            visualMap: {
+                inRange: {
+                    color: ['red', 'blue', 'yellow'],
+                    colorAlpha: [0.3, 0.5]
+                }
+            }
+        });
+
+        this.chart.setOption({
+            visualMap: {
+                inRange: {
+                    colorAlpha: [0.4, 0.6]
+                }
+            }
+        });
+
+        var option = this.chart.getOption();
+
+        expect(option.visualMap.length).toEqual(1);
+        expect(option.visualMap[0].inRange.hasOwnProperty('color')).toEqual(false);
+        expect(option.visualMap[0].target.inRange.hasOwnProperty('color')).toEqual(false);
+        expect(option.visualMap[0].controller.inRange.hasOwnProperty('color')).toEqual(false);
+        expect(option.visualMap[0].inRange.colorAlpha).toEqual([0.4, 0.6]);
+        expect(option.visualMap[0].target.inRange.colorAlpha).toEqual([0.4, 0.6]);
+        expect(option.visualMap[0].controller.inRange.colorAlpha).toEqual([0.4, 0.6]);
+
+        this.chart.setOption({
+            visualMap: {
+                color: ['red', 'blue', 'green']
+            }
+        });
+
+        var option = this.chart.getOption();
+
+        expect(option.visualMap.length).toEqual(1);
+        expect(option.visualMap[0].target.inRange.hasOwnProperty('colorAlpha')).toEqual(false);
+        expect(option.visualMap[0].controller.inRange.hasOwnProperty('colorAlpha')).toEqual(false);
+        expect(option.visualMap[0].target.inRange.color).toEqual(['green', 'blue', 'red']);
+        expect(option.visualMap[0].controller.inRange.color).toEqual(['green', 'blue', 'red']);
+
+        this.chart.setOption({
+            visualMap: {
+                controller: {
+                    outOfRange: {
+                        symbol: ['diamond']
+                    }
+                }
+            }
+        });
+
+        var option = this.chart.getOption();
+
+        expect(option.visualMap.length).toEqual(1);
+        expect(!option.visualMap[0].target.inRange).toEqual(true);
+        expect(option.visualMap[0].controller.outOfRange.symbol).toEqual(['diamond']);
+    });
+
+
+
+
+});
\ No newline at end of file

test/ut/spec/data/List.js

@@ -2,21 +2,10 @@ describe('List', function () {
 
     var utHelper = window.utHelper;
 
-    beforeEach(function (done) {
-        utHelper.resetPackageLoader(done);
-    });
+    var testCase = utHelper.prepare(['echarts/data/List']);
 
     describe('Data Manipulation', function () {
 
-        function testCase(name, doTest) {
-            it(name, function (done) {
-                window.require(['echarts/data/List'], function () {
-                    doTest.apply(null, arguments);
-                    done();
-                });
-            });
-        }
-
         testCase('initData 1d', function (List) {
             var list = new List(['x', 'y']);
             list.initData([10, 20, 30]);

test/ut/spec/model/Component.js

@@ -2,22 +2,10 @@ describe('Component', function() {
 
     var utHelper = window.utHelper;
 
-    beforeEach(function (done) {
-        utHelper.resetPackageLoader(done);
-    });
+    var testCase = utHelper.prepare(['echarts/model/Component']);
 
     describe('topologicalTravel', function () {
 
-        function testCase(name, doTest) {
-            it(name, function (done) {
-                window.require(['echarts/model/Component'], function () {
-                    doTest.apply(null, arguments);
-                    done();
-                });
-            });
-        }
-        function xtestCase() {} // jshint ignore:line
-
         testCase('topologicalTravel_base', function (ComponentModel) {
             ComponentModel.extend({type: 'm1', dependencies: ['a1', 'a2']});
             ComponentModel.extend({type: 'a1'});

test/ut/spec/model/Global.js

@@ -2,7 +2,7 @@ describe('modelAndOptionMapping', function() {
 
     var utHelper = window.utHelper;
 
-    var testCase = utHelper.chartBeforeAndAfter([
+    var testCase = utHelper.prepare([
         'echarts/component/grid',
         'echarts/chart/line',
         'echarts/chart/pie',
@@ -74,7 +74,7 @@ describe('modelAndOptionMapping', function() {
 
     describe('idNoNameNo', function () {
 
-        testCase('sameTypeNotMerge', function (chart, echarts) {
+        testCase.createChart()('sameTypeNotMerge', function () {
             var option = {
                 xAxis: {data: ['a']},
                 yAxis: {},
@@ -84,6 +84,7 @@ describe('modelAndOptionMapping', function() {
                     {type: 'line', data: [33]}
                 ]
             };
+            var chart = this.chart;
             chart.setOption(option);
 
             // Not merge
@@ -95,7 +96,7 @@ describe('modelAndOptionMapping', function() {
             viewEqualsToOrigin(chart, [0, 1, 2], origins, true);
         });
 
-        testCase('sameTypeMergeFull', function (chart, echarts) {
+        testCase.createChart()('sameTypeMergeFull', function () {
             var option = {
                 xAxis: {data: ['a']},
                 yAxis: {},
@@ -105,6 +106,7 @@ describe('modelAndOptionMapping', function() {
                     {type: 'line', data: [33]}
                 ]
             };
+            var chart = this.chart;
             chart.setOption(option);
 
             // Merge
@@ -126,7 +128,7 @@ describe('modelAndOptionMapping', function() {
             modelEqualsToOrigin(chart, [0, 1, 2], origins, true);
         });
 
-        testCase('sameTypeMergePartial', function (chart, echarts) {
+        testCase.createChart()('sameTypeMergePartial', function () {
             var option = {
                 xAxis: {data: ['a']},
                 yAxis: {},
@@ -136,6 +138,7 @@ describe('modelAndOptionMapping', function() {
                     {type: 'line', data: [33]}
                 ]
             };
+            var chart = this.chart;
             chart.setOption(option);
 
             // Merge
@@ -155,7 +158,7 @@ describe('modelAndOptionMapping', function() {
             modelEqualsToOrigin(chart, [0, 1, 2], origins, true);
         });
 
-        testCase('differentTypeMerge', function (chart, echarts) {
+        testCase.createChart()('differentTypeMerge', function () {
             var option = {
                 xAxis: {data: ['a']},
                 yAxis: {},
@@ -165,6 +168,7 @@ describe('modelAndOptionMapping', function() {
                     {type: 'line', data: [33]}
                 ]
             };
+            var chart = this.chart;
             chart.setOption(option);
 
             // Merge
@@ -197,7 +201,7 @@ describe('modelAndOptionMapping', function() {
 
     describe('idSpecified', function () {
 
-        testCase('sameTypeNotMerge', function (chart, echarts) {
+        testCase.createChart()('sameTypeNotMerge', function () {
             var option = {
                 xAxis: {data: ['a']},
                 yAxis: {},
@@ -209,6 +213,7 @@ describe('modelAndOptionMapping', function() {
                     {type: 'line', data: [55]}
                 ]
             };
+            var chart = this.chart;
             chart.setOption(option);
 
             expect(countSeries(chart)).toEqual(5);
@@ -228,7 +233,7 @@ describe('modelAndOptionMapping', function() {
             viewEqualsToOrigin(chart, [0, 1, 2, 3, 4], origins, true);
         });
 
-        testCase('sameTypeMerge', function (chart, echarts) {
+        testCase.createChart()('sameTypeMerge', function () {
             var option = {
                 xAxis: {data: ['a']},
                 yAxis: {},
@@ -240,6 +245,7 @@ describe('modelAndOptionMapping', function() {
                     {type: 'line', data: [55]}
                 ]
             };
+            var chart = this.chart;
             chart.setOption(option);
 
             var origins = saveOrigins(chart);
@@ -251,7 +257,7 @@ describe('modelAndOptionMapping', function() {
             viewEqualsToOrigin(chart, [0, 1, 2, 3, 4], origins, true);
         });
 
-        testCase('differentTypeNotMerge', function (chart, echarts) {
+        testCase.createChart()('differentTypeNotMerge', function () {
             var option = {
                 xAxis: {data: ['a']},
                 yAxis: {},
@@ -263,6 +269,7 @@ describe('modelAndOptionMapping', function() {
                     {type: 'line', data: [55]}
                 ]
             };
+            var chart = this.chart;
             chart.setOption(option);
 
             var origins = saveOrigins(chart);
@@ -286,7 +293,7 @@ describe('modelAndOptionMapping', function() {
             viewEqualsToOrigin(chart, [1, 3], origins, false);
         });
 
-        testCase('differentTypeMergeFull', function (chart, echarts) {
+        testCase.createChart()('differentTypeMergeFull', function () {
             var option = {
                 xAxis: {data: ['a']},
                 yAxis: {},
@@ -298,6 +305,7 @@ describe('modelAndOptionMapping', function() {
                     {type: 'line', data: [55]}
                 ]
             };
+            var chart = this.chart;
             chart.setOption(option);
 
             var origins = saveOrigins(chart);
@@ -320,7 +328,7 @@ describe('modelAndOptionMapping', function() {
             viewEqualsToOrigin(chart, [1, 3], origins, false);
         });
 
-        testCase('differentTypeMergePartial1', function (chart, echarts) {
+        testCase.createChart()('differentTypeMergePartial1', function () {
             var option = {
                 xAxis: {data: ['a']},
                 yAxis: {},
@@ -332,6 +340,7 @@ describe('modelAndOptionMapping', function() {
                     {type: 'line', data: [55]}
                 ]
             };
+            var chart = this.chart;
             chart.setOption(option);
 
             var origins = saveOrigins(chart);
@@ -357,7 +366,7 @@ describe('modelAndOptionMapping', function() {
             viewEqualsToOrigin(chart, [3], origins, false);
         });
 
-        testCase('differentTypeMergePartial2', function (chart, echarts) {
+        testCase.createChart()('differentTypeMergePartial2', function () {
             var option = {
                 xAxis: {data: ['a']},
                 yAxis: {},
@@ -366,6 +375,7 @@ describe('modelAndOptionMapping', function() {
                     {type: 'line', data: [22], id: 20}
                 ]
             };
+            var chart = this.chart;
             chart.setOption(option);
 
             var option2 = {
@@ -387,7 +397,7 @@ describe('modelAndOptionMapping', function() {
         });
 
 
-        testCase('mergePartialDoNotMapToOtherId', function (chart, echarts) {
+        testCase.createChart()('mergePartialDoNotMapToOtherId', function () {
             var option = {
                 xAxis: {data: ['a']},
                 yAxis: {},
@@ -396,6 +406,7 @@ describe('modelAndOptionMapping', function() {
                     {type: 'line', data: [22], id: 20}
                 ]
             };
+            var chart = this.chart;
             chart.setOption(option);
 
             var option2 = {
@@ -413,7 +424,7 @@ describe('modelAndOptionMapping', function() {
         });
 
 
-        testCase('idDuplicate', function (chart, echarts) {
+        testCase.createChart()('idDuplicate', function () {
             var option = {
                 xAxis: {data: ['a']},
                 yAxis: {},
@@ -423,6 +434,8 @@ describe('modelAndOptionMapping', function() {
                 ]
             };
 
+            var chart = this.chart;
+
             expect(function () {
                 chart.setOption(option);
             }).toThrowError(/duplicate/);
@@ -442,7 +455,7 @@ describe('modelAndOptionMapping', function() {
 
     describe('noIdButNameExists', function () {
 
-        testCase('sameTypeNotMerge', function (chart, echarts) {
+        testCase.createChart()('sameTypeNotMerge', function () {
             var option = {
                 xAxis: {data: ['a']},
                 yAxis: {},
@@ -454,6 +467,7 @@ describe('modelAndOptionMapping', function() {
                     {type: 'line', data: [55], name: 'a'}
                 ]
             };
+            var chart = this.chart;
             chart.setOption(option);
 
             expect(getSeries(chart, 1)).not.toEqual(getSeries(chart, 4));
@@ -476,7 +490,7 @@ describe('modelAndOptionMapping', function() {
             viewEqualsToOrigin(chart, [0, 1, 2, 3, 4], origins, true);
         });
 
-        testCase('sameTypeMerge', function (chart, echarts) {
+        testCase.createChart()('sameTypeMerge', function () {
             var option = {
                 xAxis: {data: ['a']},
                 yAxis: {},
@@ -488,6 +502,7 @@ describe('modelAndOptionMapping', function() {
                     {type: 'line', data: [55], name: 'a'}
                 ]
             };
+            var chart = this.chart;
             chart.setOption(option);
 
             var origins = saveOrigins(chart);
@@ -499,7 +514,7 @@ describe('modelAndOptionMapping', function() {
             viewEqualsToOrigin(chart, [0, 1, 2, 3, 4], origins, true);
         });
 
-        testCase('differentTypeNotMerge', function (chart, echarts) {
+        testCase.createChart()('differentTypeNotMerge', function () {
             var option = {
                 xAxis: {data: ['a']},
                 yAxis: {},
@@ -511,6 +526,7 @@ describe('modelAndOptionMapping', function() {
                     {type: 'line', data: [55], name: 'a'}
                 ]
             };
+            var chart = this.chart;
             chart.setOption(option);
 
             var origins = saveOrigins(chart);
@@ -534,7 +550,7 @@ describe('modelAndOptionMapping', function() {
             viewEqualsToOrigin(chart, [1, 3], origins, false);
         });
 
-        testCase('differentTypeMergePartialOneMapTwo', function (chart, echarts) {
+        testCase.createChart()('differentTypeMergePartialOneMapTwo', function () {
             var option = {
                 xAxis: {data: ['a']},
                 yAxis: {},
@@ -546,6 +562,7 @@ describe('modelAndOptionMapping', function() {
                     {type: 'line', data: [55], name: 'a'}
                 ]
             };
+            var chart = this.chart;
             chart.setOption(option);
 
             var origins = saveOrigins(chart);
@@ -572,7 +589,7 @@ describe('modelAndOptionMapping', function() {
             viewEqualsToOrigin(chart, [1], origins, false);
         });
 
-        testCase('differentTypeMergePartialTwoMapOne', function (chart, echarts) {
+        testCase.createChart()('differentTypeMergePartialTwoMapOne', function () {
             var option = {
                 xAxis: {data: ['a']},
                 yAxis: {},
@@ -581,6 +598,7 @@ describe('modelAndOptionMapping', function() {
                     {type: 'line', data: [22], name: 'a'}
                 ]
             };
+            var chart = this.chart;
             chart.setOption(option);
 
             var option2 = {
@@ -601,7 +619,7 @@ describe('modelAndOptionMapping', function() {
             expect(getData0(chart, 3)).toEqual(111);
         });
 
-        testCase('mergePartialCanMapToOtherName', function (chart, echarts) {
+        testCase.createChart()('mergePartialCanMapToOtherName', function () {
             // Consider case: axis.name = 'some label', which can be overwritten.
             var option = {
                 xAxis: {data: ['a']},
@@ -611,6 +629,7 @@ describe('modelAndOptionMapping', function() {
                     {type: 'line', data: [22], name: 20}
                 ]
             };
+            var chart = this.chart;
             chart.setOption(option);
 
             var option2 = {
@@ -638,7 +657,7 @@ describe('modelAndOptionMapping', function() {
 
     describe('ohters', function () {
 
-        testCase('aBugCase', function (chart, echarts) {
+        testCase.createChart()('aBugCase', function () {
             var option = {
                 series: [
                     {
@@ -667,6 +686,7 @@ describe('modelAndOptionMapping', function() {
                     }
                 ]
             };
+            var chart = this.chart;
             chart.setOption(option);
 
             chart.setOption({
@@ -720,7 +740,7 @@ describe('modelAndOptionMapping', function() {
             expect(countSeries(chart)).toEqual(2);
         });
 
-        testCase('color', function (chart, echarts) {
+        testCase.createChart()('color', function () {
             var option = {
                 backgroundColor: 'rgba(1,1,1,1)',
                 xAxis: {data: ['a']},
@@ -731,6 +751,7 @@ describe('modelAndOptionMapping', function() {
                     {type: 'line', data: [33]}
                 ]
             };
+            var chart = this.chart;
             chart.setOption(option);
             expect(chart._model.option.backgroundColor).toEqual('rgba(1,1,1,1)');
 
@@ -742,7 +763,7 @@ describe('modelAndOptionMapping', function() {
             expect(chart._model.option.backgroundColor).toEqual('#fff');
         });
 
-        testCase('innerId', function (chart, echarts) {
+        testCase.createChart()('innerId', function () {
             var option = {
                 xAxis: {data: ['a']},
                 yAxis: {},
@@ -760,6 +781,7 @@ describe('modelAndOptionMapping', function() {
                     {type: 'line', data: [22]}
                 ]
             };
+            var chart = this.chart;
             chart.setOption(option);
 
             expect(countModel(chart, 'dataZoom')).toEqual(4);

test/ut/ut.js

@@ -7,3 +7,5 @@ document.write('<script src="spec/model/Component.js"><\/script>');
 document.write('<script src="spec/model/Global.js"><\/script>');
 
 document.write('<script src="spec/data/List.js"><\/script>');
+
+document.write('<script src="spec/component/visualMap/setOption.js"><\/script>');

test/visualMap-continuous.html

+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="esl.js"></script>
+        <script src="config.js"></script>
+        <link rel="stylesheet" href="reset.css" />
+    </head>
+    <body>
+        <style>
+            .split {
+                height: 40px;
+                background: #ddd;
+            }
+            .main {
+                height: 80%;
+            }
+        </style>
+
+        <div id="main1" class="main"></div>
+        <div class="split"></div>
+        <div id="main2" class="main"></div>
+
+
+
+
+
+
+
+
+
+
+
+        <script>
+            require([
+                'echarts',
+                'echarts/chart/bar',
+                'echarts/component/grid',
+                'echarts/component/visualMapContinuous'
+            ], function (echarts) {
+
+                var chart = echarts.init(document.getElementById('main1'), null, {
+                    renderer: 'canvas'
+                });
+
+                var data0 = [];
+
+                var MAX_DIM1 = 100;
+
+                var itemStyle = {
+                    normal: {
+                        opacity: 0.8,
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowOffsetY: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.3)'
+                    }
+                };
+
+                var last = 60;
+                var lastDelta = 20;
+                for (var i = 0; i < MAX_DIM1; i++) {
+                    lastDelta += (Math.random() - 0.5) * 15;
+                    data0.push([
+                        i,
+                        last += lastDelta
+                    ]);
+                }
+
+                chart.setOption({
+                    grid: {
+                        top: 100,
+                        bottom: 100
+                    },
+                    xAxis: {
+                        type: 'value',
+                        splitLine: {
+                            show: false
+                        }
+                    },
+                    yAxis: {
+                        type: 'value',
+                        splitLine: {
+                            show: false
+                        }
+                    },
+                    visualMap: [
+                        {
+                            show: true,
+                            left: 'center',
+                            bottom: 20,
+                            orient: 'horizontal',
+                            itemWidth: 20,
+                            itemHeight: 200,
+                            min: 0,
+                            max: MAX_DIM1,
+                            calculable: true,
+                            range: [5, 95],
+                            dimension: 0,
+                            inRange: {
+                                // color: ['#fff', '#fff'],
+                                colorHue: [
+                                    0, 300
+                                ],
+                                colorLightness: [0.35, 0.35],
+                                colorSaturation: [1, 1]
+                            },
+                            outOfRange: {
+                                color: ['#eee', '#eee']
+                            }
+                        }
+                    ],
+                    series: [
+                        {
+                            name: 'bar',
+                            type: 'bar',
+                            barMaxWidth: 10,
+                            itemStyle: itemStyle,
+                            data: data0
+                        }
+                    ]
+                });
+            })
+        </script>
+
+
+
+
+
+
+
+<!--
+
+        <script>
+            require([
+                'echarts',
+                'echarts/chart/scatter',
+                'echarts/component/legend',
+                'echarts/component/grid',
+                'echarts/component/visualMapContinuous'
+            ], function (echarts) {
+
+                var chart = echarts.init(document.getElementById('main2'), null, {
+                    renderer: 'canvas'
+                });
+
+                var data0 = [];
+                var data1 = [];
+
+                var MAX_DIM2 = 300;
+                var MAX_DIM3 = 20000;
+
+                var itemStyle = {
+                    normal: {
+                        opacity: 0.8,
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowOffsetY: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                };
+
+                for (var i = 0; i < 60; i++) {
+                    data0.push(genDataItem());
+                    data1.push(genDataItem());
+                }
+
+                function genDataItem() {
+                    return [
+                        Math.random() * 5,
+                        Math.random() * 4,
+                        Math.random() * MAX_DIM2,
+                        Math.random() * MAX_DIM3
+                    ];
+                }
+
+                chart.setOption({
+                    color: ['#555', '#555'],
+                    legend: {
+                        top: 20,
+                        data: ['scatter0', 'scatter1']
+                    },
+                    grid: {
+                        top: 100,
+                        bottom: 60,
+                        left: 150
+                    },
+                    xAxis: {
+                        type: 'value',
+                        splitLine: {
+                            show: false
+                        }
+                    },
+                    yAxis: {
+                        type: 'value',
+                        splitLine: {
+                            show: false
+                        }
+                    },
+                    visualMap: [
+                        {
+                            show: true,
+                            top: 'center',
+                            left: 30,
+                            itemHeight: 400,
+                            min: 0,
+                            max: MAX_DIM2,
+                            calculable: true,
+                            dimension: 2,
+                            range: [15, 278],
+                            inRange: {
+                                color: ['blue', 'orange', 'yellow']
+                            },
+                            outOfRange: {
+                                color: ['#ddd', '#ddd']
+                            }
+                        },
+                        {
+                            show: false,
+                            min: 0,
+                            max: MAX_DIM3,
+                            dimension: 3,
+                            inRange: {
+                                symbolSize: [3, 40]
+                            },
+                            outOfRange: {
+                                symbolSize: [3, 40]
+                            }
+                        }
+                    ],
+                    series: [
+                        {
+                            name: 'scatter0',
+                            type: 'scatter',
+                            symbol: 'circle',
+                            itemStyle: itemStyle,
+                            data: data0
+                        },
+                        {
+                            name: 'scatter1',
+                            type: 'scatter',
+                            symbol: 'diamond',
+                            itemStyle: itemStyle,
+                            data: data1
+                        }
+                    ]
+                });
+            })
+        </script>
+
+
+
+
+ -->
+
+
+
+
+
+
+
+
+
+
+
+
+    </body>
+</html>
\ No newline at end of file

test/visualMap-scatter-continuous.html

-<html>
-    <head>
-        <meta charset="utf-8">
-        <script src="esl.js"></script>
-        <script src="config.js"></script>
-    </head>
-    <body>
-        <style>
-            html, body, #main {
-                width: 100%;
-                height: 100%;
-            }
-        </style>
-        <div id="main"></div>
-        <script>
-
-
-            require([
-                'echarts',
-                'echarts/chart/scatter',
-                'echarts/component/legend',
-                'echarts/component/grid',
-                'echarts/component/visualMapContinuous'
-            ], function (echarts) {
-
-                var chart = echarts.init(document.getElementById('main'), null, {
-                    renderer: 'canvas'
-                });
-
-                var data1 = [];
-                var data2 = [];
-                var data3 = [];
-
-                var symbolCount = 6;
-
-                for (var i = 0; i < 100; i++) {
-                    data1.push([
-                        Math.random() * 5, Math.random() * 4, Math.random() * 20,
-                        Math.round(Math.random() * (symbolCount - 1))
-                    ]);
-                    data2.push([
-                        Math.random() * 10, Math.random() * 5, Math.random() * 20,
-                        Math.round(Math.random() * (symbolCount - 1))
-                    ]);
-                    data3.push([
-                        Math.random() * 15, Math.random() * 10, Math.random() * 20,
-                        Math.round(Math.random() * (symbolCount - 1))
-                    ]);
-                }
-
-                chart.setOption({
-                    legend: {
-                        top: 50,
-                        data: ['scatter', 'scatter2', 'scatter3']
-                    },
-                    grid: {
-                        top: '26%',
-                        bottom: '26%'
-                    },
-                    xAxis: {
-                        type: 'value',
-                        splitLine: {
-                            show: false
-                        }
-                    },
-                    yAxis: {
-                        type: 'value',
-                        splitLine: {
-                            show: false
-                        }
-                    },
-                    visualMap: [
-                        {
-                            show: true,
-                            top: 100,
-                            // itemHeight: 100,
-                            backgroundColor: '#ddd',
-                            // calculable: true,
-                            inRange: {
-                                color: ['red', 'pink', 'black']
-                            }
-                        }
-                    ],
-                    series: [
-                        {
-                            name: 'scatter',
-                            type: 'scatter',
-                            itemStyle: {
-                                normal: {
-                                    opacity: 0.8,
-                                    shadowBlur: 10,
-                                    shadowOffsetX: 0,
-                                    shadowOffsetY: 0,
-                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
-                                }
-                            },
-                            symbolSize: function (val) {
-                                return val[2] * 2;
-                            },
-                            data: data1
-                        }
-                    ]
-                });
-
-
-
-
-                chart.setOption({
-                    visualMap: {
-                        inRange: {
-                            color: ["green", "red"]
-                        }
-                    }
-                });
-
-
-
-
-
-            })
-
-        </script>
-    </body>
-</html>
\ No newline at end of file