feat(timeline): improve icon and label color.

src/component/timeline/SliderTimelineModel.ts

@@ -54,7 +54,7 @@ class SliderTimelineModel extends TimelineModel {
         lineStyle: {
             show: true,
             width: 2,
-            color: '#A4BED7'
+            color: '#DAE1F5'
         },
         label: {                            // 文本标签
             position: 'auto',           // auto left right top bottom
@@ -66,10 +66,10 @@ class SliderTimelineModel extends TimelineModel {
             rotate: 0,
             // formatter: null,
             // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-            color: '#A4BED7'
+            color: '#A4B1D7'
         },
         itemStyle: {
-            color: '#A4BED7',
+            color: '#A4B1D7',
             borderWidth: 1
         },
 
@@ -94,16 +94,22 @@ class SliderTimelineModel extends TimelineModel {
             showPlayBtn: true,
             showPrevBtn: true,
             showNextBtn: true,
-            itemSize: 22,
+
+            itemSize: 24,
             itemGap: 12,
+
             position: 'left',  // 'left' 'right' 'top' 'bottom'
+
             playIcon: 'path://M31.6,53C17.5,53,6,41.5,6,27.4S17.5,1.8,31.6,1.8C45.7,1.8,57.2,13.3,57.2,27.4S45.7,53,31.6,53z M31.6,3.3 C18.4,3.3,7.5,14.1,7.5,27.4c0,13.3,10.8,24.1,24.1,24.1C44.9,51.5,55.7,40.7,55.7,27.4C55.7,14.1,44.9,3.3,31.6,3.3z M24.9,21.3 c0-2.2,1.6-3.1,3.5-2l10.5,6.1c1.899,1.1,1.899,2.9,0,4l-10.5,6.1c-1.9,1.1-3.5,0.2-3.5-2V21.3z', // jshint ignore:line
             stopIcon: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z', // jshint ignore:line
-            nextIcon: 'path://M18.6,50.8l22.5-22.5c0.2-0.2,0.3-0.4,0.3-0.7c0-0.3-0.1-0.5-0.3-0.7L18.7,4.4c-0.1-0.1-0.2-0.3-0.2-0.5 c0-0.4,0.3-0.8,0.8-0.8c0.2,0,0.5,0.1,0.6,0.3l23.5,23.5l0,0c0.2,0.2,0.3,0.4,0.3,0.7c0,0.3-0.1,0.5-0.3,0.7l-0.1,0.1L19.7,52 c-0.1,0.1-0.3,0.2-0.5,0.2c-0.4,0-0.8-0.3-0.8-0.8C18.4,51.2,18.5,51,18.6,50.8z', // jshint ignore:line
-            prevIcon: 'path://M43,52.8L20.4,30.3c-0.2-0.2-0.3-0.4-0.3-0.7c0-0.3,0.1-0.5,0.3-0.7L42.9,6.4c0.1-0.1,0.2-0.3,0.2-0.5 c0-0.4-0.3-0.8-0.8-0.8c-0.2,0-0.5,0.1-0.6,0.3L18.3,28.8l0,0c-0.2,0.2-0.3,0.4-0.3,0.7c0,0.3,0.1,0.5,0.3,0.7l0.1,0.1L41.9,54 c0.1,0.1,0.3,0.2,0.5,0.2c0.4,0,0.8-0.3,0.8-0.8C43.2,53.2,43.1,53,43,52.8z', // jshint ignore:line
+            nextIcon: 'M2,18.5A1.52,1.52,0,0,1,.92,18a1.49,1.49,0,0,1,0-2.12L7.81,9.36,1,3.11A1.5,1.5,0,1,1,3,.89l8,7.34a1.48,1.48,0,0,1,.49,1.09,1.51,1.51,0,0,1-.46,1.1L3,18.08A1.5,1.5,0,0,1,2,18.5Z', // jshint ignore:line
+            prevIcon: 'M10,.5A1.52,1.52,0,0,1,11.08,1a1.49,1.49,0,0,1,0,2.12L4.19,9.64,11,15.89a1.5,1.5,0,1,1-2,2.22L1,10.77A1.48,1.48,0,0,1,.5,9.68,1.51,1.51,0,0,1,1,8.58L9,.92A1.5,1.5,0,0,1,10,.5Z', // jshint ignore:line
+
+            prevBtnSize: 18,
+            nextBtnSize: 18,
 
-            color: '#A4BED7',
-            borderColor: '#A4BED7',
+            color: '#A4B1D7',
+            borderColor: '#A4B1D7',
             borderWidth: 1
         },
         emphasis: {
@@ -130,6 +136,9 @@ class SliderTimelineModel extends TimelineModel {
             },
             itemStyle: {
                 color: '#316BF3'
+            },
+            label: {
+                color: '#6f778d'
             }
         },
 

src/component/timeline/SliderTimelineView.ts

@@ -30,7 +30,7 @@ import * as numberUtil from '../../util/number';
 import {encodeHTML} from '../../util/format';
 import GlobalModel from '../../model/Global';
 import ExtensionAPI from '../../ExtensionAPI';
-import { merge, each, extend, clone, isString, bind, defaults } from 'zrender/src/core/util';
+import { merge, each, extend, clone, isString, bind, defaults, retrieve2 } from 'zrender/src/core/util';
 import SliderTimelineModel from './SliderTimelineModel';
 import ComponentView from '../../view/Component';
 import { LayoutOrient, ZRTextAlign, ZRTextVerticalAlign, ZRElementEvent } from '../../util/types';
@@ -43,7 +43,7 @@ import OrdinalScale from '../../scale/Ordinal';
 import TimeScale from '../../scale/Time';
 import IntervalScale from '../../scale/Interval';
 import { VectorArray } from 'zrender/src/core/vector';
-import ZRText from 'zrender/src/graphic/Text';
+import { parsePercent } from 'zrender/src/contain/text';
 
 const PI = Math.PI;
 
@@ -51,6 +51,7 @@ type TimelineSymbol = ReturnType<typeof createSymbol>;
 
 type RenderMethodName = '_renderAxisLine' | '_renderAxisTick' | '_renderControl' | '_renderCurrentPointer';
 
+type ControlName = 'play' | 'stop' | 'next' | 'prev';
 type ControlIconName = 'playIcon' | 'stopIcon' | 'nextIcon' | 'prevIcon';
 
 interface LayoutInfo {
@@ -506,36 +507,40 @@ class SliderTimelineView extends TimelineView {
 
         const itemStyle = timelineModel.getModel('controlStyle').getItemStyle();
         const hoverStyle = timelineModel.getModel(['emphasis', 'controlStyle']).getItemStyle();
-        const rect = [0, -controlSize / 2, controlSize, controlSize];
         const playState = timelineModel.getPlayState();
         const inverse = timelineModel.get('inverse', true);
 
         makeBtn(
             layoutInfo.nextBtnPosition,
-            'nextIcon',
+            'next',
             bind(this._changeTimeline, this, inverse ? '-' : '+')
         );
         makeBtn(
             layoutInfo.prevBtnPosition,
-            'prevIcon',
+            'prev',
             bind(this._changeTimeline, this, inverse ? '+' : '-')
         );
         makeBtn(
             layoutInfo.playPosition,
-            (playState ? 'stopIcon' : 'playIcon'),
+            (playState ? 'stop' : 'play'),
             bind(this._handlePlayClick, this, !playState),
             true
         );
 
         function makeBtn(
             position: number[],
-            iconPath: ControlIconName,
+            iconName: ControlName,
             onclick: () => void,
             willRotate?: boolean
         ) {
             if (!position) {
                 return;
             }
+            const iconSize = parsePercent(
+                retrieve2(timelineModel.get(['controlStyle', iconName + 'BtnSize' as any]), controlSize),
+                controlSize
+            );
+            const rect = [0, -iconSize / 2, iconSize, iconSize];
             const opt = {
                 position: position,
                 origin: [controlSize / 2, 0],
@@ -544,7 +549,7 @@ class SliderTimelineView extends TimelineView {
                 style: itemStyle,
                 onclick: onclick
             };
-            const btn = makeControlIcon(timelineModel, iconPath, rect, opt);
+            const btn = makeControlIcon(timelineModel, iconName + 'Icon' as ControlIconName, rect, opt);
             btn.ensureState('emphasis').style = hoverStyle;
             group.add(btn);
             enableHoverEmphasis(btn);
@@ -704,7 +709,7 @@ class SliderTimelineView extends TimelineView {
             tickSymbols && tickSymbols[i]
                 && tickSymbols[i].toggleState('progress', i < currentIndex);
             tickLabels && tickLabels[i]
-                && tickLabels[i].toggleState('progress', i < currentIndex);
+                && tickLabels[i].toggleState('progress', i <= currentIndex);
         }
     }
 }

src/component/timeline/TimelineModel.ts

@@ -52,6 +52,12 @@ export interface TimelineControlStyle extends ItemStyleOption {
     stopIcon?: string
     prevIcon?: string
     nextIcon?: string
+
+    // Can be a percent value relative to itemSize
+    playBtnSize: number | string
+    stopBtnSize: number | string
+    nextBtnSize: number | string
+    prevBtnSize: number | string
 }
 
 export interface TimelineCheckpointStyle extends ItemStyleOption,

test/boxplot.html

@@ -215,6 +215,11 @@ under the License.
                                     ]
                                 }
 
+                            },
+                            {
+                                name: 'outlier',
+                                type: 'scatter',
+                                data: data.outliers
                             }
                         ]
                     });