You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by wa...@apache.org on 2021/04/25 07:27:52 UTC
[echarts] 01/01: 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.
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 <yh...@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-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org