feat(ssr): add server-side rendering

[pissang]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

zrender introduces a brand new SVG renderer to support pure server-side rendering without dependencies of JSDOM and node-canvas. See the PR ecomfe/zrender#836.

This PR updates the zrender to the latest nightly version to use this new SVG renderer and introduces a new SSR mode to support rendering to SVG string without JSDOM and node-canvas.

In this new mode, the render speed is faster because we don't have to simulate the dom environment, the generated SVG string is smaller because we can do more optimizations based on the vnode, and there are more features that can be supported like CSS animation.

Usage

// container is not required in SSR mode.
const chart = echarts.init(null, null, {
    // Only SVG renderer is supported.
    renderer: 'svg',
    ssr: true
});
chart.setOption(...);
chart.renderToSVGString();

Sceneraios

SSR can be used in the scene that needs the chart to be displayed as fast as possible. Just like the server-side rendering in the vue and react.

The generated SVG will use CSS animation to play the basic enter animation when displayed. But user interaction is not available(perhaps we can support hover highlight with CSS in further times). We need to create a chart and setOption on the container again to have more rich user interactions, which is so-called hydration in the frameworks supporting SSR. This step is not integrated in echarts, you need to manage it in your project, or let wrappers like vue-echarts do it.

Limitations

Animation

Because of the limitation of CSS animation, which is not as flexible as JS animation. Animation of some series will be disabled or changed. For example, pie charts will use a very basic scale animation.

Font

Because NodeJS doesn't have the ability to measure text. It's better to use the default font in the server to have a correct layout. If you wan't to use a different font, especially the font glyph is very different from the default font, use echarts.setCanvasCreator to let node-canvas to measure the text is a better choice. Or use new added echarts.setPlatformAPI from ecomfe/zrender#840

Misc

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

Other changes

• TypeScript version has been upgraded to 4.4
• New echarts.setPlatformAPI exposed directly from zrender. More detail of this method can be seen in feat: new setPlatformAPI method ecomfe/zrender#840
• getRenderedCanvas is replaced by renderToCanvas to be more consistent with the new renderToSVGString API

[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]

It looks good to me now.

[plainheart]

Found deprecated call for getRenderedCanvas

echarts/src/core/echarts.ts

Line 821 in b14b885

: chart.getRenderedCanvas(clone(opts));

[pissang]

@plainheart Fixed

[echarts-bot]

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