timeline option: change symbol

src/component/timeline/SliderTimelineModel.js

@@ -24,6 +24,9 @@ define(function(require) {
             tooltip: false,                    // boolean or Object
                                                // data item may also have tootip attr.
 
+            symbol: 'emptyCircle',
+            symbolSize: 10,
+
             lineStyle: {
                 show: true,
                 width: 2,
@@ -52,13 +55,10 @@ define(function(require) {
             },
             itemStyle: {
                 normal: {
-                    symbol: 'emptyCircle',
-                    symbolSize: 10,
                     color: '#304654',
                     borderWidth: 1
                 },
                 emphasis: {
-                    symbolSize: 10,
                     color: '#c23531'
                 }
             },

src/component/timeline/SliderTimelineView.js

@@ -363,7 +363,7 @@ define(function (require) {
                     position: [tickCoord, 0],
                     onclick: bind(this._changeTimeline, this, dataIndex)
                 };
-                var el = giveSymbol(itemStyleModel, group, symbolOpt);
+                var el = giveSymbol(itemModel, itemStyleModel, group, symbolOpt);
                 graphic.setHoverStyle(el, hoverStyleModel.getItemStyle());
 
                 if (itemModel.get('tooltip')) {
@@ -507,7 +507,7 @@ define(function (require) {
 
             // Reuse when exists, for animation and drag.
             this._currentPointer = giveSymbol(
-                pointerModel, this._mainGroup, {}, this._currentPointer, callback
+                pointerModel, pointerModel, this._mainGroup, {}, this._currentPointer, callback
             );
         },
 
@@ -646,10 +646,10 @@ define(function (require) {
     /**
      * Create symbol or update symbol
      */
-    function giveSymbol(itemStyleModel, group, opt, symbol, callback) {
-        var symbolType = itemStyleModel.get('symbol');
+    function giveSymbol(hostModel, itemStyleModel, group, opt, symbol, callback) {
+        var symbolType = hostModel.get('symbol');
         var color = itemStyleModel.get('color');
-        var symbolSize = itemStyleModel.get('symbolSize');
+        var symbolSize = hostModel.get('symbolSize');
         var halfSymbolSize = symbolSize / 2;
         var itemStyle = itemStyleModel.getItemStyle(['color', 'symbol', 'symbolSize']);
 

src/component/timeline/TimelineModel.js

@@ -33,7 +33,7 @@ define(function(require) {
             height: 40,
             padding: 5,
 
-            controlPosition: 'left',           // 'right' | 'none'
+            controlPosition: 'left',           // 'left' 'right' 'top' 'bottom' 'none'
             autoPlay: false,
             rewind: false,                     // 反向播放
             loop: true,

test/timeline-finance.html

@@ -76,12 +76,8 @@ var option = {
                     tooltip: {
                         formatter: '{b} GDP达到一个高度'
                     },
-                    itemStyle: {
-                        normal: {
-                            symbol: 'diamond',
-                            symbolSize: 16
-                        }
-                    }
+                    symbol: 'diamond',
+                    symbolSize: 16,
                 },
                 '2006-01-01', '2007-01-01','2008-01-01','2009-01-01','2010-01-01',
                 {
@@ -91,12 +87,8 @@ var option = {
                             return params.name + 'GDP达到又一个高度';
                         }
                     },
-                    itemStyle: {
-                        normal: {
-                            symbol: 'diamond',
-                            symbolSize: 18
-                        }
-                    }
+                    symbol: 'diamond',
+                    symbolSize: 18
                 },
             ],
             label: {

test/timeline-layout.html

@@ -60,7 +60,8 @@
 
                 makeChart({
                     timeline: {lineStyle: {show: false},
-                    itemStyle: {normal: {symbol: 'circle', color: 'rgba(194,53,49, 0.5)'}},
+                    symbol: 'circle',
+                    itemStyle: {normal: {color: 'rgba(194,53,49, 0.5)'}},
                     controlStyle: {showPrevBtn: false, showNextBtn: false, normal: {color: 'rgba(194,53,49, 0.5)', borderColor: 'rgba(194,53,49, 0.5)'}},
                     orient: 'vertical', inverse: true, x: 0, y: 40, width: 55, height: '80%'
                 }});
@@ -72,22 +73,14 @@
                             '2002-01-01','2003-01-01','2004-01-01','2005-01-01',
                             {
                                 value: '2006-01-01',
-                                itemStyle: {
-                                    normal: {
-                                        symbol: 'pin',
-                                        symbolSize: 30
-                                    }
-                                }
+                                symbol: 'pin',
+                                symbolSize: 30
                             },
                             '2007-01-01','2008-01-01','2009-01-01','2010-01-01',
                             {
                                 value: '2011-01-01',
-                                itemStyle: {
-                                    normal: {
-                                        symbol: 'pin',
-                                        symbolSize: 30
-                                    }
-                                }
+                                symbol: 'pin',
+                                symbolSize: 30
                             }
                         ]
                     }