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:49 UTC
[incubator-echarts] 01/01: feat(tooltip): add formatter cache to
tooltip
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