Fix timeline mediaquery setOption at second time bug (options should be substituded but not clear).

src/model/OptionManager.js

@@ -115,7 +115,7 @@ define(function (require) {
          * @private
          * @type {Object}
          */
-        this._newOptionBackup;
+        this._newBaseOption;
     }
 
     // timeline.notMerge is not supported in ec3. Firstly there is rearly
@@ -145,27 +145,31 @@ define(function (require) {
             // 如果 timeline options 或者 media 中设置了某个属性，而baseOption中没有设置，则进行警告。
 
             var oldOptionBackup = this._optionBackup;
-            var newOptionBackup = this._newOptionBackup = parseRawOption.call(
+            var newParsedOption = parseRawOption.call(
                 this, rawOption, optionPreprocessorFuncs
             );
+            this._newBaseOption = newParsedOption.baseOption;
 
             // For setOption at second time (using merge mode);
             if (oldOptionBackup) {
                 // Only baseOption can be merged.
-                mergeOption(oldOptionBackup.baseOption, newOptionBackup.baseOption);
+                mergeOption(oldOptionBackup.baseOption, newParsedOption.baseOption);
 
-                if (newOptionBackup.timelineOptions.length) {
-                    oldOptionBackup.timelineOptions = newOptionBackup.timelineOptions;
+                // For simplicity, timeline options and media options do not support merge,
+                // that is, if you `setOption` twice and both has timeline options, the latter
+                // timeline opitons will not be merged to the formers, but just substitude them.
+                if (newParsedOption.timelineOptions.length) {
+                    oldOptionBackup.timelineOptions = newParsedOption.timelineOptions;
                 }
-                if (newOptionBackup.mediaList.length) {
-                    oldOptionBackup.mediaList = newOptionBackup.mediaList;
+                if (newParsedOption.mediaList.length) {
+                    oldOptionBackup.mediaList = newParsedOption.mediaList;
                 }
-                if (newOptionBackup.mediaDefault) {
-                    oldOptionBackup.mediaDefault = newOptionBackup.mediaDefault;
+                if (newParsedOption.mediaDefault) {
+                    oldOptionBackup.mediaDefault = newParsedOption.mediaDefault;
                 }
             }
             else {
-                this._optionBackup = newOptionBackup;
+                this._optionBackup = newParsedOption;
             }
         },
 
@@ -174,12 +178,9 @@ define(function (require) {
          * @return {Object}
          */
         mountOption: function (isRecreate) {
-            var optionBackup = isRecreate
-                // this._optionBackup can be only used when recreate.
-                // In other cases we use model.mergeOption to handle merge.
-                ? this._optionBackup : this._newOptionBackup;
+            var optionBackup = this._optionBackup;
 
-            // FIXME
+            // TODO
             // 如果没有reset功能则不clone。
 
             this._timelineOptions = map(optionBackup.timelineOptions, clone);
@@ -187,7 +188,14 @@ define(function (require) {
             this._mediaDefault = clone(optionBackup.mediaDefault);
             this._currentMediaIndices = [];
 
-            return clone(optionBackup.baseOption);
+            return clone(isRecreate
+                // this._optionBackup.baseOption, which is created at the first `setOption`
+                // called, and is merged into every new option by inner method `mergeOption`
+                // each time `setOption` called, can be only used in `isRecreate`, because
+                // its reliability is under suspicion. In other cases option merge is
+                // proformed by `model.mergeOption`.
+                ? optionBackup.baseOption : this._newBaseOption
+            );
         },
 
         /**
@@ -276,6 +284,7 @@ define(function (require) {
             baseOption = baseOption || {};
             timelineOptions = (rawOption.options || []).slice();
         }
+
         // For media query
         if (rawOption.media) {
             baseOption = baseOption || {};

test/media-finance.html

@@ -66,6 +66,16 @@ chart.setOption({
                 </textarea>
                 <input type="button" value="run" onclick="runCode('code3');"/>
             </div>
+            <div class="code-line">
+                <textarea id="code4">
+chart.setOption({
+    timeline: {
+        currentIndex: 5
+    }
+});
+                </textarea>
+                <input type="button" value="run" onclick="runCode('code4');"/>
+            </div>
         </div>
 
         <script src="data/timelineGDP.js"></script>

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

@@ -189,7 +189,7 @@ describe('vsiaulMap_setOption', function() {
 
         var option = this.chart.getOption();
 
-        expect(!!option.visualMap[0].outOfRange.opacity).toEqual(true);
+        expect(!!option.visualMap[0].target.outOfRange.opacity).toEqual(true);
     });
 
     testCase.createChart(2)('normalizeVisualRange', function () {
@@ -204,12 +204,12 @@ describe('vsiaulMap_setOption', function() {
                 {type: 'piecewise', inRange: {opacity: 0.4}},
                 {type: 'piecewise', inRange: {symbol: 'diamond'}},
                 {type: 'piecewise', inRange: {color: 'red'}, categories: ['a', 'b']},
-                {type: 'piecewise', inRange: {color: {a: 'red'}}, categories: ['a', 'b']}
-                {type: 'piecewise', inRange: {opacity: 0.4}, categories: ['a', 'b']},
+                {type: 'piecewise', inRange: {color: {a: 'red'}}, categories: ['a', 'b']},
+                {type: 'piecewise', inRange: {opacity: 0.4}, categories: ['a', 'b']}
             ]
         });
 
-        var ecModel = this.chart[0].getModel();
+        var ecModel = this.charts[0].getModel();
 
         function getVisual(idx, visualType) {
             return ecModel.getComponent('visualMap', idx)

test/ut/spec/model/timelineOptions.js

+describe('timelineOptions', function() {
+
+    var utHelper = window.utHelper;
+
+    var testCase = utHelper.prepare([
+        'echarts/component/grid',
+        'echarts/chart/line',
+        'echarts/chart/pie',
+        'echarts/chart/bar',
+        'echarts/component/timeline'
+    ]);
+
+    function getData0(chart, seriesIndex) {
+        return getSeries(chart, seriesIndex).getData().get('y', 0);
+    }
+
+    function getSeries(chart, seriesIndex) {
+        return chart.getModel().getComponent('series', seriesIndex);
+    }
+
+    testCase.createChart()('timeline_setOptionOnceMore_baseOption', function () {
+        var option = {
+            baseOption: {
+                timeline: {
+                    axisType: 'category',
+                    autoPlay: false,
+                    playInterval: 1000
+                },
+                xAxis: {data: ['a']},
+                yAxis: {}
+            },
+            options: [
+                {
+                    series: [
+                        {type: 'line', data: [11]},
+                        {type: 'line', data: [22]}
+                    ]
+                },
+                {
+                    series: [
+                        {type: 'line', data: [111]},
+                        {type: 'line', data: [222]}
+                    ]
+                }
+            ]
+        };
+        var chart = this.chart;
+        chart.setOption(option);
+
+        expect(getData0(chart, 0)).toEqual(11);
+        expect(getData0(chart, 1)).toEqual(22);
+
+        chart.setOption({
+            xAxis: {data: ['b']}
+        });
+
+        expect(getData0(chart, 0)).toEqual(11);
+        expect(getData0(chart, 1)).toEqual(22);
+
+        chart.setOption({
+            xAxis: {data: ['c']},
+            timeline: {
+                currentIndex: 1
+            }
+        });
+
+        expect(getData0(chart, 0)).toEqual(111);
+        expect(getData0(chart, 1)).toEqual(222);
+    });
+
+
+
+    testCase.createChart()('timeline_setOptionOnceMore_substitudeTimelineOptions', function () {
+        var option = {
+            baseOption: {
+                timeline: {
+                    axisType: 'category',
+                    autoPlay: false,
+                    playInterval: 1000,
+                    currentIndex: 2
+                },
+                xAxis: {data: ['a']},
+                yAxis: {}
+            },
+            options: [
+                {
+                    series: [
+                        {type: 'line', data: [11]},
+                        {type: 'line', data: [22]}
+                    ]
+                },
+                {
+                    series: [
+                        {type: 'line', data: [111]},
+                        {type: 'line', data: [222]}
+                    ]
+                },
+                {
+                    series: [
+                        {type: 'line', data: [1111]},
+                        {type: 'line', data: [2222]}
+                    ]
+                }
+            ]
+        };
+        var chart = this.chart;
+        chart.setOption(option);
+
+        var ecModel = chart.getModel();
+        expect(getData0(chart, 0)).toEqual(1111);
+        expect(getData0(chart, 1)).toEqual(2222);
+
+        chart.setOption({
+            baseOption: {
+                backgroundColor: '#987654',
+                xAxis: {data: ['b']}
+            },
+            options: [
+                {
+                    series: [
+                        {type: 'line', data: [55]},
+                        {type: 'line', data: [66]}
+                    ]
+                },
+                {
+                    series: [
+                        {type: 'line', data: [555]},
+                        {type: 'line', data: [666]}
+                    ]
+                }
+            ]
+        });
+
+        var ecModel = chart.getModel();
+        var option = ecModel.getOption();
+        expect(option.backgroundColor).toEqual('#987654');
+        expect(getData0(chart, 0)).toEqual(1111);
+        expect(getData0(chart, 1)).toEqual(2222);
+
+        chart.setOption({
+            timeline: {
+                currentIndex: 0
+            }
+        });
+
+        expect(getData0(chart, 0)).toEqual(55);
+        expect(getData0(chart, 1)).toEqual(66);
+
+        chart.setOption({
+            timeline: {
+                currentIndex: 2
+            }
+        });
+
+        // no 1111 2222 any more, replaced totally by new timeline.
+        expect(getData0(chart, 0)).toEqual(55);
+        expect(getData0(chart, 1)).toEqual(66);
+
+    });
+
+});

test/ut/ut.js

@@ -5,6 +5,7 @@ document.write('<script src="spec/util/graphic.js"><\/script>');
 document.write('<script src="spec/util/model.js"><\/script>');
 document.write('<script src="spec/model/Component.js"><\/script>');
 document.write('<script src="spec/model/Global.js"><\/script>');
+document.write('<script src="spec/model/timelineOptions.js"><\/script>');
 
 document.write('<script src="spec/data/List.js"><\/script>');