fix(state): more robust default emphasis color calculation.

src/echarts.ts

@@ -55,7 +55,8 @@ import {
     DOWNPLAY_ACTION_TYPE,
     SELECT_ACTION_TYPE,
     UNSELECT_ACTION_TYPE,
-    TOGGLE_SELECT_ACTION_TYPE
+    TOGGLE_SELECT_ACTION_TYPE,
+    savePathStates
 } from './util/states';
 import * as modelUtil from './util/model';
 import {throttle} from './util/throttle';
@@ -2128,8 +2129,7 @@ class ECharts extends Eventful {
                     }
 
                     if (el instanceof graphic.Path) {
-                        (el as ECElement).hasFillInNormal = el.hasFill();
-                        (el as ECElement).hasStrokeInNormal = el.hasStroke();
+                        savePathStates(el);
                     }
 
                     // Only updated on changed element. In case element is incremental and don't wan't to rerender.

src/util/states.ts

@@ -5,7 +5,7 @@ import { PatternObject } from 'zrender/src/graphic/Pattern';
 import { GradientObject } from 'zrender/src/graphic/Gradient';
 import Element, { ElementEvent } from 'zrender/src/Element';
 import Model from '../model/Model';
-import { DisplayState, ECElement, ColorString, BlurScope, InnerFocus, Payload } from './types';
+import { DisplayState, ECElement, ColorString, BlurScope, InnerFocus, Payload, ZRColor } from './types';
 import { extend, indexOf, isArrayLike, isObject, keys, isArray, each } from 'zrender/src/core/util';
 import { getECData } from './graphic';
 import * as colorTool from 'zrender/src/tool/color';
@@ -13,7 +13,7 @@ import { EChartsType } from '../echarts';
 import List from '../data/List';
 import SeriesModel from '../model/Series';
 import { CoordinateSystemMaster, CoordinateSystem } from '../coord/CoordinateSystem';
-import { queryDataIndex } from './model';
+import { queryDataIndex, makeInner } from './model';
 import Path, { PathStyleProps } from 'zrender/src/graphic/Path';
 import GlobalModel from '../model/Global';
 
@@ -22,6 +22,13 @@ let _highlightNextDigit = 1;
 
 const _highlightKeyMap: Dictionary<number> = {};
 
+const getSavedStates = makeInner<{
+    normalFill: ZRColor
+    normalStroke: ZRColor
+    selectFill?: ZRColor
+    selectStroke?: ZRColor
+}, Path>();
+
 export const HOVER_STATE_NORMAL: 0 = 0;
 export const HOVER_STATE_BLUR: 1 = 1;
 export const HOVER_STATE_EMPHASIS: 2 = 2;
@@ -181,37 +188,34 @@ function getFromStateStyle(
 function createEmphasisDefaultState(
     el: Displayable,
     stateName: 'emphasis',
+    targetStates?: string[],
     state: Displayable['states'][number]
 ) {
-    const hasEmphasis = indexOf(el.currentStates, stateName) >= 0;
+    const hasSelect = targetStates && indexOf(targetStates, 'select') >= 0;
     let cloned = false;
     if (el instanceof Path) {
-        const hasFillInNormal = (el as ECElement).hasFillInNormal;
-        const hasStrokeInNormal = (el as ECElement).hasStrokeInNormal;
-        if (hasFillInNormal || hasStrokeInNormal) {
-            const fromState: PathStyleProps = !hasEmphasis
-                ? getFromStateStyle(el, ['fill', 'stroke'], stateName)
-                : null;
+        const store = getSavedStates(el);
+        const fromFill = hasSelect ? (store.selectFill || store.normalFill) : store.normalFill;
+        const fromStroke = hasSelect ? (store.selectStroke || store.normalStroke) : store.normalStroke;
+        if (hasFillOrStroke(fromFill) || hasFillOrStroke(fromStroke)) {
             state = state || {};
             // Apply default color lift
             let emphasisStyle = state.style || {};
-            if (!hasFillOrStroke(emphasisStyle.fill) && hasFillInNormal) {
+            if (!hasFillOrStroke(emphasisStyle.fill) && hasFillOrStroke(fromFill)) {
                 cloned = true;
                 // Not modify the original value.
                 state = extend({}, state);
                 emphasisStyle = extend({}, emphasisStyle);
                 // Already being applied 'emphasis'. DON'T lift color multiple times.
-                emphasisStyle.fill = hasEmphasis
-                    ? el.style.fill : liftColor(fromState.fill as ColorString);
+                emphasisStyle.fill = liftColor(fromFill as ColorString);
             }
             // Not highlight stroke if fill has been highlighted.
-            else if (!hasFillOrStroke(emphasisStyle.stroke) && hasStrokeInNormal) {
+            else if (!hasFillOrStroke(emphasisStyle.stroke) && hasFillOrStroke(fromStroke)) {
                 if (!cloned) {
                     state = extend({}, state);
                     emphasisStyle = extend({}, emphasisStyle);
                 }
-                emphasisStyle.stroke = hasEmphasis
-                    ? el.style.stroke : liftColor(fromState.stroke as ColorString);
+                emphasisStyle.stroke = liftColor(fromStroke as ColorString);
             }
             state.style = emphasisStyle;
         }
@@ -275,11 +279,11 @@ function createBlurDefaultState(
     return state;
 }
 
-function elementStateProxy(this: Displayable, stateName: string): DisplayableState {
+function elementStateProxy(this: Displayable, stateName: string, targetStates?: string[]): DisplayableState {
     const state = this.states[stateName];
     if (this.style) {
         if (stateName === 'emphasis') {
-            return createEmphasisDefaultState(this, stateName, state);
+            return createEmphasisDefaultState(this, stateName, targetStates, state);
         }
         else if (stateName === 'blur') {
             return createBlurDefaultState(this, stateName, state);
@@ -669,4 +673,14 @@ export function isHighDownPayload(payload: Payload) {
     const payloadType = payload.type;
     return payloadType === HIGHLIGHT_ACTION_TYPE
         || payloadType === DOWNPLAY_ACTION_TYPE;
+}
+
+export function savePathStates(el: Path) {
+    const store = getSavedStates(el);
+    store.normalFill = el.style.fill;
+    store.normalStroke = el.style.stroke;
+
+    const selectState = el.states.select || {};
+    store.selectFill = (selectState.style && selectState.style.fill) || null;
+    store.selectStroke = (selectState.style && selectState.style.stroke) || null;
 }
\ No newline at end of file

src/util/types.ts

@@ -115,12 +115,6 @@ export interface ECElement extends Element {
 
     z2EmphasisLift?: number;
     z2SelectLift?: number;
-
-    // If has fill and stroke in normal state.
-    // It's used when calculating highlighted color in stateProxy.
-    hasFillInNormal?: boolean;
-    hasStrokeInNormal?: boolean;
-
     /**
      * Force disable animation on any condition
      */

test/dataSelect.html

@@ -29,6 +29,7 @@ under the License.
         <script src="lib/facePrint.js"></script>
         <script src="lib/testHelper.js"></script>
         <script src="data/basicChartsOptions.js"></script>
+        <script src="lib/dat.gui.min.js"></script>
         <!-- <script src="ut/lib/canteen.js"></script> -->
         <link rel="stylesheet" href="lib/reset.css" />
     </head>
@@ -126,10 +127,33 @@ under the License.
                 charts.push(chart);
             });
 
-            function update() {
+            const selectOpts = {
+                selectRed: false
+            }
 
+            function update() {
+                allChartsOptions.forEach(function (chartOption, idx) {
+                    chartOption.series.forEach(function (series) {
+                        series.select = {
+                            itemStyle: {
+                                borderWidth: 3,
+                                color: selectOpts.selectRed ? '#f00' : null
+                            },
+                            lineStyle: {
+                                color: selectOpts.selectRed ? '#f00' : null
+                            },
+                            areaStyle: {
+                                color: selectOpts.selectRed ? '#f00' : null
+                            }
+                        }
+                    });
+                    charts[idx].setOption(chartOption);
+                });
             }
 
+            var gui = new dat.GUI();
+            gui.add(selectOpts, 'selectRed').onChange(update);
+
             window.addEventListener('resize', function () {
                 charts.forEach(function (chart) {
                     chart.resize();

test/hoverFocus.html

@@ -29,6 +29,7 @@ under the License.
         <script src="lib/facePrint.js"></script>
         <script src="lib/testHelper.js"></script>
         <script src="data/basicChartsOptions.js"></script>
+        <script src="lib/dat.gui.min.js"></script>
         <!-- <script src="ut/lib/canteen.js"></script> -->
         <link rel="stylesheet" href="lib/reset.css" />
     </head>
@@ -53,6 +54,9 @@ under the License.
                 box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
                 background: #fff;
             }
+            .dg.ac {
+                text-align: left;
+            }
         </style>
 
 
@@ -79,9 +83,6 @@ under the License.
                 chartOption.series.forEach(function (series) {
                     series.emphasis = series.emphasis || {};
                     series.emphasis.focus = seriesFocusType[series.type] || 'series';
-                    series.emphasis.lineStyle = {
-                        // opacity: 0.02
-                    }
 
                     if (series.renderItem) {
                         const oldRenderItem = series.renderItem;
@@ -120,10 +121,41 @@ under the License.
                 charts.push(chart);
             });
 
-            function update() {
+            const blurOpts = {
+                opacity: 0.1,
+                grayColor: false
+            }
 
+            function update() {
+                allChartsOptions.forEach(function (chartOption, idx) {
+                    chartOption.series.forEach(function (series) {
+                        series.blur = {
+                            itemStyle: {
+                                color: blurOpts.grayColor ? '#aaa' : null,
+                                opacity: blurOpts.opacity
+                            },
+                            lineStyle: {
+                                color: blurOpts.grayColor ? '#aaa' : null,
+                                opacity: blurOpts.opacity
+                            },
+                            areaStyle: {
+                                color: blurOpts.grayColor ? '#aaa' : null,
+                                opacity: blurOpts.opacity
+                            },
+                            label: {
+                                color: blurOpts.grayColor ? '#aaa' : null,
+                                opacity: blurOpts.opacity
+                            }
+                        }
+                    });
+                    charts[idx].setOption(chartOption);
+                });
             }
 
+            var gui = new dat.GUI();
+            gui.add(blurOpts, 'opacity', 0, 1).onFinishChange(update);
+            gui.add(blurOpts, 'grayColor').onChange(update);
+
             window.addEventListener('resize', function () {
                 charts.forEach(function (chart) {
                     chart.resize();

test/pie-alignTo.html

@@ -207,8 +207,7 @@ under the License.
                 option: option2
             });
 
-            var gui = new dat.GUI({
-            });
+            var gui = new dat.GUI();
             var config = {
                 length2: 15,
                 edgeDistance: 20,