add valueFormatter in tooltip

[pissang]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

This PR added a new option valueFormatter. It's the most commonly used formatter scenario we've met. See more detail in #14962

API

interface valueFormatter {
  (value: number | string | (string | number)[]) => string
}

Parameter value is the number or string(category) that displayed in each row. For example, in the following tooltip:

Each row will call the valueFormatter once and the value will be 0.3, 12.71, 0 respectively.

NOTE: valueFormatter will take no effect if formatter is used.

Fixed issues

#14962
#15430

Details

Before: What was the problem?

We need to replace the whole HTML with formatter if we only want format the numbers.

After: How is it fixed in this PR?

Use valueFormatter to only format the numbers.

Misc

• The API has been changed (apache/echarts-doc#xxx).
• This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

Basic usage: adding %

tooltip: {
    position: 'top',
    valueFormatter: (val) => val + '%'
},

Using different formatter in different series.

series: [{
    name: 'CPU',
    type: 'line',
    showSymbol: false,
    tooltip: {
        valueFormatter: (value) => value + ' %'
    },
    ...
}, {
    name: 'RAM',
    type: 'line',
    yAxisIndex: 1,
    tooltip: {
        valueFormatter: (value) => value + ' MB'
    }
    ...
}

Others

Merging options

• Please squash the commits into a single one when merging.

Other information

[echarts-bot]

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

The pull request is marked to be PR: author is committer because you are a committer of this project.

Document changes are required in this PR. Please also make a PR to apache/echarts-doc for document changes and update the issue id in the PR description. When the doc PR is merged, the maintainers will remove the PR: awaiting doc label.

[plainheart]

What if we set a valueFormatter for the global tooltip? Should the valueFormatter callback include all the series values? The first argument in formatter callback will include all the series values. But it seems the current valueFormatter includes only one series value.

global formatter	global valueFormatter

[pissang]

@plainheart Because formatter is for the whole tooltip. It returns one single HTML string for the tooltip. And valueFormatter will be called for each value. It's also returns one string after formatted. It's more consistent and easier for developer to handle.

If we return an array. Developers need to check if value is array and loop them to process each one. And they may be confused if they should return an array or a combined string.

There are cases that different series need to have different formatted result. The series.tooltip.formatter metioned in the description exists for this situation. We can also add a second param that includes seriesIndex, dataIndex for more information. It's like callback in xAxis.axisLabel.formatter. But I prefer to keep it simple at first.

[plainheart]

Well. LGTM.

[echarts-bot]

Congratulations! Your PR has been merged. Thanks for your contribution! 👍

[crazyair]

等发正式版，刚试了下 rc，控制台一堆报错。

[susiwen8]

@crazyair 能提供下复现示例吗？

[crazyair]

@crazyair 能提供下复现示例吗？

[susiwen8]

@crazyair 能提供下复现示例吗？

这个能提供最小复现示例吗？

[pissang]

@crazyair 看了下报错信息，可能是渐变色动画引起的，可以检查下配置项中的渐变色配置是否有使用非法的颜色字符串（无法被解析的）

然后最好能够像 @susiwen8 建议的给我们提供一个最小复现的例子，方便我们看是否可以在这块再优化下

[crazyair]

@crazyair 看了下报错信息，可能是渐变色动画引起的，可以检查下配置项中的渐变色配置是否有使用非法的颜色字符串（无法被解析的）

对，是使用了渐变色，由于示例死循环了非常卡，渐变色我是这样配置的

_options = {
            tooltip: { trigger: 'axis' },
            grid: { left: 5, right: 5, bottom: 5, top: 5 },
            xAxis: [
                {
                    show: false,
                    type: 'category',
                    boundaryGap: false,
                },
            ],
            yAxis: [{ show: false, type: 'value' }],
            series: [
                {
                    type: 'line',
                    smooth: true,
                    lineStyle: { width: 2 },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.2,
                        color: new graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: `${get(options, ['color', 0])}` },
                            { offset: 1, color: 'rgb(255, 255, 255)' },
                        ]),
                    },
                },
            ],
        };

起始 color 是 options.color[0] 的值 rgb(220 221 251)

[crazyair]

@crazyair 能提供下复现示例吗？

https://codesandbox.io/s/pensive-cloud-f8n8b?file=/src/index.js

[plainheart]

rgb 的逗号呢？还是用法不规范啊...

[crazyair]

rgb 的逗号呢？还是用法不规范啊...

尴尬，眼花了，vscode 在这里会有背景色，没看到有没有逗号

[AN-535]

好像valueFormatter无效

[plainheart]

可能是缓存，清一下缓存刷新再试。

[AN-535]

感谢，强制刷新后解决了

[Cat1007]

后续可以添加dataIndex吗