[FEATURE] [5.0] Improve style of dataZoom, visualMap, timeline components. Bug fixes from next branch

src/ExtensionAPI.ts

@@ -55,8 +55,6 @@ abstract class ExtensionAPI {
 
     // Implemented in echarts.js
     abstract getCoordinateSystems(): CoordinateSystemMaster[];
-
-    // Implemented in echarts.js
     abstract getComponentByElement(el: Element): ComponentModel;
 }
 

src/chart/bar/BarView.ts

@@ -626,7 +626,6 @@ const elementCreator: {
             shape: extend({}, layout),
             z2: 1
         });
-        // rect.autoBatch = true;
 
         rect.name = 'item';
 

src/chart/bar/PictorialBarView.ts

@@ -38,6 +38,7 @@ import type Element from 'zrender/src/Element';
 import { getDefaultLabel } from '../helper/labelHelper';
 import { PathProps, PathStyleProps } from 'zrender/src/graphic/Path';
 import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
+import ZRImage from 'zrender/src/graphic/Image';
 
 
 const BAR_BORDER_WIDTH_QUERY = ['itemStyle', 'borderWidth'] as const;
@@ -888,7 +889,18 @@ function updateCommon(
     const blurScope = emphasisModel.get('blurScope');
 
     eachPath(bar, function (path) {
-        path.useStyle(symbolMeta.style);
+        if (path instanceof ZRImage) {
+            const pathStyle = path.style;
+            path.useStyle(zrUtil.extend({
+                // TODO other properties like dx, dy ?
+                image: pathStyle.image,
+                x: pathStyle.x, y: pathStyle.y,
+                width: pathStyle.width, height: pathStyle.height
+            }, symbolMeta.style));
+        }
+        else {
+            path.useStyle(symbolMeta.style);
+        }
 
         const emphasisState = path.ensureState('emphasis');
         emphasisState.style = emphasisStyle;

src/chart/custom.ts

@@ -500,7 +500,7 @@ class CustomSeriesView extends ChartView {
         function setIncrementalAndHoverLayer(el: Displayable) {
             if (!el.isGroup) {
                 el.incremental = true;
-                el.useHoverLayer = true;
+                el.ensureState('emphasis').hoverLayer = true;
             }
         }
         for (let idx = params.start; idx < params.end; idx++) {

src/chart/gauge/GaugeView.ts

@@ -264,7 +264,9 @@ class GaugeView extends ChartView {
                         y: unitY * (r - splitLineLen - distance) + cy,
                         verticalAlign: unitY < -0.4 ? 'top' : (unitY > 0.4 ? 'bottom' : 'middle'),
                         align: unitX < -0.4 ? 'left' : (unitX > 0.4 ? 'right' : 'center')
-                    }, {inheritColor: autoColor}),
+                    }, {
+                        inheritColor: autoColor
+                    }),
                     silent: true
                 }));
             }

src/chart/heatmap/HeatmapView.ts

@@ -281,7 +281,7 @@ class HeatmapView extends ChartView {
             // PENDING
             if (incremental) {
                 // Rect must use hover layer if it's incremental.
-                rect.useHoverLayer = true;
+                rect.states.emphasis.hoverLayer = true;
             }
 
             group.add(rect);

src/chart/helper/LineDraw.ts

@@ -154,7 +154,8 @@ class LineDraw {
     incrementalUpdate(taskParams: StageHandlerProgressParams, lineData: ListForLineDraw) {
         function updateIncrementalAndHover(el: Displayable) {
             if (!el.isGroup && !isEffectObject(el)) {
-                el.incremental = el.useHoverLayer = true;
+                el.incremental = true;
+                el.ensureState('emphasis').hoverLayer = true;
             }
         }
 

src/chart/helper/Polyline.ts

@@ -68,6 +68,7 @@ class Polyline extends graphic.Group {
             hoverLineStyle = itemModel.getModel(['emphasis', 'lineStyle']).getLineStyle();
         }
         line.useStyle(lineData.getItemVisual(idx, 'style'));
+        line.style.fill = null;
         line.style.strokeNoScale = true;
 
         const lineEmphasisState = line.ensureState('emphasis');

src/chart/helper/Symbol.ts

@@ -29,6 +29,7 @@ import { PathProps } from 'zrender/src/graphic/Path';
 import { SymbolDrawSeriesScope, SymbolDrawItemModelOption } from './SymbolDraw';
 import { extend } from 'zrender/src/core/util';
 import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
+import ZRImage from 'zrender/src/graphic/Image';
 
 type ECSymbol = ReturnType<typeof createSymbol>;
 
@@ -260,18 +261,30 @@ class Symbol extends graphic.Group {
 
         const symbolStyle = data.getItemVisual(idx, 'style');
         const visualColor = symbolStyle.fill;
-        if (symbolPath.__isEmptyBrush) {
-            // fill and stroke will be swapped if it's empty.
-            // So we cloned a new style to avoid it affecting the original style in visual storage.
-            // TODO Better implementation. No empty logic!
-            symbolPath.useStyle(extend({}, symbolStyle));
+
+        if (symbolPath instanceof ZRImage) {
+            const pathStyle = symbolPath.style;
+            symbolPath.useStyle(extend({
+                // TODO other properties like x, y ?
+                image: pathStyle.image,
+                x: pathStyle.x, y: pathStyle.y,
+                width: pathStyle.width, height: pathStyle.height
+            }, symbolStyle));
         }
         else {
-            symbolPath.useStyle(symbolStyle);
-        }
-        symbolPath.setColor(visualColor, opts && opts.symbolInnerColor);
-        symbolPath.style.strokeNoScale = true;
+            if (symbolPath.__isEmptyBrush) {
+                // fill and stroke will be swapped if it's empty.
+                // So we cloned a new style to avoid it affecting the original style in visual storage.
+                // TODO Better implementation. No empty logic!
+                symbolPath.useStyle(extend({}, symbolStyle));
+            }
+            else {
+                symbolPath.useStyle(symbolStyle);
+            }
+            symbolPath.setColor(visualColor, opts && opts.symbolInnerColor);
+            symbolPath.style.strokeNoScale = true;
 
+        }
         const liftZ = data.getItemVisual(idx, 'liftZ');
         const z2Origin = this._z2;
         if (liftZ != null) {

src/chart/helper/SymbolDraw.ts

@@ -256,7 +256,8 @@ class SymbolDraw {
 
         function updateIncrementalAndHover(el: Displayable) {
             if (!el.isGroup) {
-                el.incremental = el.useHoverLayer = true;
+                el.incremental = true;
+                el.ensureState('emphasis').hoverLayer = true;
             }
         }
         for (let idx = taskParams.start; idx < taskParams.end; idx++) {

src/chart/pie/labelLayout.ts

@@ -388,6 +388,11 @@ export default function (
             label.setStyle({
                 align: textAlign
             });
+            const selectState = label.states.select;
+            if (selectState) {
+                selectState.x += label.x;
+                selectState.y += label.y;
+            }
         }
         sector.setTextConfig({
             inside: isLabelInside

src/chart/radar/RadarView.ts

@@ -29,6 +29,7 @@ import { ColorString } from '../../util/types';
 import GlobalModel from '../../model/Global';
 import { VectorArray } from 'zrender/src/core/vector';
 import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
+import ZRImage from 'zrender/src/graphic/Image';
 
 function normalizeSymbolSize(symbolSize: number | number[]) {
     if (!zrUtil.isArray(symbolSize)) {
@@ -223,8 +224,19 @@ class RadarView extends ChartView {
             const emphasisModel = itemModel.getModel('emphasis');
             const itemHoverStyle = emphasisModel.getModel('itemStyle').getItemStyle();
             symbolGroup.eachChild(function (symbolPath: RadarSymbol) {
-                symbolPath.useStyle(itemStyle);
-                symbolPath.setColor(color);
+                if (symbolPath instanceof ZRImage) {
+                    const pathStyle = symbolPath.style;
+                    symbolPath.useStyle(zrUtil.extend({
+                        // TODO other properties like x, y ?
+                        image: pathStyle.image,
+                        x: pathStyle.x, y: pathStyle.y,
+                        width: pathStyle.width, height: pathStyle.height
+                    }, itemStyle));
+                }
+                else {
+                    symbolPath.useStyle(itemStyle);
+                    symbolPath.setColor(color);
+                }
 
                 const pathEmphasisState = symbolPath.ensureState('emphasis');
                 pathEmphasisState.style = zrUtil.clone(itemHoverStyle);

src/chart/treemap/TreemapView.ts

@@ -985,6 +985,8 @@ function renderNode(
         const textStyle = textEl.style;
         textStyle.truncateMinChar = 2;
         textStyle.width = width;
+        textStyle.height = height;
+        textStyle.lineOverflow = 'truncate';
 
         addDrillDownIcon(textStyle, upperLabelRect, thisLayout);
         const textEmphasisState = textEl.getState('emphasis');

src/component/axisPointer/axisTrigger.ts

@@ -22,7 +22,7 @@ import * as modelHelper from './modelHelper';
 import findPointFromSeries from './findPointFromSeries';
 import GlobalModel from '../../model/Global';
 import ExtensionAPI from '../../ExtensionAPI';
-import { Dictionary, Payload, CommonAxisPointerOption } from '../../util/types';
+import { Dictionary, Payload, CommonAxisPointerOption, HighlightPayload, DownplayPayload } from '../../util/types';
 import AxisPointerModel, { AxisPointerOption } from './AxisPointerModel';
 import { each, curry, bind, extend, Curry1 } from 'zrender/src/core/util';
 import { ZRenderType } from 'zrender/src/zrender';
@@ -479,11 +479,19 @@ function dispatchHighDownActually(
     });
 
     toDownplay.length && api.dispatchAction({
-        type: 'downplay', escapeConnect: true, batch: toDownplay
-    });
+        type: 'downplay',
+        escapeConnect: true,
+        // Not blur others when highlight in axisPointer.
+        notBlur: true,
+        batch: toDownplay
+    } as DownplayPayload);
     toHighlight.length && api.dispatchAction({
-        type: 'highlight', escapeConnect: true, batch: toHighlight
-    });
+        type: 'highlight',
+        escapeConnect: true,
+        // Not blur others when highlight in axisPointer.
+        notBlur: true,
+        batch: toHighlight
+    } as HighlightPayload);
 }
 
 function findInputAxisInfo(

src/component/axisPointer/viewHelper.ts

@@ -126,7 +126,6 @@ export function buildLabelElOption(
             text: text,
             textFont: font,
             fill: labelModel.getTextColor(),
-            align: 'center',
             padding: paddings,
             backgroundColor: bgColor as ColorString,
             borderColor: labelModel.get('borderColor') || 'transparent',

src/component/dataZoom/SliderZoomModel.ts

@@ -53,11 +53,21 @@ export interface SliderDataZoomOption extends DataZoomOption, BoxLayoutOptionMix
      */
     borderColor?: ZRColor
 
+    /**
+     * Border radius of the box.
+     */
+    borderRadius?: number | number[]
+
     dataBackground?: {
         lineStyle?: LineStyleOption
         areaStyle?: AreaStyleOption
     }
 
+    selectedDataBackground?: {
+        lineStyle?: LineStyleOption
+        areaStyle?: AreaStyleOption
+    }
+
     /**
      * Color of selected area.
      */
@@ -71,7 +81,8 @@ export interface SliderDataZoomOption extends DataZoomOption, BoxLayoutOptionMix
     handleIcon?: string
 
     /**
-     * Percent of the slider height
+     * number: height of icon. width will be calculated according to the aspect of icon.
+     * string: percent of the slider height. width will be calculated according to the aspect of icon.
      */
     handleSize?: string | number
 
@@ -88,6 +99,10 @@ export interface SliderDataZoomOption extends DataZoomOption, BoxLayoutOptionMix
     zoomLock?: boolean
 
     textStyle?: LabelOption
+
+    emphasis?: {
+        handleStyle?: ItemStyleOption
+    }
 }
 
 
@@ -108,38 +123,59 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
         left: null,   // Default align to grid rect.
         bottom: null, // Default align to grid rect.
 
+        borderColor: '#d2dbee',
+        borderRadius: 3,
+
         backgroundColor: 'rgba(47,69,84,0)',    // Background of slider zoom component.
+
         // dataBackgroundColor: '#ddd',
         dataBackground: {
             lineStyle: {
-                color: '#2f4554',
-                width: 0.5,
-                opacity: 0.3
+                color: '#d2dbee',
+                width: 0.5
             },
             areaStyle: {
-                color: 'rgba(47,69,84,0.3)',
-                opacity: 0.3
+                color: '#d2dbee',
+                opacity: 0.2
             }
         },
-        borderColor: '#ddd',
 
-        fillerColor: 'rgba(167,183,204,0.4)',     // Color of selected area.
-        // handleColor: 'rgba(89,170,216,0.95)',     // Color of handle.
-        // eslint-disable-next-line
-        handleIcon: 'M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z',
+        selectedDataBackground: {
+            lineStyle: {
+                color: '#8fb0f7',
+                width: 0.5
+            },
+            areaStyle: {
+                color: '#8fb0f7',
+                opacity: 0.2
+            }
+        },
+
+
+        fillerColor: 'rgba(135,175,274,0.2)',     // Color of selected area.
+        handleIcon: 'path://M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z',
         // Percent of the slider height
         handleSize: '100%',
 
         handleStyle: {
-            color: '#a7b7cc'
+            color: '#fff',
+            borderColor: '#ACB8D1'
         },
 
         showDetail: true,
         showDataShadow: 'auto',                 // Default auto decision.
         realtime: true,
         zoomLock: false,                        // Whether disable zoom.
+
         textStyle: {
             color: '#333'
+        },
+
+        emphasis: {
+            handleStyle: {
+                borderColor: '#8FB0F7',
+                borderWidth: 2
+            }
         }
     });
 }