Document a problem you encountered while using Echarts (version 5.0).
The task itself is to draw multiple line graphs with different colors (type:’line’) in the same chart, but after rendering the chart, it is found that the color of the legend does not match the color of the line in the tooltip displayed when the mouse focuses on the chart.
For example, the original relationship between the color of the broken line and the data is “data 1 — red”, “data 2 — yellow”, and “data 3 — green”, but in the information displayed in the tooltip, the corresponding relationship between data 1, data 2, and data 3 and the color is wrong and the corresponding is confused.
After a bit of work, we found that if we replaced the method of specifying the line color style with “lineStyle” to “itemStyle,” the data in the Tooltip would correspond to the polyline color correctly.
In the official documentation of Echarts, you can find the meaning of itemStyle in the line chart:
> Series -line-itemStyle: The style of the polyline inflection flag.
Therefore, it is speculated that the corresponding information of color and data in the tooltip of line graph is determined by the color pattern of the inflection point.