This is an automated email from the ASF dual-hosted git repository. wangzx pushed a commit to branch fix/marker/label-formatter-callback-params in repository https://gitbox.apache.org/repos/asf/echarts.git
commit f12a3c72c1c7a870d0e3d52cb9d3535cc435741d Author: plainheart <[email protected]> AuthorDate: Tue May 7 12:13:10 2024 +0800 fix(marker): fix marker label formatter can't get series information. --- src/component/marker/MarkerModel.ts | 20 +++- test/markPoint.html | 198 ++++++++++++++++++++++++++++++++---- 2 files changed, 197 insertions(+), 21 deletions(-) diff --git a/src/component/marker/MarkerModel.ts b/src/component/marker/MarkerModel.ts index 6a68558ca..28d29a576 100644 --- a/src/component/marker/MarkerModel.ts +++ b/src/component/marker/MarkerModel.ts @@ -28,7 +28,9 @@ import { AnimationOptionMixin, Dictionary, CommonTooltipOption, - ScaleDataValue + ScaleDataValue, + CallbackDataParams, + SeriesDataType } from '../../util/types'; import Model from '../../model/Model'; import GlobalModel from '../../model/Global'; @@ -225,6 +227,20 @@ abstract class MarkerModel<Opts extends MarkerOption = MarkerOption> extends Com this._data = data; } + getDataParams( + dataIndex: number, + dataType?: SeriesDataType + ): CallbackDataParams { + const params = DataFormatMixin.prototype.getDataParams.call(this, dataIndex, dataType); + const hostSeries = this.__hostSeries; + if (hostSeries) { + params.seriesId = hostSeries.id; + params.seriesName = hostSeries.name; + params.seriesType = hostSeries.subType; + } + return params; + } + /** * Create slave marker model from series. */ @@ -246,4 +262,4 @@ abstract class MarkerModel<Opts extends MarkerOption = MarkerOption> extends Com interface MarkerModel<Opts extends MarkerOption = MarkerOption> extends DataFormatMixin {} zrUtil.mixin(MarkerModel, DataFormatMixin.prototype); -export default MarkerModel; \ No newline at end of file +export default MarkerModel; diff --git a/test/markPoint.html b/test/markPoint.html index f4ca85f12..516b03b17 100644 --- a/test/markPoint.html +++ b/test/markPoint.html @@ -23,25 +23,18 @@ under the License. <meta charset="utf-8"> <script src="lib/simpleRequire.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> + <link rel="stylesheet" href="lib/reset.css" /> </head> <body> - <style> - html, body, #main { - width: 100%; - height: 100%; - } - </style> - <div id="main"></div> + <div id="main0"></div> + <div id="main1"></div> <script> - require([ 'echarts' ], function (echarts) { - - var chart = echarts.init(document.getElementById('main'), null, { - - }); - var xAxisData = []; var data1 = []; var data2 = []; @@ -52,12 +45,12 @@ under the License. data2.push(+Math.random().toFixed(2)); } - if (console && console.log) { - console.log(data1); - console.log(data2); - } + // if (console && console.log) { + // console.log(data1); + // console.log(data2); + // } - chart.setOption({ + var option = { legend: { data: ['line-stack', 'line2-stack', 'line3'] }, @@ -211,14 +204,181 @@ under the License. } } ] + }; + + var chart = testHelper.create(echarts, 'main0', { + option: option }); chart.on('click', function (params) { console.log(params, params.data); }); - }) + }); + </script> + <script> + require([ + 'echarts' + ], function (echarts) { + var option = { + title: { + text: 'Weather Statistics' + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + legend: { + data: ['City Alpha', 'City Beta', 'City Gamma'] + }, + grid: { + left: 100 + }, + xAxis: { + type: 'value', + name: 'Days', + axisLabel: { + formatter: '{value}' + } + }, + yAxis: { + type: 'category', + inverse: true, + data: ['Sunny', 'Cloudy', 'Showers'], + axisLabel: { + formatter: function (value) { + return '{' + value + '| }\n{value|' + value + '}'; + }, + margin: 20, + rich: { + value: { + lineHeight: 30, + align: 'center' + }, + Sunny: { + height: 40, + align: 'center', + backgroundColor: { + image: 'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png' + } + }, + Cloudy: { + height: 40, + align: 'center', + backgroundColor: { + image: 'https://echarts.apache.org/examples/data/asset/img/weather/cloudy_128.png' + } + }, + Showers: { + height: 40, + align: 'center', + backgroundColor: { + image: 'https://echarts.apache.org/examples/data/asset/img/weather/showers_128.png' + } + } + } + } + }, + series: [ + { + name: 'City Alpha', + type: 'bar', + data: [165, 170, 30], + label: { + show: true + }, + markPoint: { + symbolSize: 0, + emphasis: { + disabled: true + }, + label: { + formatter: '{a|{a}\n}{b|{b} }{c|{c}}', + backgroundColor: 'rgb(242,242,242)', + borderColor: '#aaa', + borderWidth: 1, + borderRadius: 4, + padding: [4, 10], + lineHeight: 26, + // shadowBlur: 5, + // shadowColor: '#000', + // shadowOffsetX: 0, + // shadowOffsetY: 1, + position: 'right', + distance: 20, + rich: { + a: { + align: 'center', + color: '#fff', + fontSize: 18, + textShadowBlur: 2, + textShadowColor: '#000', + textShadowOffsetX: 0, + textShadowOffsetY: 1, + textBorderColor: '#333', + textBorderWidth: 2 + }, + b: { + color: '#333' + }, + c: { + color: '#ff8811', + textBorderColor: '#000', + textBorderWidth: 1, + fontSize: 22 + } + } + }, + data: [ + { type: 'max', name: 'max days: ' }, + { type: 'min', name: 'min days: ' } + ] + } + }, + { + name: 'City Beta', + type: 'bar', + label: { + show: true + }, + data: [150, 105, 110], + markPoint: { + label: { + formatter(p) { + console.log('seriesType:', p.seriesType, 'seriesName:', p.seriesName, 'seriesId:', p.seriesId); + return `${p.name}\nThis is markPoint of the ${p.seriesType} series: ${p.seriesName}` + } + }, + data: [ + { + name: '固定 x 像素位置', + yAxis: 2, + x: '70%' + } + ] + } + }, + { + name: 'City Gamma', + type: 'bar', + label: { + show: true + }, + data: [220, 82, 63] + } + ] + } + var chart = testHelper.create(echarts, 'main1', { + option, + title: [ + '1. MarkPoint label formatter callback params should contains **`seriesName`**, **`seriesId`**, **`seriesType`**', + '2. **SHOULD NOT** display **`null`**' + ] + }) + }) </script> </body> </html> --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
