【Echarts】多条折线图 y轴数值与实际值不一致，tooltip提示框--自定义小圆点/formatter分别显示多个数值

lilly呀

已于 2022-03-03 14:16:25 修改

阅读量8.8k

点赞数 15

分类专栏： JS纪录篇文章标签：算法 javascript echarts

于 2022-03-03 13:48:44 首次发布

本文链接：https://blog.youkuaiyun.com/qq_26780317/article/details/123251830

版权

本文介绍了在使用Echarts绘制多条折线图时遇到的两个常见问题及其解决方案。一是当折线图的Y轴数值与实际数据不符时，可通过删除series中的stack属性来修复。二是如何自定义tooltip提示框中的小圆点颜色和显示内容，通过formatter函数可以实现对小圆点颜色的修改和多数值的展示。同时，文章还展示了如何修改折线图Y轴颜色和线条样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言： 平常用Echarts图表比较多，在此记录一下，经常遇到的一些问题，方便以后查阅。
在这里插入图片描述

一、多条折线图 y轴数值与实际值不一致的解决方法

如图，在有多条折线图的时候，会出现折线图的实际值与Y轴数值不一致的情况；
解决方法很简单，删除series:[ ]里的stack属性即可。
在这里插入图片描述

二、tooltip提示框–自定义小圆点/formatter分别显示多个数值

一般来说，echarts的tooltip提示框中的小圆点颜色，默认和折线图中折线的颜色保持一致，如果想修改或自定义，使用formatter函数修改params中的marker属性即可，marker(小圆点)即为html片段，要改变小圆点颜色只需自定义html即可。。
打印params属性如下：
在这里插入图片描述

formatter: function(params) {
   
    var result = ''
    var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#0090ff"></span>'
    var dotHtml2 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#ff7800"></span>'
    result += params[

最低0.47元/天解锁文章