fix: (1) Previously hoverLayerThreshold modification does not work. (2) Restrict the triggering of hoverLayer to only canvas renderer.

Author: 100pah

src/chart/custom/CustomView.ts

@@ -94,7 +94,6 @@ import CustomSeriesModel, {
     CustomRootElementOption,
     CustomSeriesOption,
     CustomCompoundPathOption,
-    CustomSeriesRenderItemCoordinateSystemAPI
 } from './CustomSeries';
 import { PatternObject } from 'zrender/src/graphic/Pattern';
 import {
@@ -110,6 +109,7 @@ import type SeriesModel from '../../model/Series';
 import { getCustomSeries } from './customSeriesRegister';
 import tokens from '../../visual/tokens';
 
+
 const EMPHASIS = 'emphasis' as const;
 const NORMAL = 'normal' as const;
 const BLUR = 'blur' as const;
@@ -290,7 +290,7 @@ export default class CustomChartView extends ChartView {
         function setIncrementalAndHoverLayer(el: Displayable) {
             if (!el.isGroup) {
                 el.incremental = true;
-                el.ensureState('emphasis').hoverLayer = true;
+                el.ensureState('emphasis').hoverLayer = graphicUtil.HOVER_LAYER_FOR_INCREMENTAL;
             }
         }
         for (let idx = params.start; idx < params.end; idx++) {

src/chart/heatmap/HeatmapView.ts

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

src/chart/helper/LineDraw.ts

@@ -172,7 +172,7 @@ class LineDraw {
         function updateIncrementalAndHover(el: Displayable) {
             if (!el.isGroup && !isEffectObject(el)) {
                 el.incremental = true;
-                el.ensureState('emphasis').hoverLayer = true;
+                el.ensureState('emphasis').hoverLayer = graphic.HOVER_LAYER_FOR_INCREMENTAL;
             }
         }
 

src/chart/helper/SymbolDraw.ts

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

src/component/legend/LegendView.ts

@@ -724,25 +724,13 @@ function dispatchSelectAction(
     dispatchHighlightAction(seriesName, dataName, api, excludeSeriesId);
 }
 
-function isUseHoverLayer(api: ExtensionAPI) {
-    const list = api.getZr().storage.getDisplayList();
-    let emphasisState: DisplayableState;
-    let i = 0;
-    const len = list.length;
-    while (i < len && !(emphasisState = list[i].states.emphasis)) {
-        i++;
-    }
-    return emphasisState && emphasisState.hoverLayer;
-}
-
 function dispatchHighlightAction(
     seriesName: string,
     dataName: string,
     api: ExtensionAPI,
     excludeSeriesId: string[]
 ) {
-    // If element hover will move to a hoverLayer.
-    if (!isUseHoverLayer(api)) {
+    if (!api.usingTHL()) {
         api.dispatchAction({
             type: 'highlight',
             seriesName: seriesName,
@@ -758,8 +746,7 @@ function dispatchDownplayAction(
     api: ExtensionAPI,
     excludeSeriesId: string[]
 ) {
-    // If element hover will move to a hoverLayer.
-    if (!isUseHoverLayer(api)) {
+    if (!api.usingTHL()) {
         api.dispatchAction({
             type: 'downplay',
             seriesName: seriesName,

src/core/ExtensionAPI.ts

@@ -73,6 +73,14 @@ abstract class ExtensionAPI {
     abstract getViewOfSeriesModel(seriesModel: SeriesModel): ChartView;
     abstract getModel(): GlobalModel;
     abstract getECMainCycleVersion(): number;
+    /**
+     * PENDING: a temporary method - may be refactored.
+     * Whether a "threshold hoverLayer" is used.
+     * `true` means using hover layer due to over `hoverLayerThreshold`.
+     * Otherwise, if `false`, hover layer may be still used due to progressive (incremental),
+     * but this method does not need to cover this case.
+     */
+    abstract usingTHL(): boolean;
 }
 
 export default ExtensionAPI;

src/core/Scheduler.ts

@@ -34,6 +34,7 @@ import { EChartsType } from './echarts';
 import SeriesModel from '../model/Series';
 import ChartView from '../view/Chart';
 import SeriesData from '../data/SeriesData';
+import { ZRenderType } from 'zrender/src/zrender';
 
 export type GeneralTask = Task<TaskContext>;
 export type SeriesTask = Task<SeriesTaskContext>;
@@ -233,12 +234,12 @@ class Scheduler {
         };
     }
 
-    restorePipelines(ecModel: GlobalModel): void {
+    restorePipelines(zr: ZRenderType, ecModel: GlobalModel): void {
         const scheduler = this;
         const pipelineMap = scheduler._pipelineMap = createHashMap();
 
         ecModel.eachSeries(function (seriesModel) {
-            const progressive = seriesModel.getProgressive();
+            const progressive = zr.painter.type === 'canvas' && seriesModel.getProgressive();
             const pipelineId = seriesModel.uid;
 
             pipelineMap.set(pipelineId, {

src/core/echarts.ts

@@ -310,6 +310,11 @@ interface PostIniter {
     (chart: EChartsType): void
 }
 
+const ecInner = modelUtil.makeInner<{
+    // Using hoverLayer due to over hoverLayerThreshold.
+    usingTHL: boolean;
+}, ECharts>();
+
 type EventMethodName = 'on' | 'off';
 function createRegisterEventWithLowercaseECharts(method: EventMethodName) {
     return function (this: ECharts, ...args: any): ECharts {
@@ -1638,7 +1643,7 @@ class ECharts extends Eventful<ECEventDefinition> {
 
             const scheduler = ecIns._scheduler;
 
-            scheduler.restorePipelines(ecIns._model);
+            scheduler.restorePipelines(ecIns._zr, ecIns._model);
             scheduler.prepareStageTasks();
 
             prepareView(ecIns, true);
@@ -2538,6 +2543,11 @@ class ECharts extends Eventful<ECEventDefinition> {
 
         function updateHoverLayerStatus(ecIns: ECharts, ecModel: GlobalModel): void {
             const zr = ecIns._zr;
+
+            if (zr.painter.type !== 'canvas') {
+                return;
+            }
+
             const storage = zr.storage;
             let elCount = 0;
 
@@ -2547,20 +2557,27 @@ class ECharts extends Eventful<ECEventDefinition> {
                 }
             });
 
-            if (elCount > ecModel.get('hoverLayerThreshold') && !env.node && !env.worker) {
+            const inner = ecInner(ecIns);
+            const shouldUseHoverLayer = elCount > ecModel.get('hoverLayerThreshold') && !env.node && !env.worker;
+
+            if (inner.usingTHL || shouldUseHoverLayer) {
                 ecModel.eachSeries(function (seriesModel) {
                     if (seriesModel.preventUsingHoverLayer) {
                         return;
                     }
                     const chartView = ecIns._chartsMap[seriesModel.__viewId];
                     if (chartView.__alive) {
                         chartView.eachRendered((el: ECElement) => {
-                            if (el.states.emphasis) {
-                                el.states.emphasis.hoverLayer = true;
+                            const emphasis = el.states.emphasis;
+                            if (emphasis && emphasis.hoverLayer !== graphic.HOVER_LAYER_FOR_INCREMENTAL) {
+                                emphasis.hoverLayer = shouldUseHoverLayer
+                                    ? graphic.HOVER_LAYER_FROM_THRESHOLD
+                                    : graphic.HOVER_LAYER_NO;
                             }
                         });
                     }
                 });
+                inner.usingTHL = shouldUseHoverLayer;
             }
         };
 
@@ -2726,6 +2743,9 @@ class ECharts extends Eventful<ECEventDefinition> {
                 getECMainCycleVersion(): number {
                     return ecIns[EC_MAIN_CYCLE_VERSION_KEY];
                 }
+                usingTHL(): boolean {
+                    return ecInner(ecIns).usingTHL;
+                }
             })(ecIns);
         };
 

src/util/graphic.ts

@@ -97,6 +97,14 @@ type ExtendShapeReturn = ReturnType<typeof Path.extend>;
 export const XY = ['x', 'y'] as const;
 export const WH = ['width', 'height'] as const;
 
+/**
+ * NOTICE: Only canvas renderer can set these hoverLayer flags.
+ * @see ElementCommonState['hoverLayer']
+ */
+export const HOVER_LAYER_NO = 0;
+export const HOVER_LAYER_FROM_THRESHOLD = 1;
+export const HOVER_LAYER_FOR_INCREMENTAL = 2;
+
 /**
  * Extend shape with parameters
  */

src/view/Chart.ts

@@ -249,6 +249,9 @@ function toggleHighlight(data: SeriesData, payload: Payload, state: DisplayState
         });
     }
     else {
+        // In progressive mode, `data._graphicEls` has typically no items,
+        // thereby skipping this hover style changing.
+        // PENDING: more robust approaches?
         data.eachItemGraphicEl(function (el) {
             elSetState(el, state, highlightDigit);
         });