在Angular中用Echarts实现三类时间轴图表遇问题求助

最近在用Angular 17搭配ngx-echarts做一个带三个分类的时间轴图表，对标Highcharts的同类示例，但过程中碰到了不少技术问题，想问问有没有同行也遇到过类似情况？
当前用的依赖版本如下：

"@angular/animations": "^17.1.2",
"@angular/common": "^17.1.2",
"@angular/compiler": "^17.1.2",
"@angular/core": "^17.1.2",
"@angular/forms": "^17.1.2",
"@angular/platform-browser": "^17.1.2",
"@angular/platform-browser-dynamic": "^17.1.2",
"echarts": "^5.5.0",
"ngx-echarts": "^17.1.0",

我目前碰到的典型问题及摸索的解决方向 #

• 时间轴数据对齐异常：三个分类的时间点对应不上，ECharts渲染时出现断层。后来发现是部分分类的缺失数据没补null，导致series的data长度和timeline的data长度不匹配，补全后就正常了。
• 异步加载后图表不更新：用Angular信号式数据流加载数据时，图表始终显示初始空数据。试了给[options]绑定的对象加不可变对象更新（比如用扩展运算符生成新对象），或者在数据加载完成后调用echartsInstance.setOption()强制更新，都能解决。
• 三分类样式区分度低：三个系列的折线颜色、图例容易混淆，直接在每个series里单独配置itemStyle、lineStyle，同时给timeline添加label配置优化时间轴显示，视觉效果就达标了。

如果你们也有相同场景的开发经验，或者遇到过其他坑，欢迎留言交流。

内容的提问来源于stack exchange，提问作者Felipe Romero