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

逆变根系
• 阅读 6632

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

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

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

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

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

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

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

点赞
收藏
评论区
推荐文章
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
皕杰报表之柱状图
1.当我们想设置柱状图时,可以在皕杰报表内,鼠标右键设置类型选择图表类型,鼠标双击图表,选择柱状图和图标模式普通柱状图。可以设置为水平方向。2.选择数据设定,在‘分类轴’和‘系列’中分别设定其值或者表达式。3.选择显示格式,一般图表包括图表区,标题与图例,X轴,Y轴和警戒线。图表颜色:设置图表数据区以外的背景色和字体颜色。数据区颜色:设置数据区内的背景颜色和
Python进阶者 Python进阶者
4年前
一篇文章带你了解CSS 文本样式
大家好,我是IT共享者,人称皮皮。这篇文章我们来讲讲CSS的文本样式。一、文本颜色Color颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定:十六进制值如"#FF0000"。一个RGB值"RGB(255,0,0)"。颜色的名称如"红"。一个网页的文本颜色是指在主体内的选择:
Stella981 Stella981
4年前
Flutter 功能型组件:颜色和主题(Theme)
前言Color类中颜色以一个int值保存,显示器颜色是由红、绿、蓝三基色组成,每种颜色占8比特,存储结构如下:Bit(位)颜色07蓝色815绿色1623红色2431Alpha(不透明度)Theme组件可以为MaterialAPP定义主题数据(ThemeData)。Material组件库里很多组件
Wesley13 Wesley13
4年前
JS 折线图
JS折线图 echarts折线图。需要引入:echarts.min.js<scriptsrc"${ctxStatic}/common/echarts.min.js"charset"utf8"type"text/javascript"</scriptJS调用后台方法,得到数据Map<String,Obj
Stella981 Stella981
4年前
Jfreechart绘制漂亮的图表
要想绘制出漂亮的图表,就必须了解图表的构成部分,将图表进行分解成N个部分。然后再对每一个部分进行渲染,设置样式:包括背景色、轮廓线条样式和颜色、填充颜色、字体大小、样式、颜色。同时,需要确保在整个项目中,图表的样式风格整体统一,统一,和谐才能打造漂亮、干净、专业的外观.1.使用JfreeChart创建柱状图,折线图,饼图,堆积柱状图,时间序列图
陈杨 陈杨
8个月前
鸿蒙5莓创横向柱状图legend属性详解
大家好,欢迎回来鸿蒙5莓创图表组件的专场,我们这一期来讲解组合图组件中legend属性的详细用法。legend(图例)是图表中非常重要的组成部分,它帮助用户理解图表中不同颜色或形状所代表的数据系列。下面我们将全面解析legend的各个属性及其用法。1.sh
陈杨 陈杨
8个月前
鸿蒙5莓创横向柱状图tooltip属性详解
大家好,欢迎回来鸿蒙5莓创图表组件的专场,我们这一期来讲解横向柱状图(McHorBarChart)中tooltip属性的详细用法。tooltip是图表中非常重要的交互组件,它能够在用户悬停或点击时显示详细的数据信息。下面我们将全面解析tooltip的各个属
陈杨 陈杨
8个月前
鸿蒙5莓创图表组件折线类型的实际案例分享-yAxis
大家好,欢迎回来鸿蒙5莓创图表组件的专场,我们这一期来讲解McLineChart折线图中yAxis的实际应用场景和案例用法。yAxis基础介绍yAxis是折线图中Y轴的配置项,用于控制Y轴的显示样式、刻度、标签等。在莓创图表中,yAxis支持以下核心功能:
陈杨 陈杨
8个月前
鸿蒙5莓创图表组件折线类型的属性讲解-tooltip
大家好,欢迎回来鸿蒙5莓创图表组件的专场,我们这一期来讲解McLineChart折线图组件的tooltip属性详细用法。tooltip基础属性详解show属性作用:控制是否显示提示框组件类型:Boolean默认值:true可选值:true/false场景:
陈杨 陈杨
8个月前
鸿蒙5莓创图表组件折线类型的属性讲解-legend
大家好,欢迎回来鸿蒙5莓创图表组件的专场,我们这一期来讲解McLineChart折线图组件的legend图例属性的详细用法。legend属性概述legend是折线图中非常重要的组件,用于展示不同系列的标识和名称,并支持交互操作。莓创图表提供了丰富的lege