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:51 UTC
[echarts] branch fix-tooltip created (now eb6af35)
This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a change to branch fix-tooltip
in repository https://gitbox.apache.org/repos/asf/echarts.git.
at eb6af35 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 branch includes the following new commits:
new eb6af35 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.
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[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.
Posted by wa...@apache.org.
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