This is an automated email from the ASF dual-hosted git repository. wangzx pushed a commit to branch fix-tooltip in repository https://gitbox.apache.org/repos/asf/echarts.git
commit eb6af35fbea5dab497da3a0ac3d380c47b0f6b16 Author: plainheart <y...@all-my-life.cn> AuthorDate: Sun Apr 25 15:24:29 2021 +0800 fix(tooltip): tooltip(especially in connected chart) may be lagged and shake from side to side in Chrome(with the devtools open) and Firefox. see #14695. --- src/component/tooltip/TooltipHTMLContent.ts | 2 +- src/component/tooltip/TooltipView.ts | 16 +++- test/tooltip-lag-glitch.html | 121 ++++++++++++++++++++++++++++ 3 files changed, 137 insertions(+), 2 deletions(-) diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts index ecd432f..7d70c1b 100644 --- a/src/component/tooltip/TooltipHTMLContent.ts +++ b/src/component/tooltip/TooltipHTMLContent.ts @@ -100,7 +100,7 @@ function assembleTransition(duration: number, onlyFade?: boolean): string { if (!onlyFade) { transitionOption = ` ${duration}s ${transitionCurve}`; transitionText += env.transformSupported - ? `,${TRANSFORM_VENDOR}${transitionOption}` + ? `,${CSS_TRANSFORM_VENDOR}${transitionOption}` : `,left${transitionOption},top${transitionOption}`; } diff --git a/src/component/tooltip/TooltipView.ts b/src/component/tooltip/TooltipView.ts index 93949fc..78c0ef5 100644 --- a/src/component/tooltip/TooltipView.ts +++ b/src/component/tooltip/TooltipView.ts @@ -57,6 +57,7 @@ import { DataByCoordSys, DataByAxis } from '../axisPointer/axisTrigger'; import { normalizeTooltipFormatResult } from '../../model/mixin/dataFormat'; import { createTooltipMarkup, buildTooltipMarkup, TooltipMarkupStyleCreator } from './tooltipMarkup'; import { findEventDispatcher } from '../../util/event'; +import { throttle } from '../../util/throttle'; const bind = zrUtil.bind; const each = zrUtil.each; @@ -166,6 +167,8 @@ class TooltipView extends ComponentView { private _lastDataByCoordSys: DataByCoordSys[]; + private _updatePosition: ReturnType<typeof throttle> | TooltipView['_doUpdatePosition']; + init(ecModel: GlobalModel, api: ExtensionAPI) { if (env.node) { return; @@ -213,6 +216,17 @@ class TooltipView extends ComponentView { this._initGlobalListener(); this._keepShow(); + + // PENDING + // `mousemove` event will be triggered very frequently when the mouse moves fast, + // which causes that the updatePosition was also called very frequently. + // In Chrome with devtools open and Firefox, tooltip looks lagged and shaked around. See #14695. + // To avoid the frequent triggering, + // consider throttling it in 50ms. (the tested result may need to validate) + this._updatePosition = + this._renderMode === 'html' + ? throttle(bind(this._doUpdatePosition, this), 50) + : this._doUpdatePosition; } private _initGlobalListener() { @@ -840,7 +854,7 @@ class TooltipView extends ComponentView { } } - private _updatePosition( + private _doUpdatePosition( tooltipModel: Model<TooltipOption>, positionExpr: TooltipOption['position'], x: number, // Mouse x diff --git a/test/tooltip-lag-glitch.html b/test/tooltip-lag-glitch.html new file mode 100644 index 0000000..c721f41 --- /dev/null +++ b/test/tooltip-lag-glitch.html @@ -0,0 +1,121 @@ +<!DOCTYPE html> +<!-- +Licensed to the Apache Software Foundation (ASF) under one +or more contributor license agreements. See the NOTICE file +distributed with this work for additional information +regarding copyright ownership. The ASF licenses this file +to you under the Apache License, Version 2.0 (the +"License"); you may not use this file except in compliance +with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, +software distributed under the License is distributed on an +"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +KIND, either express or implied. See the License for the +specific language governing permissions and limitations +under the License. +--> + + +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <script src="lib/esl.js"></script> + <script src="lib/config.js"></script> + <script src="lib/facePrint.js"></script> + <script src="lib/testHelper.js"></script> + <link rel="stylesheet" href="lib/reset.css" /> + </head> + <body> + <style> + .test-title { + background: #146402; + color: #fff; + } + </style> + + + <div id="main0"></div> + <div id="main1"></div> + + + <script> + + require([ + 'echarts' + ], function (echarts) { + + var xdata = []; + var i = 0; + while (i++ < 100) { + xdata.push(i); + } + + function randomData() { + var data = []; + var i = 0; + while (i++ < 100) { + // data.push(i + 100 + Math.random() * 50); + data.push(i + 100); + } + return data; + } + + var option = { + tooltip: { + trigger: "axis" + }, + xAxis: { + type: "category", + boundaryGap: false, + data: xdata + }, + yAxis: { + type: "value" + }, + series: [ + { + showSymbol: false, + name: "A", + type: "line", + data: randomData(), + smooth: true, + lineStyle: { + width: 2 + }, + emphasis: { + lineStyle: { + width: 2 + } + } + } + ] + }; + + var chart1 = testHelper.create(echarts, 'main0', { + title: [ + 'Tooltip shouldn\'t shakes or lags', + '1) Chrome with the devtools open', + '2) Firefox' + ], + option: option + }); + + var chart2 = testHelper.create(echarts, 'main1', { + title: [ + 'Tooltip shouldn\'t shakes or lags', + '1) Chrome with the devtools open', + '2) Firefox' + ], + option: option + }); + + echarts.connect([chart1, chart2]); + }); + + </script> + </body> +</html> --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org