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 <zwl.s...@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-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org