echarts折线图tooltip中图例颜色对应混乱问题

Posted 2021-09-07 森鱼

记录一个在用echarts（5.0版本）过程中遇到的问题。

任务本身是在同一图表中画多条颜色不同的折线图（type:\'line\'），但图表渲染完成后发现，鼠标在聚焦图表时显示的tooltip中，图例的颜色与折线的颜色对应不上。

例如，本来折线颜色与数据关系为：“数据1——红色”，“数据2——黄色”，“数据3——绿色”，但在tooltip显示的信息中，数据1、数据2和数据3与颜色的对应关系错误，对应混乱。

经过一番折腾才发现，如果将指定线条颜色样式的方法由“lineStyle”替换为“itemStyle”，那么tooltip中数据与折线线条颜色的对应关系就能正常对应起来。

在echarts官方文档中，可以找到在折线图中，itemStyle的含义：

> series-line. itemStyle：折线拐点标志的样式。

因此推测，折线图的tooltip中颜色与数据的对应信息由拐点的颜色样式决定。