fix(ssr): fix label doesn't show in line series when ssr is enabled

[plainheart]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

1. Fix label doesn't show and line path doesn't update correctly in the line series when ssr is enabled.
2. Fix a typo: seriesDalay -> seriesDelay

Fixed issues

• [Bug] new SVG renderer fails to render labels on line charts #18027

Comparison

Before	After

Document Info

One of the following should be checked.

• This PR doesn't relate to document changes
• The document should be updated later
• The document changes have been made in apache/echarts-doc#xxx

Misc

ZRender Changes

• This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

N.A.

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.

⚠️ MISSING DOCUMENT INFO: Please make sure one of the document options are checked in this PR's description. Search "Document Info" in the description of this PR. This should be done either by the author or the reviewers of the PR.

[pissang]

seriesModel.isAnimationEnabled should have considerd ecModel.ssr

[plainheart]

But it requires env.node. https://github.com/apache/echarts/blob/master/src/model/Series.ts#L469

[pissang]

Understand, we tried to fix the issue by disabling the animation in SSR mode.

[echarts-bot]

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

[wcccode]

服务端nodeJs渲染图片，折线图数值未显示。

依赖：
canvas: "^2.11.2"
echarts: "^5.5.1"

测试数据：
var option = {
title: {
text: '每日增长趋势'
},
tooltip: {},
legend: {
data: ['活跃数'],
bottom: '10'
},
xAxis: {
data: ['2024-10-1', '2024-10-2', '2024-10-3', '2024-10-4', '2024-10-5', '2024-10-6', '2024-10-7', '2024-10-8', '2024-10-9', '2024-10-10', '2024-10-11', '2024-10-12', '2024-10-13', '2024-10-14', '2024-10-15']
},
yAxis: {},
series: [{
name: '活跃数',
type: 'line',
data: [86, 38, 45, 37, 37, 37, 60, 589, 545, 653, 891, 838, 225, 708, 597],
label: {
show: true, // 显示每个数据点的标签
position: 'top', // 标签的位置，可以是 'top', 'left', 'right', 'bottom'
formatter: '{c}' // 显示数据的值
}
}]
};

测试结果：

[aquamarine5]

服务端nodeJs渲染图片，折线图数值未显示。

依赖： canvas: "^2.11.2" echarts: "^5.5.1"

测试数据： var option = { title: { text: '每日增长趋势' }, tooltip: {}, legend: { data: ['活跃数'], bottom: '10' }, xAxis: { data: ['2024-10-1', '2024-10-2', '2024-10-3', '2024-10-4', '2024-10-5', '2024-10-6', '2024-10-7', '2024-10-8', '2024-10-9', '2024-10-10', '2024-10-11', '2024-10-12', '2024-10-13', '2024-10-14', '2024-10-15'] }, yAxis: {}, series: [{ name: '活跃数', type: 'line', data: [86, 38, 45, 37, 37, 37, 60, 589, 545, 653, 891, 838, 225, 708, 597], label: { show: true, // 显示每个数据点的标签 position: 'top', // 标签的位置，可以是 'top', 'left', 'right', 'bottom' formatter: '{c}' // 显示数据的值 } }] };

测试结果：

一样 字体在SVG中渲染了 但是fill-opacity被设置为0

[plainheart]

@wcccode 你这种使用 canvas 绘制的情况，还需要禁用动画。设置 animation: false 即可。

[aquamarine5]

@wcccode 你这种使用 canvas 绘制的情况，还需要禁用动画。设置 animation: false 即可。

我发现为什么了 1.设置ssr=true 2.调用renderSvg()方法而不是使用JSDom调用outerHTML
fill-opacity=0的原因是动画的问题

[plainheart]

嗯，如果用 SVG 渲染，直接使用 chart.renderToSVGString() 即可，也不需要显式设置 animation: false。也可以参考这篇教程。SVG 的 SSR 是默认支持高亮和动画的，不想用也可以手动禁用。