Axis Information for tooltip.axisPointer.label.formatter function

### Version
4.2.1

### What problem does this feature solve?

when using  `tooltip.axisPointer.label.formatter`, (usually) there is no information, to which axis the data belongs. this makes it hard to format the value as desired.

Although the [documatation](https://ecomfe.github.io/echarts-doc/public/en/option.html#tooltip.axisPointer.label.formatter) talks about each item of the `params.seriesData` having axis information delivered with them, as shown in the example below, the `params.seriesData` is empty. this means that it's not possible to find `axis` information and options.
 
**in our case**,  we would like to use the same `formatter` as defined for the axis to be used for `axisPointer.label` too, so access to `axis.axisLabel.formatter` is necessary.

```html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<div id="chart1" style="width:1200px"></div>
<script src="echarts.js"></script>
<script type="text/javascript">
	var chart_15537778965c9cc4e81f06e = echarts.init(document.getElementById('chart1'), null, {
		"devicePixelRatio": null,
		"renderer": "canvas",
		"width": null,
		"height": "700px"
	});

	function formatAxisPointerLabel(value)
	{
		var label = value.value;

		if(value.hasOwnProperty('axis'))
		{
			// this is only possible if the proposed solution is in place:
			if(value.axis.model.option.axisLabel.formatter)
			{
				label = value.axis.model.option.axisLabel.formatter.call({}, label);
			}
		}

		return label;
	}

	function formatValue(value, format)
	{
		switch(format)
		{
		case 0:
			value = "x-" + value;
			break;
		case 1:
			value = "y1-" + value;
			break;

		case 2:
			value = "y2-" + value;
			break;
		}

		return value;
	}

	chart_15537778965c9cc4e81f06e.setOption({
		dataset: {
			source: [
				{
					"operator_country": "Te-Ger",
					"count_users": 3,
					"avg_days_per_user": 20.666666666666668
				},
				{
					"operator_country": "Gl-Nig",
					"count_users": 1,
					"avg_days_per_user": 21
				}, {
					"operator_country": "Az-Aze",
					"count_users": 1,
					"avg_days_per_user": 21
				}, {
					"operator_country": "Be-Kaz",
					"count_users": 1,
					"avg_days_per_user": 19
				}, {
					"operator_country": "El-Fin",
					"count_users": 24,
					"avg_days_per_user": 18.708333333333332
				}, {
					"operator_country": "Al-Leb",
					"count_users": 1,
					"avg_days_per_user": 21
				}, {
					"operator_country": "FL-Bar",
					"count_users": 1,
					"avg_days_per_user": 21
				}, {
					"operator_country": "Vi-Vie",
					"count_users": 1,
					"avg_days_per_user": 19
				}, {
					"operator_country": "SK-Sou",
					"count_users": 2,
					"avg_days_per_user": 20
				}, {
					"operator_country": "Or-Mol",
					"count_users": 1,
					"avg_days_per_user": 21
				}, {
					"operator_country": "Ch-Tai",
					"count_users": 1,
					"avg_days_per_user": 21
				}, {
					"operator_country": "Vo-Ita",
					"count_users": 1,
					"avg_days_per_user": 21
				}, {
					"operator_country": "TI-Bra",
					"count_users": 2,
					"avg_days_per_user": 19
				}, {
					"operator_country": "Si-Sin",
					"count_users": 1,
					"avg_days_per_user": 18
				}, {
					"operator_country": "Vo-Spa",
					"count_users": 13,
					"avg_days_per_user": 18.23076923076923
				}, {
					"operator_country": "Te-Nor",
					"count_users": 6,
					"avg_days_per_user": 15.333333333333334
				}
			]
		},
		"tooltip": {
			"show": true,
			"trigger": "axis",
			"axisPointer": {
				"type": "cross",
				"label": {
					"formatter": function (params){
						return formatAxisPointerLabel(params);
					}
				}
			}
		},
		"xAxis": [
			{
				"show": true,
				"type": "category",
				"axisLabel": {
					"rotate": "45",
					"align": "right",
					"verticalAlign": "top",
					"padding": [0, 15, 0, 0],
					"formatter": function (value){
						return formatValue(value, 0);
					}
				},
				"axisTick": {"alignWithLabel": true},
				"splitArea": {"show": true, "areaStyle": {"color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]}},
				"min": 0,
				"axisLine": {"lineStyle": {"color": "#999999"}},
				"splitNumber": 10
			}
		],
		"yAxis": [
			{
				"show": true,
				"axisLabel": {
					"color": "#5D4F4F",
					"formatter": function (value){
						return formatValue(value, 1);
					}
				},
				"axisLine": {"lineStyle": {"color": "#5D4F4F"}},
				"offset": 0,
				"type": "value",
				"splitNumber": 10,
				"nameTextStyle": {"fontSize": 14},
				"minInterval": 1,
				"splitArea": {"areaStyle": {"color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]}}
			},
			{
				"show": true,
				"splitLine": {"show": false},
				"position": "right",
				"type": "value",
				"splitNumber": 10,
				"nameTextStyle": {"fontSize": 14},
				"minInterval": 1,
				"axisLabel": {
					"formatter": function (value){
						return formatValue(value, 2);
					}
				},
				"axisLine": {"lineStyle": {"color": "#999999"}},
				"splitArea": {"areaStyle": {"color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]}}
			}
		],
		"series": [
			{
				"name": "count_users",
				"type": "bar",
				"yAxisIndex": 0,
				"seriesByLayout": "column",
				"hasValues": true
			},
			{
				"name": "avg_days_per_user",
				"type": "bar",
				"yAxisIndex": 1,
				"seriesByLayout": "column",
				"hasValues": true
			}
		],
		"grid": [
			{
				"show": true,
				"width": "80%",
				"left": "10%",
				"top": "12%",
				"borderColor": "transparent",
				"height": "70%",
				"containLabel": 1
			}
		]
	});
</script>
</body>
</html>
``` 

### What does the proposed API look like?

I propose a **mandatory** property for value provided to `tooltip.axisPointer.label.formatter`, named `axis`, which contains information about the value's axis. this **SHOULD BE AVAILABLE** redgardless of `params.seriesData`. 

as a solution, if the following line is added to `dist\echarts.js` line `68246`, (or at [src/component/axisPointer/viewHelper.js#L139](https://github.com/apache/incubator-echarts/blob/fbb47dd8058ca03cc2e3fe3e0e42c1ebf51fa155/src/component/axisPointer/viewHelper.js#L139)) one can then access `axis` options and information. **important is** that the `axis` options, **specially its formatter** are provided.

```javascript
/**
 * @param {number} value
 * @param {module:echarts/coord/Axis} axis
 * @param {module:echarts/model/Global} ecModel
 * @param {Object} opt
 * @param {Array.<Object>} seriesDataIndices
 * @param {number|string} opt.precision 'auto' or a number
 * @param {string|Function} opt.formatter label formatter
 */
function getValueLabel(value, axis, ecModel, seriesDataIndices, opt) {
    value = axis.scale.parse(value);
    var text = axis.scale.getLabel(
        // If `precision` is set, width can be fixed (like '12.00500'), which
        // helps to debounce when when moving label.
        value, {precision: opt.precision}
    );
    var formatter = opt.formatter;

    if (formatter) {
        var params = {
            value: getAxisRawValue(axis, value),
	        axis:axis,   // <---- this line should be added to the code
            seriesData: []
        };
        each$1(seriesDataIndices, function (idxItem) {
            var series = ecModel.getSeriesByIndex(idxItem.seriesIndex);
            var dataIndex = idxItem.dataIndexInside;
            var dataParams = series && series.getDataParams(dataIndex);
            dataParams && params.seriesData.push(dataParams);
        });

        if (isString(formatter)) {
            text = formatter.replace('{value}', text);
        }
        else if (isFunction$1(formatter)) {
            text = formatter(params);
        }
    }

    return text;
}
```

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Axis Information for tooltip.axisPointer.label.formatter function #10180

Version

What problem does this feature solve?

What does the proposed API look like?

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Axis Information for tooltip.axisPointer.label.formatter function #10180

Description

Version

What problem does this feature solve?

What does the proposed API look like?

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions