You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2020/05/19 09:30:27 UTC
[incubator-echarts] 01/01: fix(tooltip): richText for
series-specific formatters #12232
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-12232
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 5a94212c43f0a4b5a8da7c26cf20192d29fb1d02
Author: Ovilia <zw...@gmail.com>
AuthorDate: Tue May 19 17:27:43 2020 +0800
fix(tooltip): richText for series-specific formatters #12232
---
src/chart/radar/RadarSeries.js | 7 +-
src/component/tooltip/TooltipContent.js | 15 +-
src/component/tooltip/TooltipRichContent.js | 37 ++-
test/tooltip-textStyle.html | 455 ++++++++++++++++++++++++++++
4 files changed, 506 insertions(+), 8 deletions(-)
diff --git a/src/chart/radar/RadarSeries.js b/src/chart/radar/RadarSeries.js
index ba713d0..9533b23 100644
--- a/src/chart/radar/RadarSeries.js
+++ b/src/chart/radar/RadarSeries.js
@@ -49,16 +49,17 @@ var RadarSeries = SeriesModel.extend({
});
},
- formatTooltip: function (dataIndex) {
+ formatTooltip: function (dataIndex, multipleSeries, dataType, renderMode) {
var data = this.getData();
var coordSys = this.coordinateSystem;
var indicatorAxes = coordSys.getIndicatorAxes();
var name = this.getData().getName(dataIndex);
- return encodeHTML(name === '' ? this.name : name) + '<br/>'
+ var newLine = renderMode === 'html' ? '<br/>' : '\n';
+ return encodeHTML(name === '' ? this.name : name) + newLine
+ zrUtil.map(indicatorAxes, function (axis, idx) {
var val = data.get(data.mapDimension(axis.dim), dataIndex);
return encodeHTML(axis.name + ' : ' + val);
- }).join('<br />');
+ }).join(newLine);
},
/**
diff --git a/src/component/tooltip/TooltipContent.js b/src/component/tooltip/TooltipContent.js
index 6cdbc3f..ca29179 100644
--- a/src/component/tooltip/TooltipContent.js
+++ b/src/component/tooltip/TooltipContent.js
@@ -60,8 +60,21 @@ function assembleFont(textStyleModel) {
cssText.push('font:' + textStyleModel.getFont());
+ var lineHeight = textStyleModel.get('lineHeight');
+ if (lineHeight == null) {
+ lineHeight = Math.round(fontSize * 3 / 2);
+ }
+
fontSize
- && cssText.push('line-height:' + Math.round(fontSize * 3 / 2) + 'px');
+ && cssText.push('line-height:' + lineHeight + 'px');
+
+ var shadowColor = textStyleModel.get('textShadowColor');
+ var shadowBlur = textStyleModel.get('textShadowBlur') || 0;
+ var shadowOffsetX = textStyleModel.get('textShadowOffsetX') || 0;
+ var shadowOffsetY = textStyleModel.get('textShadowOffsetY') || 0;
+ shadowBlur
+ && cssText.push('text-shadow:' + shadowOffsetX + 'px ' + shadowOffsetY + 'px '
+ + shadowBlur + 'px ' + shadowColor);
each(['decoration', 'align'], function (name) {
var val = textStyleModel.get(name);
diff --git a/src/component/tooltip/TooltipRichContent.js b/src/component/tooltip/TooltipRichContent.js
index 34c0f75..6721d98 100644
--- a/src/component/tooltip/TooltipRichContent.js
+++ b/src/component/tooltip/TooltipRichContent.js
@@ -20,6 +20,7 @@
import * as zrUtil from 'zrender/src/core/util';
// import Group from 'zrender/src/container/Group';
import Text from 'zrender/src/graphic/Text';
+import * as graphicUtil from '../../util/graphic';
/**
* @alias module:echarts/component/tooltip/TooltipRichContent
@@ -106,16 +107,44 @@ TooltipRichContent.prototype = {
startId = text.indexOf('{marker');
}
+ var textStyleModel = tooltipModel.getModel('textStyle');
+ var fontSize = textStyleModel.get('fontSize');
+ var lineHeight = tooltipModel.get('textLineHeight');
+ if (lineHeight == null) {
+ lineHeight = Math.round(fontSize * 3 / 2);
+ }
+
this.el = new Text({
- style: {
+ // style: {
+ // rich: markers,
+ // text: content,
+ // textLineHeight: 20,
+ // textBackgroundColor: tooltipModel.get('backgroundColor'),
+ // textBorderRadius: tooltipModel.get('borderRadius'),
+ // textFill: tooltipModel.get('textStyle.color'),
+ // textPadding: tooltipModel.get('padding'),
+ // fontStyle: tooltipModel.get('fontStyle'),
+ // fontWeight: tooltipModel.get('fontWeight'),
+ // fontFamily: tooltipModel.get('fontFamily'),
+ // fontSize: tooltipModel.get('fontSize'),
+ // lineHeight: tooltipModel.get('lineHeight'),
+ // width: tooltipModel.get('width'),
+ // height: tooltipModel.get('height'),
+ // textBorderColor: tooltipModel.get('textBorderColor'),
+ // textBorderWidth: tooltipModel.get('textBorderWidth'),
+ // textShadowBlur: tooltipModel.get('textShadowBlur'),
+ // textShadowOffsetX: tooltipModel.get('textShadowOffsetX'),
+ // textShadowOffsetY: tooltipModel.get('textShadowOffsetY')
+ // },
+ style: graphicUtil.setTextStyle({}, textStyleModel, {
rich: markers,
text: content,
- textLineHeight: 20,
textBackgroundColor: tooltipModel.get('backgroundColor'),
textBorderRadius: tooltipModel.get('borderRadius'),
textFill: tooltipModel.get('textStyle.color'),
- textPadding: tooltipModel.get('padding')
- },
+ textPadding: tooltipModel.get('padding'),
+ textLineHeight: lineHeight
+ }),
z: tooltipModel.get('z')
});
this._zr.add(this.el);
diff --git a/test/tooltip-textStyle.html b/test/tooltip-textStyle.html
new file mode 100644
index 0000000..e111013
--- /dev/null
+++ b/test/tooltip-textStyle.html
@@ -0,0 +1,455 @@
+<!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>
+
+
+ <div id="main3"></div>
+
+
+ <div id="main4"></div>
+
+
+ <div id="main5"></div>
+
+
+
+
+
+
+
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+ // $.getJSON('./data/nutrients.json', function (data) {});
+
+ option = {
+ xAxis: {},
+ yAxis: {},
+ tooltip: {
+ textStyle: {
+ fontSize: 20,
+ textShadowColor: 'red',
+ textShadowBlur: 10
+ },
+ formatter: '{a}: {c}',
+ alwaysShowContent: true
+ },
+ series: {
+ type: 'line',
+ data: [[11, 22], [33, 44]]
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'main0', {
+ title: [
+ 'trigger: **"item"**',
+ 'renderMode: **"html"**',
+ 'It should have red text shadow and font size being 20px'
+ ],
+ option: option
+ });
+
+ chart.dispatchAction({
+ type: 'showTip',
+ seriesIndex: 0,
+ dataIndex: 0
+ });
+ });
+ </script>
+
+
+
+
+
+
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+ // $.getJSON('./data/nutrients.json', function (data) {});
+
+ option = {
+ xAxis: {},
+ yAxis: {},
+ tooltip: {
+ textStyle: {
+ fontSize: 20,
+ textShadowColor: 'red',
+ textShadowBlur: 10
+ },
+ formatter: '{a}: {c}',
+ alwaysShowContent: true,
+ renderMode: 'richText'
+ },
+ series: {
+ type: 'line',
+ data: [[11, 22], [33, 44]]
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'main1', {
+ title: [
+ 'trigger: **"item"**',
+ 'renderMode: **"richText"**',
+ 'It should have red text shadow and font size being 20px'
+ ],
+ option: option
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+
+ chart.dispatchAction({
+ type: 'showTip',
+ seriesIndex: 0,
+ dataIndex: 0
+ });
+ });
+ </script>
+
+
+
+
+
+
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+ // $.getJSON('./data/nutrients.json', function (data) {});
+
+ option = {
+ xAxis: {},
+ yAxis: {},
+ tooltip: {
+ textStyle: {
+ color: '#fff',
+ fontStyle: 'italic',
+ fontWeight: 'bold',
+ fontFamily: 'monospace',
+ fontSize: 20,
+ textBorderColor: 'blue',
+ textBorderWidth: 1,
+ textShadowColor: 'red',
+ textShadowBlur: 10
+ },
+ formatter: function (params) {
+ return params.map(function (param) {
+ return param.seriesName + ': ' + param.value;
+ }).join('<br>');
+ },
+ alwaysShowContent: true,
+ trigger: 'axis'
+ },
+ series: [{
+ type: 'line',
+ data: [[11, 22], [33, 44]]
+ }, {
+ type: 'line',
+ data: [[11, 33], [22, 55]]
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main2', {
+ title: [
+ 'trigger: **"axis"**',
+ 'renderMode: **"html"**',
+ 'It should have **two lines** of red text shadow and font size being 20px'
+ ],
+ option: option
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+
+ chart.dispatchAction({
+ type: 'showTip',
+ // dataIndex: 0,
+ x: 300,
+ y: 100
+ });
+ });
+ </script>
+
+
+
+
+
+
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+ // $.getJSON('./data/nutrients.json', function (data) {});
+
+ option = {
+ xAxis: {},
+ yAxis: {},
+ tooltip: {
+ textStyle: {
+ color: '#fff',
+ fontStyle: 'italic',
+ fontWeight: 'bold',
+ fontFamily: 'monospace',
+ fontSize: 20,
+ textBorderColor: 'blue',
+ textBorderWidth: 1,
+ textShadowColor: 'red',
+ textShadowBlur: 10
+ },
+ formatter: function (params) {
+ return params.map(function (param) {
+ return param.seriesName + ': ' + param.value;
+ }).join('\n');
+ },
+ alwaysShowContent: true,
+ trigger: 'axis',
+ renderMode: 'richText'
+ },
+ series: [{
+ type: 'line',
+ data: [[11, 22], [33, 44]]
+ }, {
+ type: 'line',
+ data: [[11, 33], [22, 55]]
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main3', {
+ title: [
+ 'trigger: **"axis"**',
+ 'renderMode: **"richText"**',
+ 'It should have **two lines** of red text shadow and font size being 20px'
+ ],
+ option: option
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+
+ chart.dispatchAction({
+ type: 'showTip',
+ // dataIndex: 0,
+ x: 300,
+ y: 100
+ });
+ });
+ </script>
+
+
+
+
+
+
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+ // $.getJSON('./data/nutrients.json', function (data) {});
+
+ option = {
+ tooltip: {
+ alwaysShowContent: true,
+ textStyle: {
+ fontSize: 20,
+ textShadowColor: 'red',
+ textShadowBlur: 10
+ }
+ },
+ radar: {
+ radius: [50, '70%'],
+ name: {
+ formatter:'【{value}】',
+ color:'#72ACD1'
+ },
+ triggerEvent: true,
+ indicator: [
+ { text: '销售（sales）', max: 100},
+ { text: '管理（Administration）', max: 16000},
+ { text: '信息技术（Information Techology）', max: 30000},
+ { text: '客服（Customer Support）', max: 38000},
+ { text: '研发（Development）', max: 52000},
+ { text: '市场（Marketing）', max: 25000}
+ ]
+ },
+ series: [{
+ name: '预算 vs 开销（Budget vs spending）',
+ type: 'radar',
+ label: {
+ normal: {
+ show: true
+ }
+ },
+ // areaStyle: {normal: {}},
+ data : [
+ {
+ value : [0, 10000, 28000, 35000, 50000, 19000],
+ name : '预算分配（Allocated Budget）'
+ },
+ {
+ value : [50, 14000, 28000, 31000, '-', 21000],
+ name : '实际开销（Actual Spending）含有 "-" 数据'
+ },
+ {
+ value: ['-', 8000, 20000, 20000, 40000, 10000],
+ name: '第一个元素是 null'
+ }
+ ]
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main4', {
+ title: [
+ 'renderMode: **"richText"**',
+ 'Radar series tooltip'
+ ],
+ option: option
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+
+ chart.dispatchAction({
+ type: 'showTip',
+ seriesIndex: 0,
+ dataIndex: 0
+ });
+ });
+ </script>
+
+
+
+
+
+
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+ // $.getJSON('./data/nutrients.json', function (data) {});
+
+ option = {
+ tooltip: {
+ renderMode: 'richText',
+ textStyle: {
+ alwaysShowContent: true,
+ fontSize: 20,
+ textShadowColor: 'red',
+ textShadowBlur: 10
+ }
+ },
+ radar: {
+ radius: [50, '70%'],
+ name: {
+ formatter:'【{value}】',
+ color:'#72ACD1'
+ },
+ triggerEvent: true,
+ indicator: [
+ { text: '销售（sales）', max: 100},
+ { text: '管理（Administration）', max: 16000},
+ { text: '信息技术（Information Techology）', max: 30000},
+ { text: '客服（Customer Support）', max: 38000},
+ { text: '研发（Development）', max: 52000},
+ { text: '市场（Marketing）', max: 25000}
+ ]
+ },
+ series: [{
+ name: '预算 vs 开销（Budget vs spending）',
+ type: 'radar',
+ label: {
+ normal: {
+ show: true
+ }
+ },
+ // areaStyle: {normal: {}},
+ data : [
+ {
+ value : [0, 10000, 28000, 35000, 50000, 19000],
+ name : '预算分配（Allocated Budget）'
+ },
+ {
+ value : [50, 14000, 28000, 31000, '-', 21000],
+ name : '实际开销（Actual Spending）含有 "-" 数据'
+ },
+ {
+ value: ['-', 8000, 20000, 20000, 40000, 10000],
+ name: '第一个元素是 null'
+ }
+ ]
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main5', {
+ title: [
+ 'renderMode: **"richText"**',
+ 'Radar series tooltip'
+ ],
+ option: option
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+
+ chart.dispatchAction({
+ type: 'showTip',
+ seriesIndex: 0,
+ dataIndex: 0
+ });
+ });
+ </script>
+
+
+ </body>
+</html>
+
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org