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:26 UTC
[incubator-echarts] branch fix-12232 created (now 5a94212)
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a change to branch fix-12232
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git.
at 5a94212 fix(tooltip): richText for series-specific formatters #12232
This branch includes the following new commits:
new 5a94212 fix(tooltip): richText for series-specific formatters #12232
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: fix(tooltip): richText for
series-specific formatters #12232
Posted by ov...@apache.org.
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