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

前言： 平常用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/