[5.0] Allow passing of DOM nodes to setContent

[Ghostbird]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

Allows Tooltip to be set with array of DOM Nodes instead of HTML string.

Fixed issues

• Tooltip.Formatter return string or DOM Element #13250

Details

Before: What was the problem?

When the tooltip is set, you could only pass static HTML content. I am developing an Angular app. Angular – like other web frameworks (e.g Vue, React) – has its own template mechanism to generate DOM nodes and retain control over their contents, to update them dynamically. However, I could not leverage my framework inside echarts tooltip.

After: How is it fixed in this PR?

A non-framework approach is shown in the test file tooltip-domnode.html. That tooltip shows the continuously updating current date.
In my Angular project. I can return this.viewContainerRef.createEmbeddedView(template, context).rootNodes from the EChartOption.Tooltip.Formatter and my tooltip content will be updated in Angular's lifecycle mechanism.

Usage

Are there any API changes?

• The API has been changed.

Previously this was the Formatter interface in Typescript:

interface Formatter {
    (params: Format | Format[], ticket: string, callback: (ticket: string, html: string) => void): string;
}

Now it is this:

interface Formatter {
    (params: Format | Format[], ticket: string, callback: (ticket: string, htmlOrDomNodes: string | any[]) => void): string | any[];
}

Related test cases or examples to use the new APIs

• tooltip-domnode.html

Others

Merging options

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

Other information

[pissang]

Thanks for your contribution! Do you mind retargeting the PR to the next branch? It's our current developing branch and has been rewritten with typescript language.

[Ghostbird]

Retargeted to next branch.

[Ghostbird]

Thanks for cleaning this up!
I'm curious, is a for loop with repeated indexing better than a for … of loop? I know that it is more memory efficient in compiled languages where arrays are implemented as contiguous areas of memory, but I had no idea the same was true for Javascript.