乐趣区

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

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

工作自身是在同一图表中画多条色彩不同的折线图(type:’line’),但图表渲染实现后发现,鼠标在聚焦图表时显示的 tooltip 中,图例的色彩与折线的色彩对应不上。

例如,原本折线色彩与数据关系为:“数据 1——红色”,“数据 2——黄色”,“数据 3——绿色”,但在 tooltip 显示的信息中,数据 1、数据 2 和数据 3 与色彩的对应关系谬误,对应凌乱。

通过一番折腾才发现,如果将指定线条色彩款式的办法由“lineStyle”替换为“itemStyle”,那么 tooltip 中数据与折线线条色彩的对应关系就能失常对应起来。

在 echarts 官网文档中,能够找到在折线图中,itemStyle 的含意:

> series-line. itemStyle:折线拐点标记的款式。

因而揣测,折线图的 tooltip 中色彩与数据的对应信息由拐点的色彩款式决定。

退出移动版