fix: emphasis and mouseover.

src/chart/helper/Symbol.js

@@ -335,17 +335,28 @@ symbolProto._updateCommon = function (data, idx, symbolSize, seriesScope) {
     symbolPath.__symbolOriginalScale = getScale(symbolSize);
 
     if (hoverAnimation && seriesModel.isAnimationEnabled()) {
-        symbolPath.on('mouseover', onEmphasis)
-            .on('mouseout', onNormal)
+        // Note: consider `off`, should use static function here.
+        symbolPath.on('mouseover', onMouseOver)
+            .on('mouseout', onMouseOut)
             .on('emphasis', onEmphasis)
             .on('normal', onNormal);
     }
 };
 
+function onMouseOver() {
+    // see comment in `graphic.isInEmphasis`
+    !graphic.isInEmphasis(this) && onEmphasis.call(this);
+}
+
+function onMouseOut() {
+    // see comment in `graphic.isInEmphasis`
+    !graphic.isInEmphasis(this) && onNormal.call(this);
+}
+
 function onEmphasis() {
     // Do not support this hover animation util some scenario required.
     // Animation can only be supported in hover layer when using `el.incremetal`.
-    if (this.incremental || this.useHoverLayer || graphic.isInEmphasis(this)) {
+    if (this.incremental || this.useHoverLayer) {
         return;
     }
     var scale = this.__symbolOriginalScale;
@@ -359,7 +370,7 @@ function onEmphasis() {
 }
 
 function onNormal() {
-    if (this.incremental || this.useHoverLayer || graphic.isInEmphasis(this)) {
+    if (this.incremental || this.useHoverLayer) {
         return;
     }
     this.animateTo({

src/util/graphic.js

@@ -417,11 +417,18 @@ export function setElementHoverStyle(el, hoverStl) {
 }
 
 /**
+ * Emphasis (called by API) has higher priority than `mouseover`.
+ * When element has been called to be entered emphasis, mouse over
+ * should not trigger the highlight effect (for example, animation
+ * scale) again, and `mouseout` should not downplay the highlight
+ * effect. So the listener of `mouseover` and `mouseout` should
+ * check `isInEmphasis`.
+ *
  * @param {module:zrender/Element} el
  * @return {boolean}
  */
 export function isInEmphasis(el) {
-    return el && el.__isEmphasis;
+    return el && el.__isEmphasisEntered;
 }
 
 function onElementMouseOver(e) {
@@ -430,7 +437,7 @@ function onElementMouseOver(e) {
     }
 
     // Only if element is not in emphasis status
-    !this.__isEmphasis && traverseCall(this, doSingleEnterHover);
+    !this.__isEmphasisEntered && traverseCall(this, doSingleEnterHover);
 }
 
 function onElementMouseOut(e) {
@@ -439,16 +446,16 @@ function onElementMouseOut(e) {
     }
 
     // Only if element is not in emphasis status
-    !this.__isEmphasis && traverseCall(this, doSingleLeaveHover);
+    !this.__isEmphasisEntered && traverseCall(this, doSingleLeaveHover);
 }
 
 function enterEmphasis() {
-    this.__isEmphasis = true;
+    this.__isEmphasisEntered = true;
     traverseCall(this, doSingleEnterHover);
 }
 
 function leaveEmphasis() {
-    this.__isEmphasis = false;
+    this.__isEmphasisEntered = false;
     traverseCall(this, doSingleLeaveHover);
 }
 

test/hoverStyle.html

@@ -58,6 +58,7 @@ under the License.
         <div id="main2"></div>
         <div id="main3"></div>
         <div id="main4"></div>
+        <div id="main5"></div>
 
 
         <script>
@@ -438,5 +439,58 @@ under the License.
 
 
 
+        <script>
+            require(['echarts'], function (echarts) {
+                var option = {
+                    hoverLayerThreshold: hoverLayerThreshold,
+                    tooltip: {},
+                    xAxis: {
+                    },
+                    yAxis: {
+                        splitNumber: 2,
+                        scale: true
+                    },
+                    series: [{
+                        type: 'line',
+                        symbolSize: 20,
+                        data: [[21, 22], [44, 11]]
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'main5', {
+                    title: [
+                        'Test default symbol hover style (scale) (Only test **Not use hoverLayer**)',
+                        'trigger hover by API: **should scaled**.',
+                        'Test mouse hover and leave, should NOT return to normal.',
+                        'Only click downplay to return normal'
+                    ],
+                    option: option,
+                    height: 200,
+                    buttons: [{
+                        text: 'highlight dataIndex 0',
+                        onclick: function () {
+                            chart.dispatchAction({
+                                type: 'highlight',
+                                seriesIndex: 0,
+                                dataIndex: 0
+                            });
+                        }
+                    }, {
+                        text: 'downplay dataIndex 0',
+                        onclick: function () {
+                            chart.dispatchAction({
+                                type: 'downplay',
+                                seriesIndex: 0,
+                                dataIndex: 0
+                            });
+                        }
+                    }]
+                });
+            });
+        </script>
+
+
+
+
     </body>
 </html>
\ No newline at end of file

test/lib/reset.css

@@ -45,6 +45,13 @@ body > .main {
     zoom: 1;
     text-align: left;
 }
+.test-title strong {
+    color: yellow;
+    font-weight: 700;
+    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
+    padding-left: 2px;
+    padding-right: 2px;
+}
 .test-buttons button {
     margin: 10px 5px;
 }

test/lib/testHelper.js

@@ -41,6 +41,7 @@
     /**
      * @param {Object} opt
      * @param {string|Array.<string>} [opt.title] If array, each item is on a single line.
+     *        Can use '**abc**', means <strong>abc</strong>.
      * @param {Option} opt.option
      * @param {Object} [opt.info] info object to display.
      * @param {string} [opt.infoKey='option']
@@ -99,7 +100,9 @@
                 optTitle = optTitle.join('\n');
             }
             title.innerHTML = '<div class="test-title-inner">'
-                + testHelper.encodeHTML(optTitle).replace(/\n/g, '<br>')
+                + testHelper.encodeHTML(optTitle)
+                    .replace(/\*\*([^*]+?)\*\*/g, '<strong>$1</strong>')
+                    .replace(/\n/g, '<br>')
                 + '</div>';
         }
 

test/treemap-disk.html

@@ -116,6 +116,7 @@ under the License.
 
             function colorMappingChange(value) {
                 var levelOption = getLevelOption(value);
+
                 chart.setOption({
                     series: [{
                         levels: levelOption
@@ -136,10 +137,8 @@ under the License.
                     {
                         color: ['#d14a61'], // default color
                         itemStyle: {
-                            normal: {
-                                borderWidth: 0,
-                                gapWidth: 5
-                            }
+                            borderWidth: 0,
+                            gapWidth: 5
                         }
                     },
                     {
@@ -150,18 +149,14 @@ under the License.
                         ],
                         colorMappingBy: colorMapping,
                         itemStyle: {
-                            normal: {
-                                gapWidth: 1
-                            }
+                            gapWidth: 1
                         }
                     },
                     {
                         colorSaturation: [0.35, 0.5],
                         itemStyle: {
-                            normal: {
-                                gapWidth: 1,
-                                borderColorSaturation: 0.6
-                            }
+                            gapWidth: 1,
+                            borderColorSaturation: 0.6
                         }
                     }
                 ];