You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by za...@apache.org on 2020/09/15 09:17:48 UTC
[incubator-echarts] branch feat-12338 created (now 3b0df70)
This is an automated email from the ASF dual-hosted git repository.
zakwu pushed a change to branch feat-12338
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git.
at 3b0df70 feat(tooltip): add formatter cache to tooltip
This branch includes the following new commits:
new 3b0df70 feat(tooltip): add formatter cache to tooltip
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
[incubator-echarts] 01/01: feat(tooltip): add formatter cache to
tooltip
Posted by za...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
zakwu pushed a commit to branch feat-12338
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 3b0df70d95ecf9cf00cc3db027882e9ba9b401b6
Author: zakwu <12...@qq.com>
AuthorDate: Tue Sep 15 17:07:04 2020 +0800
feat(tooltip): add formatter cache to tooltip
---
src/component/tooltip/TooltipModel.ts | 6 +-
src/component/tooltip/TooltipView.ts | 30 +++++++-
test/tooltip-formatter-cache.html | 128 ++++++++++++++++++++++++++++++++++
3 files changed, 162 insertions(+), 2 deletions(-)
diff --git a/src/component/tooltip/TooltipModel.ts b/src/component/tooltip/TooltipModel.ts
index a7bd3e3..7aac3b8 100644
--- a/src/component/tooltip/TooltipModel.ts
+++ b/src/component/tooltip/TooltipModel.ts
@@ -66,6 +66,10 @@ export interface TooltipOption extends CommonTooltipOption<TopLevelFormatterPara
appendToBody?: boolean
order?: TooltipOrderMode
+
+ useFormatterCache?: boolean
+
+ hitFormatterCache?: (key: string, cacheObj: any) => void
}
class TooltipModel extends ComponentModel<TooltipOption> {
@@ -173,4 +177,4 @@ class TooltipModel extends ComponentModel<TooltipOption> {
ComponentModel.registerClass(TooltipModel);
-export default TooltipModel;
\ No newline at end of file
+export default TooltipModel;
diff --git a/src/component/tooltip/TooltipView.ts b/src/component/tooltip/TooltipView.ts
index d877177..6440aa7 100644
--- a/src/component/tooltip/TooltipView.ts
+++ b/src/component/tooltip/TooltipView.ts
@@ -154,6 +154,8 @@ class TooltipView extends ComponentView {
private _lastDataByCoordSys: DataByCoordSys[];
+ private _tooltipFormatterCache: {[propName: string]: any}
+
init(ecModel: GlobalModel, api: ExtensionAPI) {
if (env.node) {
return;
@@ -714,6 +716,17 @@ class TooltipView extends ComponentView {
});
}
+ private _getTooltipCache(key: string): any {
+ return this._tooltipFormatterCache && this._tooltipFormatterCache[key];
+ }
+
+ private _setTooltipCache(key: string, value: any) {
+ if (!key) return;
+
+ this._tooltipFormatterCache = this._tooltipFormatterCache || {};
+ this._tooltipFormatterCache[key] = value;
+ }
+
private _showTooltipContent(
// Use Model<TooltipOption> insteadof TooltipModel because this model may be from series or other options.
// Instead of top level tooltip.
@@ -749,6 +762,18 @@ class TooltipView extends ComponentView {
html = formatUtil.formatTpl(formatter, params, true);
}
else if (zrUtil.isFunction(formatter)) {
+ // formatter cache
+ let formatterCache = null as any;
+ let key: string;
+ const useFormatterCache = tooltipModel.get('useFormatterCache');
+ const hitFormatterCache = tooltipModel.get('hitFormatterCache');
+
+ if(useFormatterCache && params) {
+ const p = zrUtil.isArray(params) ? params[0] : params;
+ key = [p.seriesId, p.componentIndex, p.seriesName, p.name, p.dataIndex].join('-');
+ formatterCache = this._getTooltipCache(key);
+ }
+
const callback = bind(function (cbTicket: string, html: string) {
if (cbTicket === this._ticket) {
tooltipContent.setContent(html, markupStyleCreator, tooltipModel, nearPoint.color, positionExpr);
@@ -758,7 +783,10 @@ class TooltipView extends ComponentView {
}
}, this);
this._ticket = asyncTicket;
- html = formatter(params, asyncTicket, callback);
+
+ html = formatterCache || formatter(params, asyncTicket, callback);
+ formatterCache && zrUtil.isFunction(hitFormatterCache) && hitFormatterCache(key, formatterCache);
+ key && this._setTooltipCache(key, html);
}
tooltipContent.setContent(html, markupStyleCreator, tooltipModel, nearPoint.color, positionExpr);
diff --git a/test/tooltip-formatter-cache.html b/test/tooltip-formatter-cache.html
new file mode 100644
index 0000000..b36f416
--- /dev/null
+++ b/test/tooltip-formatter-cache.html
@@ -0,0 +1,128 @@
+<!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/jquery.min.js"></script>
+ <script src="lib/facePrint.js"></script>
+ <script src="lib/testHelper.js"></script>
+ <!-- <script src="ut/lib/canteen.js"></script> -->
+ <link rel="stylesheet" href="lib/reset.css" />
+</head>
+<body>
+<style>
+</style>
+
+
+
+<div id="main0"></div>
+<div id="main1"></div>
+<div id="main2"></div>
+
+<script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var labelRight = {
+ position: 'right'
+ };
+ var option = {
+ title: {
+ text: 'toolsTip formatter trigger once test #12338',
+ subtext: 'From ExcelHome',
+ sublink: 'http://e.weibo.com/1341556070/AjwF2AgQm'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: { // 坐标轴指示器log，坐标轴触发有效
+ type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+ },
+ useFormatterCache: true, // 如果配置为true，formatter函数只触发一次
+ formatter: function (params, ticket, callback) {
+ console.log('hit formatter:', params);
+ return params[0];
+ },
+ // call when hit cache, call after use formatterCache
+ hitFormatterCache(key, cache) {
+ console.log('hit cache:', key, cache);
+ }
+ },
+ grid: {
+ top: 80,
+ bottom: 30
+ },
+ xAxis: {
+ type: 'value',
+ position: 'top',
+ splitLine: {
+ lineStyle: {
+ type: 'dashed'
+ }
+ }
+ },
+ yAxis: {
+ type: 'category',
+ axisLine: {show: false},
+ axisLabel: {show: false},
+ axisTick: {show: false},
+ splitLine: {show: false},
+ data: ['ten', 'nine', 'eight', 'seven', 'six', 'five', 'four', 'three', 'two', 'one']
+ },
+ series: [
+ {
+ name: '生活费',
+ type: 'bar',
+ stack: '总量',
+ label: {
+ show: true,
+ formatter: '{b}'
+ },
+ data: [
+ {value: -0.07, label: labelRight},
+ {value: -0.09, label: labelRight},
+ 0.2, 0.44,
+ {value: -0.23, label: labelRight},
+ 0.08,
+ {value: -0.17, label: labelRight},
+ 0.47,
+ {value: -0.36, label: labelRight},
+ 0.18
+ ]
+ }
+ ]
+ };
+
+
+ var chart = testHelper.create(echarts, 'main0', {
+ title: [
+ 'the toolTips.triggerOnce set "true" ',
+ 'Case from issue #12338'
+ ],
+ option: option
+ });
+ });
+</script>
+
+</body>
+</html>
+
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org