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

lilly呀

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

阅读量8.6k

点赞数 15

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

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

本文链接：https://blog.csdn.net/qq_26780317/article/details/123251830

版权

JS纪录篇专栏收录该内容

48 篇文章 4 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

前言： 平常用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].axisValue + "</br>" + dotHtml +'个数：' + params[0].data+ "</br>" + dotHtml2 +'整改到位率：' + params[1].data
    return result
}

tooltip提示框，一般默认显示折线的数据，如果想要修改对应的内容，也可通过formatter函数来完成。

formatter: function(params) {
            var res = params[0].name + '<br/>'
            for (var i = 0; i < params.length; i++) {
              if (params[i].seriesName === '销售额') {
                res += params[i].marker + '销售额: ' + params[i].data + '元'
              }
              if (params[i].seriesName === '佣金') {
                res += '<br>' + params[i].marker + '佣金: ' + params[i].data + '元'
              }
            }
            return res
          }

三、修改折线图Y轴颜色、线条

在这里插入图片描述

yAxis: {
          // 去掉轴多出来的-
          axisTick: {
            show: false
          },
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed' //内容区域修改为虚线
            }
          },
          show: true,
          fontSize: 10,
          axisLabel: {
            formatter: '{value} 元' //Y轴刻度添加单位
          },
          // 去掉Y轴坐标轴
          axisLine: {
            show: true,
            lineStyle: {
              type: 'dashed',  //虚线
              color: '#999'    //Y轴单位字体颜色
            }
          }
        },

参考博客：
Echarts多条折线图 y轴数值与实际值不一致的解决方法 https://blog.csdn.net/web_start/article/details/106383673
echarts tooltip提示框自定义小圆点(颜色、形状和大小等等) https://blog.csdn.net/weixin_42217154/article/details/105040740
ECharts地图中tooltip提示框通过formatter分别显示多个数值 https://blog.csdn.net/giscript/article/details/52162165/